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

原创 2015年11月17日 16:51:36

周期性定时器

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

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>

时钟

相关文章推荐

javascript基础:window对象定时器

代码: Document function move(flag) { if(flag == 1) { //滚动窗口内容到 偏移位置 window.sc...
  • yupeigu
  • yupeigu
  • 2017年01月25日 14:38
  • 320

在对象中使用定时器

在对象中使用定时器的时候,我们会碰到这样一个问题:定时器的函数无法访问对象的属性,问题的原因是: 定时器访问的是全局属性,如下代码片段,定时器中this指的是window对象,没有在全局中定义...

js面向对象学习笔记之五(定时器)

话不多说 ,直接上代码 : function set(a,b,c){ alert(a); alert(b); alert(c); } //一次定时 setTimeout(se...

使用定时器对象

使用定时器对象 以下图表说明了怎么样使用一个通知定时器去为一个操作设定一个超时事件,然后等待其他驱动例程处理一个IO请求。 如上图表所示,驱动程序必须为定时器对象提供存储空间,并以它作为参...

QTimer 定时器

QTimer类为我们提供了一个即可重复触发又可单次触发的定时器。它是一个高层次的应用程序接口。要使用它,只需创建一个QTimer类对象,将它的timeout()信号连接到适当的函数上,然后调用其sta...
  • Amnes1a
  • Amnes1a
  • 2017年04月17日 13:51
  • 1017

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...

CT图像重建技术

由于csdn贴图不方便,并且不能上传附件,我把原文上传到了资源空间CT图像重建技术 1.引言 计算机层析成像(Computed Tomography,CT)是通过对物体进行不同角度的射线投影测量而...

Matlab绘图-很详细,很全面

Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数。此外,Ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:windows对象提供的两种定时器的应用,时钟
举报原因:
原因补充:

(最多只允许输入30个字)