定时器
延迟执行 ，周期执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟执行</title>
</head>
<body>
<script>
console.log('this is mseeage');//打印一段文字作为对比
var t =setTimeout(function () {
console.log('this is a setTimeout');//延迟1234毫秒
},1234)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>周期执行</title>
</head>
<body>
<script>
console.log('this is message...');
/*
* setInterval(function,delay)方法
* 作用-设置一个周期执行的定时器
* 参数
* function-标识延迟执行的代码逻辑
* delay-标识延迟执行的时间，单位为毫秒
* 返回值-表示当前定时器的标识
* */
/*
* setInterval (function(){
* console.log('this is interval...');},1000);
* */
/*function fun(){
console.log('this is interval... ');
setTinmaout(fun,1000);}
fun();*/
(function fun() {
console.log('this is interval...');
setTimeout(fun, 1);
//setTimeout(arguments.callee,1000);
})();
console.log('this is message too...');
</script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态显示时间</title>
</head>
<body>
<button id="start">开始显示</button>
<button id="stop">停止显示</button>
<h2 id="showtime"></h2>
<script>
var t;//表示定时器的标识
var start =document.getElementById('start');
start.addEventListener('click',showTime);
var stop=document.getElementById('stop');
stop.addEventListener('click',function () {
clearTimeout(t);
start.removeAttribute('disabled');
});
//定义一个函数-完成获取时间并显示的功能
function showTime(){
start.setAttribute('disabled','disabled');
//获取时间
var date=new Date();
var hour =date.getHours();
var minute =date.getMinutes();
var second =date.getSeconds();
//格式化当前时间
var time =hour+':'+minute+':'+second;
var showtime=document.getElementById('showtime');
showtime.textContent=time;
//设置一个定时器
t=setTimeout(showTime,1000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方块自动移动</title>
<style>
body{
margin: 0;
}
#box{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
top: 300px;
left: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box =document.getElementById('box');
box.addEventListener('click',isMove);
//定义一个标识-标识时停止还是移动
var flag=false;//表示停止
var t;//定时器的表示
//判断当前方块的状态
function isMove(){
if (!flag){//如果停止就移动
//将标识设置为true-表示移动
flag=true;
move();
}else {//如果移动就停止
flag=false;
stop();
}
}
//实现方块移动逻辑
function move() {
//1获取当前方块的left样式属性值
var style = window.getComputedStyle(box);
var left = parseInt(style.left);
//2增加left样式属性值
left++;
//3利用内联样式覆盖外联样式
box.style.left = left + 'px';
//设置定时器
t = setTimeout(move, 5);
}
//实现方块停止逻辑
function stop() {
clearTimeout(t)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小球垂直移动</title>
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: lightcoral;
border-radius: 25px;
position: absolute;
left: 400px;
top: -50px;
}
</style>
</head>
<body>
<!--<div id="box"></div>-->
<script>
// var box = document.getElementById('box');
var body = document.body;//获取body属性
const WIDTH = window.innerWidth;//创建一个常量宽度=窗口宽度
// 向页面中创建小球
function createBox(){//封装一个函数
var div = document.createElement('div');
div.setAttribute('class','box');
var random = Math.random() * (WIDTH - 50);
div.style.left = random + 'px';
body.appendChild(div);
}
// 控制小球向下移动
function moveDown(){
var boxs = document.getElementsByClassName('box');
for (var i=0; i<boxs.length; i++) {
var box = boxs[i];
var style = window.getComputedStyle(box);
var boxTop = parseInt(style.top);
boxTop += 10;
box.style.top = boxTop + 'px';
}
}
// 创建多个小球
for (var i=0; i<10; i++) {
createBox();// 创建一个小球
}
setInterval(function(){
moveDown();
},500);
</script>
</body>
</html>
