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>

时钟

在对象中使用定时器

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

javascript基础:window对象定时器

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

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

周期性定时器每隔指定的时间间隔,执行一次指定的功能var timer1 = window.setInterval(task, time); 设置一个周期性定时器,并立即启动它;先计时,再运行。win...
  • Sunflowerfiona
  • Sunflowerfiona
  • 2015年11月17日 16:51
  • 542

Window对象概述

Web浏览器的主要任务是在一个窗口中显示html文档,在客户端,表示html文档的是Document对象,window对象代表显示该文档的窗口。Window对象是一个全局对象,因此所有的全局变量都被定...
  • jiagun4
  • jiagun4
  • 2006年05月15日 13:21
  • 811

stm32定时器时钟源问题

在STM32F1系列中,其中定时器TIM1、TIM8是挂在在APB2上的,而定时器TIM2、3、4是关在在APB1上的。 在工程中我们一般设置APB1CLK = 36M  APB2CLK = 72M ...
  • u014124220
  • u014124220
  • 2015年01月28日 19:27
  • 1869

linux内核时钟与定时器的实现

一、概述 在计算机系统,CPU是以一个节拍一个节拍运行的(cpu cycle),这就是CPU的频率(HZ)。类似的,操作系统需要提供超时功能,显示时间(如PC机右下角的时钟),统计(CPU占有率计算...
  • imtgj
  • imtgj
  • 2012年04月21日 23:39
  • 4276

Window对象

一、Window对象      这个对象针对浏览器窗口本身——不是针对浏览器编程,而是针对浏览器用于显示内容的实际窗口。引用Window对象      window.propertyName     ...
  • xiaolvzi
  • xiaolvzi
  • 2007年10月22日 22:50
  • 374

不占用windows用户对象的定时器

QEventDispatcherWin32::registerTimer: Failed to create a timer (当前程序已使用了 Window 管理器对象的系统允许的所有句柄。 并不是...
  • m15814478834
  • m15814478834
  • 2016年11月11日 09:39
  • 695

javascript中两种定时器的区别

javascript中两种定时器的区别 (1)定时器setTimeOut()与clearTimeOut()    setTimeOut()使用方法:< …… onClick="timerID=s...
  • anxinliu2011
  • anxinliu2011
  • 2012年05月08日 14:36
  • 967

三、s3c2440 裸机 系统时钟和定时器的设置

三、系统时钟和定时器的设置 ⑴系统时钟原理分析 时钟决定2440执行速度,2440可以使用外部提供的时钟源,也可以使用外部的晶振然后通过内部的晶振获得时钟频率;具体选择使用哪一个时钟源看下图: ...
  • woshidahuaidan2011
  • woshidahuaidan2011
  • 2016年04月11日 16:55
  • 1489
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:windows对象提供的两种定时器的应用,时钟
举报原因:
原因补充:

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