<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <h1>距离放学还有<span id="time"></span></h1>

 <button onclick="stop(this)">||</button>

 <script>

     //定义任务函数,计算now到target的时间差

     function task(){

         //定义目标时间end:2016年9月13日 12:00

         var end=new Date("2016/12/28 23:00");

         //获得当前时间now

         var now=new Date();

         //获得时间差(s):end-now/1000

         var s=Math.round((end-now)/1000);

         //求小时(h):

         var h=Math.floor(s/3600);

         //如果h<10,就改为0+h

         h<10&&(h="0"+h);

         //求分钟(m):

         var m=Math.floor(s%3600/60);

         //如果m<10,就改为0+m

         m<10&&(m="0"+m);

         //求秒(s):

         s%=60;

         //如果s<10,就改为0+s

         s<10&&(s="0"+h);

         //找到id为time的span,设置其内容为:h:m:s

         document.getElementById("time").innerHTML=h+":"+m+":"+s;

     }

      task();

     //启动定时器

     var timer=setInterval(task,1000);

     //停止定时器

     function stop(btn){

         //如果btn的内容为||

         if(btn.innerHTML=="||"){

             //停止定时器

             clearInterval(timer);

             //修改btn的内容为|>

             btn.innerHTML="|>"}

         //否则

         else{

         //启动定时器

             timer=setInterval(task,1000);

         //修改btn的内容为||

             btn.innerHTML="||";

         }

     }

 </script>

 </body>

 </html>

JavaScript-setInterval-周期性行定时器-倒计时的更多相关文章

  1. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  2. 前端笔记之JavaScript（九）定时器&JSON&同步异步/回调函数&函数节流&call/apply

    一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据 ...

  3. Flutter 快速上手定时器/倒计时及实战讲解

    本文微信公众号「AndroidTraveler」首发. 今天给大家讲讲 Flutter 里面定时器/倒计时的实现. 一般有两种场景: 我只需要你在指定时间结束后回调告诉我.回调只需要一次. 我需要你在 ...

  4. JavaScript指定周期来调用函数setTimeout和setInterval

    setTimeout方法:setTimeout setInterval方法:setInterval

  5. JavaScript对象(窗口对象 定时器对象 )

    1:窗口时间 confirm(str):确认对话框,确认返回trun,取消返回false,但是必须要有两个return:不然就算按下取消也会提交 第一个return:用于保证确认按钮运行 <sc ...

  6. window.clearInterval与window.setInterval的用法 定时器的设置

    window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) code:在指定时间到时要执行的Java ...

  7. JavaScript SetInterval与setTimeout使用方法详解

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...

  8. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 深入理解JavaScript定时机制和定时器注意问题

    容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...

随机推荐

  1. 13. Reorder List

    Reorder List Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… Y ...

  2. google快捷键，通过浏览器本身来查看

    今天玩google浏览器时发现一个不需要访问google就能查看其快捷键的方式,再此记录一下,以备后用. 1:打开Google浏览器 2:打开开发者工具,有三种方法 2-1:按F12快捷键 2-2:按 ...

  3. JSP三大指令

    JSP三大指令1.page-->最复杂,<%@page language = "java" info = "xxx" ..%>  *pageE ...

  4. FMDB最简单的教程-3 清空数据表并将自增字段清零

    [db executeUpdate:@"DELETE FROM MemberInfo"]; [db executeUpdate:@"UPDATE sqlite_seque ...

  5. Ms sql将首字母大写

    --辅助表 create table a ( a int ) declare @b int begin insert into a values(@b) end; go --表数据 ),id int) ...

  6. ssh通道技术

    所有机器均为Linux操作系统.   机器是A,中间服务器为B,目标服务器是C. 从A可以ssh到B,从B可以ssh到C,但是A不能直接ssh到C. 现在展示利用ssh通道技术从A直接传输文件到C. ...

  7. SQL笔记-第五章，函数

    一.数学函数 功能 函数名  用法 绝对值  ABS()    指数  POWER() POWER(FWeight,-0.5)  平方根  SQRT()    求随机数  RAND()    舍入到最 ...

  8. windows7下安装python3的scrapy框架

    强大的Anaconda和Spyder.不过如何在这个平台上安装Scrapy呢. 打开MS-DOS(win+R输入cmd回车) 然后输入: conda install -c scrapinghub sc ...

  9. mgo-后续测试(指定字段,获取id)

    测试完mgo中的DBRef后,想接着测试指定字段的显示,才发现原来采用框架编码,很多问题被隐藏了起来: 1.显示指定字段: 之前在使用mgo时一直是查询全部字段,在mongo终端环境写为如下格式: & ...

  10. tcl使用笔记

    tcl语法网站:http://www.tcl.tk/man/tcl8.5/TclCmd/contents.htm 1)拷贝文件 set PRJ_HDL_DIR "../prj/hdl&quo ...