用js来实现基本的定时器方法在web端显示

最新推荐文章于 2022-05-09 16:55:59 发布

原创最新推荐文章于 2022-05-09 16:55:59 发布

· 292 阅读

0 ·

版权

文章标签：

#java

javascript 专栏收录该内容

11 篇文章

订阅专栏

//有两种方法来实现这个功能

//一种方法就用bom对象模型中的setInterval clearInterval方法来实现这个功能(设置定时器方法，清除定时器方法）

//另外一个方法就是用BOM对象中的setTimeout clearTimeout来实现这个功能

第一个方法的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>

               <input type="text" size="30" id="one"/><br/>
               <input type="button" id="two" value="开始" οnclick="fun1();"/>
               <input type="button" id="three" value=" 结束" οnclick="fun2();"/>
           </body>
</html>

var id;

function fun1(){
                   //对开启定时器做限制，可以的话只需要一次开始来控制，可以使用来控制数组来控制。
                   //或者每次打开之前需要判断一下是否需要打开，判断id
                   setTime();
                   //调用seInterval每隔一秒钟调用setTime方法
                   if(!id){   id= window.setInterval(setTime,1000);}
                   }

function setTime(){
                   //获取当前时间，交给文本输入框显示
                   var date=new Date();
                   document.getElementById("one").value=date.toLocaleString();
                   //时间走起来，在重复执行一二步骤
               }
               function fun2(){

                   clearInterval(id);
                   id=undefined;
               }

</script>

另外一个方法就是将setTimeout来实现这个定时器的功能，不过区别的就是 setTimeout与setInterval参数二是参数二毫秒数执行参数一的代码和函数。(只执行一次)

//参数1 ：接收一个字符串，这个字符串是js代码window.setInterval("alert('aaa');",1000);

//参数1：还可以接收一个函数对象window.setInterval(fun1,3000); function fun1(){alert('bbb');}

//参数2 ：接收一个整数。单位是毫秒

//返回值：打开定时器的ID var ID=window.setInterval(fun1,3000); function fun1(){alert('bbb');}

window.clearInterval(ID);