<html>

<body>

<span>倒计时30分钟：</span><span id="clock">00:30:00:00</span>

</body>

</heml>

<script type="text/javascript">

//秒表倒计时控制
var normalelapse = 100;  
var nextelapse = normalelapse;
var counter;   
var startTime;
var start1 = clock.innerText;   
var finish = "00:00:00:00";  
var timer = null;  
// 开始运行  
function run() {  
    counter = 0;  
    // 初始化开始时间  
    startTime = new Date().valueOf(); 
    //alert(startTime);
     
    // nextelapse是定时时间, 初始时为100毫秒  
    // 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  
    timer = window.setInterval("onTimer()", nextelapse);   
}  
// 停止运行  
function stop() {  
    window.clearTimeout(timer);  
}  
window.onload = function() {   
 run();
}  
// 倒计时函数  
function onTimer()  
{  
    if (start1 == finish)  
    {  
        window.clearInterval(timer);   
        return;  
    }  
    var hms = new String(start1).split(":");  
    var ms = new Number(hms[3]);  
    var s = new Number(hms[2]);  
    var m = new Number(hms[1]);  
    var h = new Number(hms[0]);  
    ms -= 10;  
    if (ms < 0)  
    {  
        ms = 90;  
        s -= 1;  
        if (s < 0)  
        {  
            s = 59;  
            m -= 1;  
        }  
        if (m < 0)  
        {  
            m = 59;  
            h -= 1;  
        }  
    }  
    var ms = ms < 10 ? ("0" + ms) : ms;  
    var ss = s < 10 ? ("0" + s) : s;  
    var sm = m < 10 ? ("0" + m) : m;  
    var sh = h < 10 ? ("0" + h) : h;  
    start1 = sh + ":" + sm + ":" + ss + ":" + ms;  
    clock.innerText = start1;  
    // 清除上一次的定时器  
    window.clearInterval(timer);  
    // 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse  
    counter++;   
    var counterSecs = counter * 100;  
    var elapseSecs = new Date().valueOf() - startTime;  
    var diffSecs = counterSecs - elapseSecs;  
    nextelapse = normalelapse + diffSecs;  
    //diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;  
   // next.value = "nextelapse = " + nextelapse;  
    if (nextelapse < 0) nextelapse = 0;  
    // 启动新的定时器  
    timer = window.setInterval("onTimer()", nextelapse);   
}

</script>

转载自：https://blog.csdn.net/pamchen/article/details/7854855

JS秒表倒计时器 （转）的更多相关文章

  1. 多线程之倒计时器CountDownLatch和循环栅栏CyclicBarrier

    1.倒计时器CountDownLatch CountDownLatch是一个多线程控制工具类.通常用来控制线程等待,它可以让一个线程一直等待知道计时结束才开始执行 构造函数: public Count ...

  2. Android倒计时器——CountDownTimer

    Android倒计时器--CountDownTimer 说明 第一个参数是倒计时的时间 第二个参数是多长时间执行一次回调 /** * @param millisInFuture The number ...

  3. 多线程控制工具类--倒计时器CountDownLatch的使用（模仿火箭发射）

    package com.thread.test.Lock; import java.util.Random; import java.util.concurrent.CountDownLatch; i ...

  4. JS中的计时器事件

    JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterv ...

  5. 3.1.5 倒计时器：CountDownLatch

    package 第三章.倒计时器CountDownLatch; import java.util.concurrent.CountDownLatch; /** * Created by zzq on ...

  6. 【JavaScript】分秒倒计时器

    一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态 详细效果例如以下图.为了说明问题.调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把wi ...

  7. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  8. [FPGA]Verilog实现可自定义的倒计时器(24秒为例)

    目录 想说的话... 样例_边沿检测计数器 代码讲解 仿真演示 拓展_自定义倒计时数和倒计时间隔 代码讲解 仿真演示 总结 实例_24秒倒计时器 想说的话... 本次实现的是一个24秒倒计时器,功能顾 ...

  9. Java基础教程：多线程基础（5）——倒计时器(CountDownLatch)

    Java基础教程:多线程基础(5)——倒计时器(CountDownLatch) 引入倒计时器 在多线程协作完成业务功能时,有时候需要等待其他多个线程完成任务之后,主线程才能继续往下执行业务功能,在这种 ...

随机推荐

  1. C语言关于指针函数与函数指针个人理解

    1,函数指针 顾名思义,即指向函数的指针,功能与其他指针相同,该指针变量保存的是所指向函数的地址. 假如是void类型函数指针定义方式可以是 void (*f)(参数列表);亦可以先用 typedef ...

  2. linux（centos 7）下安装JDK,Tomcat,mysql 运行Maven 项目

    一.在Linux中安装JDK 1. 将JDK上传到root下(任何位置均可以). 如图: 2. 用解压命令解压JDK tar -xvf (此处为jdk文件名) 如果是rpm包,执行rpm -i jdk ...

  3. 【Microstation】三维建模基础及软件入门到精通实验教程目录

    @ 目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 MicroStation是一款非常不错的二维和三维设计软件,由奔特力(Bentley)工程软件系统有限公司开发的一款软件.在C ...

  4. MIPS指令的CPU实现：ALU设计

    设计CPU的第一步,设计一个简单的逻辑运算单元ALU.同时对Verilog语言也有一定要求. 一.实验内容 如图,ALU接受两个N位的输入,得到N位的输出,通过控制信号F决定运算功能. 将ALU的输出 ...

  5. Python将PDF转为TXT

    PDFMiner----python的PDF解析器和分析器 1.官方文档:http://www.unixuser.org/~euske/python/pdfminer/index.html 2.特征 ...

  6. 二：使用VS2019 + .net 6创建 webapi 项目

    0.创建一个.net 6项目.由于目前.net 6还是预览版,所以需要添加预览版SDK功能.工具 -> 选项 -> 环境 -> 预览功能 ,勾选使用.net sdk预览版. 1.新建 ...

  7. sql批量插入缓慢

    1.有一个普通的表t_asset,只有2个字段id,ip 没有索引 2.当用insert into t_asset(id,ip) values(?,?),(?,?) 1200多条记录时,发现竟然用了3 ...

  8. Proteus中包含的传感器类型（Transducers）

    1. 传感器列表 2. 部分传感器的测量电路 (1)光照传感器,搭采样电阻,测电压输出. (2)距离传感器,带采样电阻,测电压输出. (3)粉尘传感器,测PWM脉宽 其余传感器多为总线类型的传感器,各 ...

  9. java基础第一节课随笔

    第一题:1.定义一个HelloWold类2.在类中定义主方法3.在主方法中使用输出语句在dos控制台打印HelloWorld 打印结果如:HelloWorld4.在案例中使用当行注释.多行注释添加相关 ...

  10. SpringBoot(1)-新手入门（详细教程+理解）

    前话:很多人刚学java没多久就开始学springboot,毕竟springboot屏蔽了很多框架的配置,导致搭建一个项目变得比以前简单很多.但建议还是先把基础的框架都熟悉一遍,再用springboo ...