用js做一个简单的秒表计时器

具体代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#out {margin: 0 auto;width: 500px;border: 1px solid blueviolet;text-align: center;padding-bottom: 20px}</style>
</head><body><div id="out"><h1 id="content">00:00:000</h1><button id="start">开始</button><button id="division">分割</button><button id="reset">重置</button></div>
</body>
<script>var content = document.getElementById("content");var totalTime = 0;var timer;function showTime() {var min;var second;var msecond;second = Math.floor((totalTime / 1000) % 60);min = Math.floor(totalTime / 1000 / 60 % 60);msecond = totalTime % 1000;second = second % 60 < 10 ? "0" + second : second;min = min % 60 < 10 ? +"0" + min : min;msecond = msecond < 100 ? "0" + msecond : msecond;return min + ":" + second + ":" + msecond;}var start = document.getElementById("start");start.onclick = function (e) {if (e.target.innerHTML == "开始") {e.target.innerHTML = "暂停";timer = setInterval(function () {totalTime += 41;content.innerHTML = showTime();}, 41)} else if (e.target.innerHTML == "暂停") {e.target.innerHTML = "开始";console.log("输出打印" + timer);clearInterval(timer);timer = null;return}}var division = document.getElementById("division");division.onclick = function (e) {var h2 = document.createElement("h2");h2.innerHTML = showTime();out.appendChild(h2);}var reset = document.getElementById("reset");reset.onclick = function (e) {//将分割的时间都清除//返回值是一个类数组var divTime = document.getElementsByTagName("h2");for (var i = 0; i < divTime.length; i++) {out.removeChild(divTime[0]);i--;}clearInterval(timer);timer = null;//总时间变成零totalTime = 0;content.innerHTML = showTime();//暂停按钮  都变成开始按钮start.innerHTML = "开始";}</script></html>

运行界面

第一个

点击开始按钮之后的界面
可以无限分割做秒表计时器

第一篇有什么不足请指出谢谢！！！

用js做一个简单的秒表计时器相关推荐

用Three.js做一个简单的3D场景
Three.js是什么 Three.js 是一款运行在浏览器中的 3D 引擎,我们可以用它来创造我们所需要的一系列3D动画场景,简而言之就是建在网页上的3D模型.利用Three.js可以制作出很多酷炫 ...
用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
原生js做一个简单的仿幻灯片放映
目录效果: 源代码: 案例中闭包小问题: 效果: 源代码: <!DOCTYPE html> <html lang="en"> <head>&l ...
用js做一个简单的论坛发布
效果如图 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
js 写一个简单的时间计时器
<body οnlοad="startTime()"><div id="txt" ></div><script> ...
用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦做一个简单的图表为了做一个简单的图表,我们还 ...
教你用JS手写简单的秒表（精确到10ms，没有延迟）
制作秒表的思路如下: 1.首先定出功能以及界面. 我的目的是做最简单的秒表,因此只需要开始.结束以及清零的功能.界面如下图所示: 未开始运行: 运行中: 2.构思实现的方式. 首先,核心方法肯定是 ...

用js做一个简单的秒表计时器

用js做一个简单的秒表计时器

运行界面

用js做一个简单的秒表计时器相关推荐

最新文章

热门文章