延时器和定时器

时间:2022-11-23 23:31:59

延时器:window.setTimeout(code,Millisec)

code:执行的JS代码

Millisec:毫秒数

这个方法有一个返回值 这个返回值的作用是用来给clearTimeout来使用的 就是用来将当前的延时器清除掉

暂停延时器:window.clearTimeout(code)

<script type="text/javascript">                  
 var i=1;
 var ting;                             !var ting  把定量名全局化
 function start(){                         2.开始读取下面的内容

 var res=document.getElementById("miao")               3.document.getElementById("id指定的元素")截取id里的元素
  res.innerHTML="已运转了<font>"+i+"</font>秒"         4..innerHTML改写元素里的内容,(只是文字类型)
   i++                                5.i++每执行一次这个函数就会加一,和上面的i对应

 ting=window.setTimeout("start()",1000)              6.定时器执行这个函数,每1秒开始循环这个函数,并且也储存在了ting这个变量上,ting就是延时器返回的值
 }
 function stop(){
 window.clearTimeout(ting)                    8.这是清楚延时器,根据ting返回来的值停止延时器
 
 }
 
 
 </script>
</head>
<body>
  <button id="miao">已运转了0秒</button><br/>
  <button onclick="start()">开始</button>              1.onclick="start()"  onclick事件会在对象被点击时发生。括号里面是函数当点击了star按钮时启动这个函数;
  <button onclick="stop()">停止</button>               7.onclick="stop()">  括号里面是函数当点击了star按钮时启动这个函数;
</body>

不过这个有bug,按多少次开始按钮就要按多少次停止按钮,按开始按钮越多i就会加的更快!

定时器:

window.setInterval(code,Millisec)

code:要执行的JS代码

Millisec:毫秒时间

window.clearInterval(要清除的定时器返回值)


 

<style type="text/css">
 #clock{
  width:400px;
  height:400px;
  background:#66ccff;
  margin:auto auto;
 }
 </style>
 <script type="text/javascript">
 //创建一个Date对象
 function today(){
  var time =new Date();
  var h    =time.getHours();
  var m    =time.getMinutes();
  var s    =time.getSeconds();

  var t =h+"小时"+m+"分钟"+s+"秒"
  document.getElementById("clock").innerHTML=(t);
 }
 window.onload=function (){
  setInterval("today()",1000)
 }
 </script>
</head>
<body>
  <div id="clock"></div>
</body>