js--定时器

我们可以设定时间让某个动作不断的去执行 。 

在js 里面用定时器来表示。

    window.setInterval(“执行的函数”,间隔时间) 

    setTimeout(“函数”, 时间 )    

 setInterval(fn,5000);      每隔 5秒钟，就去执行函数fn一次

 setTimeout(fn,5000);     5秒钟之后，去执行 fn 函数，只执行一次

案例--倒计时

<script>

//原理：结尾时间减去现在的时间 毫秒再进行转换

var demo = document.getElementById("demo");

var endDate = new Date("2017/8/16 11:13:00");

setInterval(showTime,1000);

function showTime() {

var startDate = new Date;

var result = parseInt( endDate.getTime() - startDate.getTime())/1000;

var d = parseInt(result/3600/24);

var h = parseInt(result/3600%24);

var m = parseInt(result/60%60);

var s = parseInt(result%60);

d<10? d = "0"+d:d;

h<10? h = "0"+h:h;

m<10? m = "0"+m:m;

s<10? s = "0"+s:s;

demo.innerHTML = "距离抢购结束还剩：" +d+"天"+h+"小时"+m+"分钟"+s+"秒";

}

</script>

案例---时钟

分针     一圈  360    一圈走 60次   每次  6°  每分钟 6°

时针     一圈 360      一共 12 个 表盘没有24小时    每个小时 走   30°

<script>

var hour = document.getElementById("h");

var minute = document.getElementById("m");

var second = document.getElementById("s");

var h = 0,m = 0,s = 0,ms = 0;

setInterval(function () {

var date = new Date();

ms = date.getMilliseconds();

s = date.getSeconds() + ms/1000;

m = date.getMinutes() + s/60;

h = date.getHours()%12 + m/60;

second.style.transform = "rotate("+s*6+"deg)";

minute.style.transform = "rotate("+m*6+"deg)";

hour.style.transform = "rotate("+h*30+"deg)";

},1020)

</script>

深层次的看待定时器区别

setInterval是排队执行的

假如 间隔时间是1秒， 而执行的程序的时间是2秒    

上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 

案例---5秒后自动跳转页面

<script>

var demo = document.getElementById("demo");

var count = 5;

var speed =1000;

setTimeout(jump,speed);

function jump() {

count--;

demo.innerHTML = "<a href ='http://www.baidu.com'>本页面将在"+count+"秒后跳转";

if(count<=1){

window.location.href = "http://www.baidu.com";

}else {

//若count>0 则再调用一次计时函数。

setTimeout(jump,speed);

//arguments.callee 是指正在执行的函数 在正在使用的使用函数内使用。

setTimeout(arguments.callee,speed);

}

}