掌握JavaScript中的定时器和延时器

发表时间: 2024-03-08 11:16

关于定时器setInterval(code, millisecond)和延时器setTimeout(code, millisecond)中第一个参数引号问题思考

对于自定义函数使用双引号必须加上括号;

setInterval("start()", 1000);setTimeout("start()", 1000);

可以简化为

setInterval(start, 1000);setTimeout(start, 1000);

start 为自定义函数的名称

停止定时器和延时器的函数

clearInterval()clearTimeout()

对于执行语句中变量必须使用字符串连接符"+", 并且外引号对应;

执行语句使用双引号：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload = function(){    var i=10;    timer = setTimeout("alert('骨干分"+i+"子')",3000); //注意引号和变量的使用方式}function stop(){    clearTimeout(timer);}</script></head><body><button onclick="stop()">停止</button></body></html>

执行语句使用单引号

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload = function(){var i=10;timer = setTimeout('alert("我是第'+i+'个人")',3000); //注意引号和变量的使用方式}function stop(){clearTimeout(timer);}</script></head><body><button onclick="stop()">停止</button></body></html>

直接使用匿名函数：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload = function(){var i=10;timer = setTimeout(function(){alert("我是第"+i+"个人");},3000); //注意引号和变量的使用方式}function stop(){clearTimeout(timer);}</script></head><body><button onclick="stop()">停止</button></body></html>

以上三个案例：只弹出一次警告框"我是第10个人"

实例1：简单计时器

第一种方法：使用延时器

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><script type="text/javascript">//实现简单的计时器var i = 0;var timer;function start(){i++;//第一步：要获取到id=res这个对象var btnObj = document.getElementById("res");btnObj.innerHTML = "程序运行了<font color='red'>"+i+"</font>秒";//使用延时器 每隔1秒后调用这个函数timer = setTimeout("start()",1000); //使用递归函数}//所谓的停止 就是用来清除延时器function stop(){clearTimeout(timer);}</script></head><body><button id="res">程序运行了0秒</button><br/><button onclick="start()">开始</button><button onclick="stop()">停止</button></body></html>

第二种方法：使用定时器

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">var i=0function start(){var oBtn = document.getElementById("btn");timer= setInterval(function(){ //使用匿名函数oBtn.innerHTML = "程序运行了"+i+"秒";i++;}, 1000);}function stop(){clearInterval(timer);}</script></head><body><button id="btn">程序运行了0秒</button><br /><button onclick="start()">开始</button><button onclick="stop()">停止</button></body></html>

做简单计时器两种方法的比较：

延时器要使用递归函数, 定时器不必使用递归函数

实例2: 文字滚动：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><script type="text/javascript">//当页面加载完成后window.onload = function(){window.setInterval("start()",50);}var str = "武汉传智PHP1期基础班";var str_leng = str.length; //这个字符串初始的长度var flag = "right"; //人为定义一个方向 来告诉向右走//这个函数的功能主要是用于实现文字滚动//1.需要先获取id=input这个对象 然后给这个对象的value前面加空格function start(){var inputObj = document.getElementById('input');if(flag == "right"){//向右//获取id=input这个对象str = " "+str;//再kongge这个字符串赋值给inputObj这个对象的valueinputObj.value = str;if(str.length == 55){flag = "left";}}else{//向左//每隔50毫秒删除一个空格str = str.substr(1);inputObj.value = str;if(str.length == str_leng){flag = "right";}}}</script></head><body><input id='input' size="40" /></body></html>

实例3: 图片轮播

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.box{width:500px;height:160px;margin:50px auto;}</style><script type="text/javascript">window.onload = function(){setInterval("start()",500);}var i=1;function start(){var oImg = document.getElementById("img");i++;oImg.src = "image/dd_scroll_"+i+".jpg";if(i==6){i=0;}}</script></head><body><div class="box"><img src="image/dd_scroll_1.jpg" id="img"/></div></body></html>

实例4：倒计时

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">button{width: 100px;}</style></head><body><button>发送验证码</button><script type="text/javascript">var btn = document.getElementsByTagName("button")[0];var num = 10;var timer = null;btn.onclick = function(){btn.disabled = "disabled";clearInterval(timer);timer = setInterval(function(){if(num===-1){clearInterval(timer);//如果num=0我就让定时器停下来btn.removeAttribute("disabled");num = 10;btn.innerText = "发送验证码";}else{btn.innerText = num+"s";num--;}},1000)}</script></body></html>

实例5：显示动态时间

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>动态显示时间</title><style type="text/css">#times{width: 200px;height: 20px;border: 3px solid gray; /*如果不加实线无法显示边框*/}</style></head><body><div id="times"></div><script type="text/javascript">//得到时间并写入divfunction getDate(){//获取当前时间var date = new Date();//格式化为本地时间格式var date1 = date.toLocaleString();//获取divvar div1 = document.getElementById("times");//将时间写入divdiv1.innerHTML = date1;}//使用定时器每秒向div写入当前时间setInterval("getDate()",1000);</script></body></html>

实例6: 随机点名

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 60px;font-size: 36px;text-align: center;line-height: 60px;border: 1px solid #000;margin: 100px auto;}</style></head><body><button id="start">开始</button><button id="end">结束</button><div id="div">梁永灿</div><script type="text/javascript">//准备人名var arr = ["张三","李四","王五","老六"];var timer = null;start.onclick = function(){//以防沙雕用户频繁点击 我每次点击都把上一次的定时器清空clearInterval(timer);timer = setInterval(function(){div.innerText = arr[Math.floor(Math.random()*arr.length)];},10)}end.onclick = function(){clearInterval(timer);}</script></body></html>

掌握JavaScript中的定时器和延时器

热门阅读

推荐阅读