JS实现秒表

最新推荐文章于 2024-04-24 18:14:24 发布

2241431065

最新推荐文章于 2024-04-24 18:14:24 发布

阅读量464

点赞数 1

分类专栏： Java Web 文章标签： java

本文链接：https://blog.csdn.net/qq_40748967/article/details/119917452

版权

Java Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="zn">

<head>

　　<meta charset="UTF-8">

　　<title>秒表</title>

　　<style>
        .contain{
            width: 200px;
            height: 50px;
            background: #000;
            border-radius: 20px;
            font-weight: bold;
            color: #0f0;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
        }
　　</style>
</head>
<body>
<div class="contain">
    <span id="Interval">10:38:00</span>
</div>  <button id='pause'>暂停</button>  
<button id='action'>开始</button>

　　<script>

　　　　//获取日期对象
　　　　function getDate(){

　　　　　　dobj=new Date();
　　　　　　hour = dobj.getHours();　　//时
　　　　　　minute=dobj.getMinutes();  //分
　　　　　　second = dobj.getSeconds();//秒
　　　　　　str=hour+":"+minute+":"+second;
　　　　　　dsq=document.getElementById("Interval");//获取id Interval
　　　　　　dsq.innerHTML=str;
　　}

　　　　//未点击按钮前，先执行一次
　　　　getDate();
　　　　start();

　　　　//开始函数

　　　　function start(){

　　　　　　sobj=setInterval(getDate,1000);　　//设置定时器，一秒钟执行一次getDate()
　　　　}

　　　　//停止函数

　　　　function stop(){　　

　　　　　　clearInterval(sobj);　　//清除定时器
　　　　}

　　　　//关闭按钮
　　　　c = document.getElementById("pause");
　　　　c.onclick=function(){

　　　　　　stop();
　　　　}
　　　　//开始按钮
　　　　action = document.getElementById("action");
　　　　action.onclick=function(){

　　　　　　start();
　　　　}
　　</script>
</body>

</html>

2241431065

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现秒表

<!DOCTYPE html><html lang="zn"><head>　　<meta charset="UTF-8">　　<title>秒表</title>　　<style> .contain{ width: 200px; height: 50px; background: #000; b.
复制链接

扫一扫

专栏目录