javascript实现计时器的简单方法

 更新时间:2021年06月22日 09:12:51   投稿:lijiao  
这篇文章主要为大家详细介绍了javascript实现计时器的简单方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器.

计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面.

那现在我们来完成这个界面

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

给标签元素一个ID是为了获取其中的标签, 然后加入了两个点击事件, 计数器的暂停, 和重新开始事件.

首先我们来完成开始计时的处理, 开始计时主要还是是用了setInterval的方法, 其中每隔1秒执行一次方法, 这样我们就可以对时间做处理, 就像开头所说60秒等于1分钟..., 所以这里就需要用判断来处理, 最后就将其中的得到的秒,分,时显示到输入框里.

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

 var str_sec = n_sec;
 var str_min = n_min;
 var str_hour = n_hour;
 if ( n_sec < 10) {
  str_sec = "0" + n_sec;
 }
 if ( n_min < 10 ) {
  str_min = "0" + n_min;
 }

 if ( n_hour < 10 ) {
  str_hour = "0" + n_hour;
 }

 var time = str_hour + ":" + str_min + ":" + str_sec;
 ele_timer.value = time;
 n_sec++;
 if (n_sec > 59){
  n_sec = 0;
  n_min++;
 }
 if (n_min > 59) {
  n_sec = 0;
  n_hour++;
 }


 }, 1000);
}

var n_timer = timer();

我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.
用户点击了暂停, 计时器就停止计时, 用户继续点击这个按钮, 计时器继续计时. 所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.

//暂停和继续
function pause(self) {
 var state = self.getAttribute("state");
 if (state === "on") {
  clearInterval(n_timer);
  self.textContent = "继续";
  self.setAttribute("state", "off");
 } else {
  n_timer = timer();
  self.textContent = "暂停";
  self.setAttribute("state", "on");
 }
}

最后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清0, 然后改变暂停按钮初始状态.

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

这样就完成了计时的功能.效果如下

希望本文所述对大家学习javascript程序设计有所帮助。

相关文章

  • 根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    为了减少客户的在页面的输入,做了这个效果,他可以根据用户输入的身份证号输出籍贯、出身日期、性别的相关信息,需要的朋友可以参考下
    2013-11-11
  • 使用layer弹窗提交表单时判断表单是否输入为空的例子

    使用layer弹窗提交表单时判断表单是否输入为空的例子

    今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序通过点击事件传参(data-)的操作示例

    微信小程序通过点击事件传参(data-)的操作示例

    微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧
    2023-12-12
  • 详解Bootstrap插件

    详解Bootstrap插件

    这篇文章主要为大家针对Bootstrap插件的相关资料进行了详细介绍,Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript高级程序设计 客户端存储学习笔记

    JavaScript高级程序设计 客户端存储学习笔记

    JavaScript高级程序设计 客户端存储学习笔记,在客户端用于存储会话信息
    2011-09-09
  • bootstrap table实现横向合并与纵向合并

    bootstrap table实现横向合并与纵向合并

    这篇文章主要为大家详细介绍了bootstrap table实现横向合并与纵向合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • javascript 数组使用方法汇总

    javascript 数组使用方法汇总

    由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素 可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了.
    2009-12-12
  • 微信小程序用户授权,以及判断登录是否过期的方法

    微信小程序用户授权,以及判断登录是否过期的方法

    这篇文章主要介绍了微信小程序用户授权及判断登录是否过期,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript表单验证大全

    javascript表单验证大全

    JavaScript是用来在数据被传输到服务前对html表单中输入的数据进行验证,使用javascript对用户输入的信息进行验证是项目必须的,下面小编给大家整理一些比较常用的javascript表单验证,需要的朋友可以参考下
    2015-08-08
  • JavaScript实现ASC转汉字及汉字转ASC的方法

    JavaScript实现ASC转汉字及汉字转ASC的方法

    这篇文章主要介绍了JavaScript实现ASC转汉字及汉字转ASC的方法,涉及JavaScript编码转换的相关技巧,需要的朋友可以参考下
    2016-01-01

最新评论