html网页制作秒表原理,JavaScript怎么实现简单的秒表效果?(代码示例)
JavaScript怎么实现简单的秒表效果?下面本篇文章给大家通过代码示例介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
描述:
实现一个简单的秒表,点击启动按钮时开始计时,随后启动按钮变为暂停,
点击暂停暂停计时,点击复位回到最初始状态。
效果:
代码:
Title
#showTime
{
width: 300px;
height: 60px;
font-size: 60px;
line-height: 60px;
}
00:00:00
启动
复位
//——————
var time,showTime,startBn,restBn,pauseDate;
//布尔开关
var bool=false;
//暂停的累计时间
var pauseTime=0;
init();
function init() {
showTime=document.getElementById("showTime");
startBn=document.getElementById("startBn");
restBn=document.getElementById("restBn");
startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
restBn.addEventListener("click",clickHandler);//复位按钮
setInterval(animation,16);
}
//转化时间函数
function animation() {
if(!bool) return;
//前时间减去上次开启时间减去暂停累计时间
var times=new Date().getTime()-time-pauseTime;
var minutes=Math.floor(times/60000);//毫秒转化为分钟
var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟
将time减去分钟 除去1000得出 秒
var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
showTime.innerHTML=
(minutes<10 ? "0" +minutes : minutes)+":"
+(seconds<10 ? "0"+seconds :seconds)+":"
+(ms<10 ? "0"+ms : ms);
}
//点击时的事件
function clickHandler(e) {
e= e || window.event;
if(this===startBn){
bool=!bool;
if(bool){
this.innerHTML="暂停";
//如果我们上一次暂停时间是空,表示没有暂停过,因此,直接返回0
//如果上次的暂停时间是有值得,用当前毫秒数减去上次的毫秒数,这样就会得到暂停时间
pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
if(time) return;
time=new Date().getTime();
return;//是为bool判断跳出
}
this.innerHTML="启动";
pauseDate=new Date().getTime();
return;//是为this是否等于startBn判断跳出
}
startBn.innerHTML="启动";
pauseTime=0;
pauseDate=null;
bool=false;
time=0;
showTime.innerHTML="00:00:00";
}
更多web前端开发知识,请查阅 HTML中文网 !!
html网页制作秒表原理,JavaScript怎么实现简单的秒表效果?(代码示例)相关推荐
- 炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
- HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的表白网页吧 尽管没有深情的告白, ...
- 用JavaScript防PS里的羽化效果代码
代码简介: JavaScript圆形虚幻效果,跟PS里面的羽化效果有点像. 代码内容: View Code < html > < head > < meta http- ...
- liveplayer免费网页直播|点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器,使用简单,功能强大, 终身免费使用 支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; ...
- 大学生影视主题网页制作 HTML+CSS+JavaScript (你好,李焕英 5页)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | ...
- 大一学生Web课程设计 红酒美食主题网页制作(HTML+CSS+JavaScript)
Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | ...
- 大二学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐 美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 ...
- 大一学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)-咖啡 6页
源码获取 文末联系 Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐 美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐 ...
- 大二学生JavaScript实训大作业——动漫秦时明月7页 期末网页制作 HTML+CSS+JavaScript 网页设计实例 企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
最新文章
- IIS设置404页面图文教程(选择URL还是文件 )
- PHP初级学习之PHP文件
- python全栈开发_day52_html模板继承和静态配置
- mysql同一台服务器上不同数据库中个别表内容同步
- mysql乐观锁与事务_Mysql中的读锁,写锁,乐观锁及事务隔离级别和并发问题
- 学习笔记之C / C++
- 干货收藏!史上最强 Tomcat 8 性能优化来啦!| 原力计划
- angularjs姓名转拼音js
- java和是10的10次方的素数,10的11次方之内相邻两素数的最大差值
- 什么?小白也可以拥有PLS回归系数(Beta系数图)!
- 计算机导论第七章数据库基础,计算机导论教学大纲
- linux bind日志级别,Bind日志配置。
- 苹果电脑怎么更换计算机模式,图文详解苹果电脑如何切换成windows系统
- html+canvas+输入文字换行,canvas文字换行
- 瑞萨单片机-硬件I2C从设备
- Gohead学习笔记
- 这些城市都有哪些互联网公司?一文全知道!
- 强烈推荐使用Atom-新安装后的有用设置
- springboot入门视频教程百度网盘下载
- Android中回传数据
热门文章
- SRPG游戏开发(十)第五章 颜色映射与职业动画 - 二 颜色组(Color Chart)
- 如何获取一段HTML源码
- python3-正则表达式基本使用方法(附案例)
- 未来的工作都被计算机代替,未来计算机或机器人会替代人类的工作吗?为什么?_科技数码通...
- 美洽入选2022年度四川省专精特新中小企业和成都市企业技术中心
- JMeter接口测试文档
- BGP联邦和团体的配置
- lisp提取长方形坐标_坐标提取lisp程序
- 【AI浅谈】AI算法,用尽可能简单的话讲懂AI的原理【1】
- 【游戏测试】用 python 写个自动拉取手机或模拟器游戏 log 到本地的工具