定时器
耽误实行 ，周期实行
<!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>
