利用JavaScript写一个简单的在线秒表
Posted 小凡全栈日记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用JavaScript写一个简单的在线秒表相关的知识，希望对你有一定的参考价值。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box
text-align: center;
margin: 12% auto;
.tabbox
height: 16em;
width: 18em;
margin: 0 auto;
border: 1px solid #7cd1f9;
border-radius: 5px;
</style>
</head>
<body>
<div class="box">
<span id="time">00时00分00秒</span>
<br><br>
<button id="startjs">开始</button>
<button id="stopjs">暂停</button>
<button id="clearjs">清零</button>
<button id="tabjs">标记</button>
<br><br>
<!-- 标记框 -->
<div class="tabbox">
<span id="alltab"></span>
</div>
</div>
</body>
</html>
javascript代码如下：
var h = 0;
var m = 0;
var s = 0;
var jsh = 0;
var jsm = 0;
var jss = 0;
var jsq = null;
document.getElementById( "stopjs" ).disabled = true;//禁用暂停按钮
function clear()
jsh = 0;
jsm = 0;
jss = 0;
if ( jsh < 10 )
h = "0" + jsh;
if ( jsm < 10 )
m = "0" + jsm;
if ( jss < 10 )
s = "0" + jss;
function run()
jss++;
if ( jss >= 60 )
jsm++;
jss = 0;
if ( jsm >= 60 )
jsh++;
jsm = 0;
//时分秒换算
if ( jsh < 10 )
h = "0" + jsh;
else
h = jsh;
if ( jsm < 10 )
m = "0" + jsm;
else
m = jsm;
if ( jss < 10 )
s = "0" + jss;
else
s = jss;
//小于10补0
document.getElementById( "time" ).innerHTML = h + "时" + m + "分" + s + "秒";
startjs.onclick = function ()
clear();//调用清零函数
document.getElementById( "startjs" ).disabled = true;//禁用开始按钮
document.getElementById( "stopjs" ).disabled = false;//启用暂停按钮
jsq = setInterval( run, 1000 );
stopjs.onclick = function ()
document.getElementById( "startjs" ).disabled = false;//启用开始按钮
clearInterval( jsq );
clearjs.onclick = function ()
clear();//调用清零函数
document.getElementById( "startjs" ).disabled = false;//启用开始按钮
clearInterval( jsq );
document.getElementById( "time" ).innerHTML = "00时" + "00分" + "00秒";
document.getElementById( "alltab" ).innerHTML = null;//清空标记
tabjs.onclick = function ()
var tab = document.getElementById( "time" ).innerHTML;
document.getElementById( "alltab" ).innerHTML += tab + "<br>";
效果图如下：
做个学习笔记，方便日后忘了好回来找找感觉。
以上是关于利用JavaScript写一个简单的在线秒表的主要内容，如果未能解决你的问题，请参考以下文章