html中加入计时器,javascript怎么做计时器?
计时器,在生活当中也是用得频繁的功能,比如锻炼身体,跑步比赛等等相关的活动。我们用Javascript来完成一个计时器。
计时器,主要就是对时间的一个逻辑处理,比如60秒等于1分钟,60分钟等于一个小时。我们这里只做到小时的处理。就这么一个简单的逻辑,然后动态的显示在一个Input里面。
JavaScript实现计时器:
那现在我们来完成这个界面计时:
暂停
重新开始
给标签元素一个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");
}
这样就完成了计时的功能.效果如下
html中加入计时器,javascript怎么做计时器?相关推荐
- html5script计时器,javascript实现秒表计时器的制作方法
本文实例为大家分享了js秒表计时器的制作代码,供大家参考,具体内容如下 具体代码: Document div{margin-top:40px;margin-left:25px;margin-botto ...
- JavaScript实现网页计时器(有完整代码)
文章目录 一.如何实现倒计时的功能? 效果图 项目思路 二.完整代码 一.如何实现倒计时的功能? 效果图 项目思路 先搭建好如下的框架.其中<input type="text" ...
- javascript毫秒计时器_JavaScript分秒倒计时器实现方法
本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下 ...
- android listview中item倒计时,GitHub - TangAnna/ListViewTimer: 列表中每一个item都有计时器 (可实现倒计时或者计时器的功能)...
ListViewTimer 列表中每一个item都有计时器 (可实现倒计时或者计时器的功能) 项目中有时会遇到列表中含有倒计时或者是计时器的需求,实现的方式有很多种,此Demo中是使用Thread + ...
- 如何在另一个JavaScript文件中包含一个JavaScript文件?
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼 而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
- 在CRM定制中常用的Javascript
CRM Client Programming Tips 前段时间一直在做CRM4.0的相关开发,其中大多数都是在做Customization和工作流,其实CRM的开发本来大多都是Customizati ...
- 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码_转载...
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- javascript java html_JS入门篇(二):在html中如何使用Javascript
原标题:JS入门篇(二):在html中如何使用Javascript (1)java的使用 HTML 中的脚本必须位于 <> 与 > 标签之间.脚本可被放置在 HTML 页面的 和 部 ...
- JavaScript能做什么 单行注释 多行注释
JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除 ...
最新文章
- 【BZOJ3527】【ZJOI2014】力
- w ndows10应用商店游,来了,微软Win10应用商店开发者95%分成开始生效
- WEB服务在单点登录系统中的应用研究
- 在SAP CRM呼叫中心的搜索结果点击Edit按钮后的处理逻辑
- python小甲鱼练习题答案_小甲鱼Python第 013讲元组:戴上了枷锁的列表 | 课后测试题及参考答案...
- Navicat连接mysql8.0.1版本出现1251--Client
- jQuery.Autocomplete 自动完成
- SecureCRT用证书方式登录
- Docker 安装 SQL Server教程
- Spring Data Jpa使用@Query时 报错Validation failed for query for method public abstract
- macOS升级到Big Sur之后Goland提示找不到svn命令
- kux播放器android,kux格式转换工具
- JavaScript的加密混淆技术
- VS2015重装Team explorer报错
- 稀疏矩阵(三元组顺序表存储)6种操作的实现
- multisim中轻触开关在哪_轻触开关和自锁开关的主要区别在哪里?
- 【单片机】单片机课程设计(测温打铃)附完整代码和电路图
- 一些用于聚类和分类问题的数据集
- android studio安装成功界面,Android studio安装与配置
- [欧拉回路] Jzoj P1319 邮递员