<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#fk {
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 300px;
background-color: red;
}
</style>
<!-- <div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div> -->
<!-- <input type="text" id="abc" />
<div id="te"></div>
<div id="ta"></div> -->
<input type="submit" id="ks" value="开始" />
<input type="submit" id="js" value="结束" />
<div id="fk"></div>
<script>
//定时器
// var a = 0;
// setInterval(function() {
// console.log(a++);
// }, 1000);
//定时器案例开始，结束，数字滚动。
// var gd = document.getElementById('gd');
// var ks = document.getElementById('ks');
// var js = document.getElementById('js');
// var a = 0;
// var cset;
// ks.onclick = function() {
// clearInterval(cset);
// cset = setInterval(function() {
// gd.innerHTML = a++;
// }, 1000);
// }
// js.onclick = function() {
// clearInterval(cset);
// }
//使用定时器实现动画的简单原理。
var left = 200;
var ks = document.getElementById('ks');
var js = document.getElementById('js');
var fk = document.getElementById('fk');
ks.onclick = function() {
// a += 2;
// fk.style.left = a;
jsset = setInterval(function() {
left += 2;
fk.style.left = left + 'px';
}, 50);
}
js.onclick = function() {
clearInterval(jsset);
}
</script>
</body>
</html>