windows对象提供的两种定时器的应用,时钟

本文介绍了Windows环境下的两种定时器——周期性定时器和一次性定时器的使用。周期性定时器用于每隔固定时间间隔执行任务,而一次性定时器则在设定时间后仅执行一次。文中还提及了如何启动、停止和删除这些定时器的操作,并提供了一个在网页中实现时钟的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

周期性定时器

每隔指定的时间间隔,执行一次指定的功能

var timer1 = window.setInterval(task,  time);

设置一个周期性定时器,并立即启动它;先计时,再运行。

window.clearInterval( timer1 );

停止并删除计时器

一次性定时器

间隔指定的时间后,执行一次指定的功能,仅执行一次。

var timer2 = window.setTimeout(task,  time);

设置一个一次性计时器,并立即启动它;先计时,再执行。

window.clearTimeout( timer2 );

在一次性计时器执行之前打断并删除该计时器。

以下代码在网页中实现一个时钟:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style type="text/css">
    *{margin:0; padding:0;}
    #clock{
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid #aaa;
        border-radius: 50%;
        position: relative;
    }
    .p{
        position: absolute;
        left: 150px;
        transform-origin: left center;
    }
    .hour{
        width: 60px;
        height: 12px;
        background: #faa;
        top: 144px;
    }
    .minute{
        width: 120px;
        height: 8px;
        background: #aaf;
        top: 146px;
    }
    .second{
        width: 150px;
        height: 4px;
        background: #afa;
        top: 148px;
    }
  </style>
 </head>

 <body>
  <div id="clock">
    <div class="p hour"></div>
    <div class="p minute"></div>
    <div class="p second"></div>
  </div>
  <script>
  function drawClock(){
    var now = new Date();
    var h = now.getHours() % 12;
    var m = now.getMinutes();
    var s = now.getSeconds();

    var hpointer = document.getElementsByClassName('hour')[0];
    hpointer.style.transform = 'rotate('+(h*30-90)+'deg)';

    var mpointer = document.getElementsByClassName('minute')[0];
    mpointer.style.transform = 'rotate('+(m*6-90)+'deg)';

    var spointer = document.getElementsByClassName('second')[0];
    spointer.style.transform = 'rotate('+(s*6-90)+'deg)';
  }
  drawClock();
  window.setInterval(drawClock, 1000);
  </script>
 </body>
</html>

时钟

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值