<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

<span id="time1"></span>

<br>

<button id="aStop">第一个停</button><button id="aBegain">第一个开</button>

<br>

<br>

<br>

<div id="time2"></div><button id="bStop">第二个停</button><button id="bBegain">第二个开</button>

</body>

<script type="text/javascript">

function Time(option){

    this.father = document.getElementById(option.father);

    this.allTime = option.allTime || 0;

    this.hours = option.hours || 0;

    this.strH =  option.strH || "时";

    this.mins = option.mins || 0;

    this.strM =  option.strM || "分";

    this.seconds = option.seconds || 0;

    this.strS =  option.strS || "秒";

    this.htmlV = null;

    this.t = null;

    this.timeStr = null;

    this.init();

}

Time.prototype = {

    init:function(){

        this.mune();

        this.setI();

    },

    mune:function(){

        if(this.allTime != 0){

            this.hours = Math.floor(this.allTime / (60*60));

            this.mins = Math.floor(this.allTime / 60);

            this.seconds = this.allTime % 60;

        }

    },

    setI:function(){

        var self = this;

        this.t = setInterval(function(){

            self.father.innerHTML = self.hours +self.strH + self.mins+self.strM + self.seconds +self.strS;

            self.allTime = self.hours*60*60 + self.mins *60 +self.seconds;

            if(self.allTime == 0){

                clearInterval(self.t);

                self.father.innerHTML = "时间已经过期"

                return;

            }

            --self.seconds;

            if(self.seconds < 0){

                self.seconds = 59;

                --self.mins;

                if(self.mins < 0){

                    self.mins = 59;

                    --self.hours

                    if(self.hours == 0){

                        self.hours = 0;

                    }

                }

            }

            if(self.allTime == 0){

                clearInterval(self.t);

                self.father.innerHTML = "计时结束";

            }

        },1000)

    }

}

window.onload = function(){

    var a = null; //全局变量

    a = new Time({

        father:"time1",

        allTime:153,

    })

    var time = null; //保存当前停止的时间\

    var stop = false;

    document.getElementById("aStop").onclick = function(){

        clearInterval(a.t);

        stop = true;

        console.log(a.allTime) //停止时，所剩的总秒数

        time = a.allTime;

    }

    document.getElementById("aBegain").onclick = function(){

        console.log(stop)

        if(!stop){   //判断当前倒计时是否停止，如果没停止则不执行

            return;

        }

        if(a.allTime <= 0){

            return;

        }

        a = new Time({   //重新给启动定时器

            father:"time1",

            allTime:time,

        })

        stop = false;

    }

    /*------------a----f分割线-----b---------------*/

    var b = null;

    b = new Time({

        father:"time2",

        hours:1,       //尽量传总秒数

        mins:0,

        seconds:2,

    })

    var bTime = null;

    var Bstop = false;

    document.getElementById("bStop").onclick = function(){

        clearInterval(b.t)

        Bstop = true;

        bTime = b.allTime;

    }

    document.getElementById("bBegain").onclick = function(){

        if(!Bstop){

            return;

        }

        if(a.allTime <= 0){

            return;

        }

        b = new Time({   //重新给启动定时器

            father:"time2",

            allTime:bTime,

        })

        Bstop = false;

    }

}

</script>

</html>

js 定时器的更多相关文章

  1. js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  2. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

  3. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  4. js定时器setInterval()与setTimeout()

    js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...

  5. C#-WebForm JS定时器

    JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...

  6. Vue清除所有JS定时器

    Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...

  7. js定时器关闭，js定时器停止，一次关闭所有正在运行的定时器，自定义函数clearIntervals()一次关闭所有正在运行的定时器

    js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器 附上页面的截图,代码在截图 ...

  8. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  9. JS 定时器的4种写法及介绍

    JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...

  10. js定时器 离开当前页面任然执行的问题

    今天在博客上看到有人问 js定时器-----离开当前页面原本匀速运动的div加速了,回到页面若干时间恢复匀速??? 他是js定时器控制一个盒子做旋转动画 离开页面后js还在执行 但是盒子这个dom却被 ...

随机推荐

  1. 【Jquery】$.Deferred 对象

    源:http://www.ruanyifeng.com/      deferred三个状态 “已完成”“未完成”“已失败”     (1) $.Deferred() 生成一个deferred对象.  ...

  2. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  3. hdu3415 单调队列

    Max Sum of Max-K-sub-sequence Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  4. thinkphp __PUBLIC__的定义 __ROOT__等常量的定义

    2 3 4 5 6 7 8 9 '__TMPL__'      =>  APP_TMPL_PATH,  // 项目模板目录 '__ROOT__'      =>  __ROOT__,    ...

  5. for循环嵌套执行效率

    今天做项目时遇到一个for循环的嵌套问题,一个循环次数多,一个次数少,怎样设计效率较高. 想起以前笔试时遇到过这个问题,当时由于时间仓促,没有细想,今天在实际代码中遇到这么问题,于是动笔算了下. 设两 ...

  6. Android开发常见问题小结

    1.布局文件 自己写的布局文件无得使用 原因:导入了系统的R文件 修改:将android.R 这句注释 或者删除 2.Activity作为主窗口设置 Activity无法启动,或者要设置Activit ...

  7. a版本冲刺第九天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 着手编辑测试文档,了解测试工具 编写测试用例集 ...

  8. COGS14. [网络流24题] 搭配飞行员

    [问题描述]     飞行大队有若干个来自各地的驾驶员,专门驾驶一种型号的飞机,这种飞机每架有两个驾驶员,需一个正驾驶员和一个副驾驶员.由于种种原因,例如相互配合的问题,有些驾驶员不能在同一架飞机上飞 ...

  9. RabbitMQ简介

    AMQP简介 在了解RabbitMQ之前,首先要了解AMQP协议.AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消 ...

  10. C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性

    http://blog.sina.com.cn/s/blog_621e24e20101cp64.html 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可 ...