利用JavaScript写一个简单的在线秒表

最新推荐文章于 2023-10-28 10:42:18 发布

小凡全栈

最新推荐文章于 2023-10-28 10:42:18 发布

阅读量384

点赞数 2

分类专栏：学习笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/bs3412/article/details/117958636

版权

学习笔记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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>";
		}

效果图如下：

做个学习笔记，方便日后忘了好回来找找感觉。

小凡全栈

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用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"> <ti
复制链接

扫一扫