4.1、介绍和语法
定时器可以完成定时作用，可以让一段代码延迟一段时间然后再执行。
很多地方都会用到定时器，比如用JS写一个会走的钟表；比如轮播图；
JS定时器有两种：
- 指定一段时间，然后在该时间段之后只执行一次代码，特点是只执行一次。
- 指定一段时间，然后每隔一段时间执行一次代码，也就是间隔一段时间执行一次，一直重复。
具体方法如下：
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setTimeout(JS代码或函数, 毫秒数);
setInterval (JS代码或函数, 毫秒数);
<script>
/** 用法一：直接写一行js ***/
setTimeout('alert(123)', 2000); //表示2 秒后，弹出窗口
/**用法二：执行函数 **/
setTimeout(function(){
console.log(123);
console.log(456);
}, 2000);//表示2 秒后执行一次函数
/** 用法三：先定义好函数，然后在执行定时器 **/
//先定义函数，然后在调用定时器
function m(){
console.log(789);
console.log('10LQ');
}
setTimeout(m, 2000); //表示2 秒后执行m函数 调用函数不加（）
/** 用法四：先定义好函数，然后在执行定时器 **/
//先定义函数，然后在调用定时器
function m() {
console.log(789);
console.log('10LQ');
}
setTimeout('m()', 2000);//函数名当初参数 字符串
setInterval() 语法上和setTimeout一样。
4.2、会走的时间
思路是写一个能够输出当前时间的函数，页面加载完毕马上执行一次，然后在用定时器每隔1秒执行一次函数即可。
HTML代码：
下面是检测数字是否小于10的函数：>
下面定义制作时间的函数，然后马上调用一次，这样刷新页面就能够看到时间了：
使用定时器，让制作时间的函数每隔一秒执行一次：
<div id="clock"></div>
<script>
//写一个函数，检测数字是否小于10，如果小于10，则前面加一个0
function check(n){
if(n < 10){
n = '0'+ n; //字符串和数字相连，会将数字转换为字符串，然后相连
}
return n;
}
//定义制作时间的函数
function t(){
//制作时间
var d = new Date();
var year = d.getFullYear();
var month = check(d.getMonth()+1);
var day = check(d.getDate());
var hour = check(d.getHours());
var minute = check(d.getMinutes());
var second = check(d.getSeconds());
//组合
var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
document.getElementById('clock').innerText = s;
}
t(); //上来先运行一次函数，显示一次时间
setInterval(t, 1000); //每隔1秒执行一次函数
</script>
4.3、终止定时器
对应的终止定时器的方法分别是：
clearInterval(定时器计数);
clearTimeout(定时器计数);
参数“定时器计数”指的是定时器的返回值。
var t = setTimeout(function(){
console.log(123);
}, 5000);
//console.log('t' + t);
var t2 = setTimeout(function () {
console.log(456);
}, 5000);
//console.log('t2' + t2);
clearTimeout(t2);
4、修改会走的时间
加入两个按钮，一个表示停止，一个表示继续。
HTML加入两个按钮：
JS代码给“停止”和“继续”绑定单击事件：
优化上述代码：
首先将按钮换成一个：
JS代码：
<div id="clock"></div>
<input type="button" value="停止" id="stop" />
<input type="button" value="继续" id="jixu" />
<script>
//写一个函数，检测数字是否小于10，如果小于10，则前面加一个0
function check(n){
if(n < 10){
n = '0'+ n; //字符串和数字相连，会将数字转换为字符串，然后相连
}
return n;
}
//定义制作时间的函数
function t(){
//制作时间
var d = new Date();
var year = d.getFullYear();
var month = check(d.getMonth()+1);
var day = check(d.getDate());
var hour = check(d.getHours());
var minute = check(d.getMinutes());
var second = check(d.getSeconds());
//组合
var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
document.getElementById('clock').innerText = s;
}
t(); //上来先运行一次函数，显示一次时间
var flag = true; //标志为true，表示不允许继续
var x = setInterval(t, 1000); //每隔1秒执行一次函数
console.log('开始的x值为：' + x);
//给停止按钮加入单击事件
document.getElementById('stop').onclick = function () {
clearInterval(x);
console.log('清除的是：' + x);
flag = false;
};
//继续
document.getElementById('jixu').onclick = function () {
//
if(flag){
return false;
}
flag = true; //重置为true，目的是不让一直点击继续
x = setInterval(t, 1000);
console.log('点击继续时x的值是：' + x);
};
</script>
<div id="clock"></div>
<input type="button" value="停止" id="qiehuan" />
<script>
//写一个函数，检测数字是否小于10，如果小于10，则前面加一个0
function check(n){
if(n < 10){
n = '0'+ n; //字符串和数字相连，会将数字转换为字符串，然后相连
}
return n;
}
//定义制作时间的函数
function t(){
//制作时间
var d = new Date();
var year = d.getFullYear();
var month = check(d.getMonth()+1);
var day = check(d.getDate());
var hour = check(d.getHours());
var minute = check(d.getMinutes());
var second = check(d.getSeconds());
//组合
var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
document.getElementById('clock').innerText = s;
}
t(); //上来先运行一次函数，显示一次时间
var flag = true;
var x = setInterval(t, 1000); //每隔1秒执行一次函数
document.getElementById('qiehuan').onclick = function () {
if(flag){
this.value = '继续';
clearInterval(x);
flag = false;
}else{
this.value = '停止';
x = setInterval(t, 1000);
flag = true;
}
}
</script>
4.3图片淡入淡出切换效果
1、默认的HTML和css
*{
margin:0;
padding:0;
border:0 none;
}
div{
width:600px;
height:400px;
margin:10px auto;
position: relative;
}
img{
position: absolute;
left:0;
top:0;
z-index: 1;//所有图片全部都为一个上下层级
}
img:first-child{
z-index: 3;//让第一个图片的层级最高，就可以默认显示第一个了；如果不设置，默认显示是最后一个图片
/*opacity: 0.5;*/
}
<div>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
2、JS完成图片生硬的变化
思路是用一个定时器不断的去切换图片的显示和隐藏。每切换一次，都让图片的下标增大1，但是不能超出范围。
var imgs = document.getElementsByTagName('img'); //返回数组
var outIndex = 0; //默认第一张图片先应该隐藏
var inIndex = 1; //默认第二张图片先显示
//先完成生硬的变化
setInterval(function(){
//判断outIndex和inIndex不要超出范围
if(outIndex >= 6){
outIndex = 0;
}
if(inIndex >= 6){
inIndex = 0;
}
imgs[outIndex].style.zIndex = 2;
imgs[inIndex].style.zIndex = 3;
change(imgs[inIndex]); //调用下面的函数，传递进去要显示的图片
outIndex++;
inIndex++;
}, 4000);
3、完成透明度的慢慢变化
全部js代码
var imgs = document.getElementsByTagName('img'); //返回数组
var outIndex = 0; //默认第一张图片先应该隐藏
var inIndex = 1; //默认第二张图片先显示
//先完成生硬的变化
setInterval(function(){
//判断outIndex和inIndex不要超出范围
if(outIndex >= 6){
outIndex = 0;
}
if(inIndex >= 6){
inIndex = 0;
}
imgs[outIndex].style.zIndex = 2;
imgs[inIndex].style.zIndex = 3;
change(imgs[inIndex]); //调用下面的函数，传递进去要显示的图片
outIndex++;
inIndex++;
}, 4000);
//自定义函数，完成透明度慢慢变化的过程
function change(ele){
//先让图片的透明度置为0
ele.style.opacity = 0;
//让图片的透明度慢慢变化到1
//希望通过1秒钟将透明度从0变化到1
//0~0.05~0.1~0.15~0.2.......~1 共变化了20次
for(var i=1; i<=20; i++){ //每次循环表示透明度变化一次，共变化20次，每次增加0.05
(function(x){
setTimeout(function(){
ele.style.opacity = 0.05*x;
if(x == 20){
//设置原来的图片zIndex为1
//这行代码是延迟1秒才执行的，此时outIndex已经变大了，所以此处需要-
imgs[outIndex-1].style.zIndex = 1;
}
}, 50*x); //每隔50毫秒变化一次，共变化20次，用时1000毫秒（1秒）
})(i);
}
}
