利用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写一个简单的在线秒表的主要内容，如果未能解决你的问题，请参考以下文章