JavaScript原生秒表、计时器

可以开始、暂停、清除。

效果图:

 

下面贴代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <script>
        var hour,minute,second;//时 分 秒
        hour=minute=second=0;//初始化
        var millisecond=0;//毫秒
        var int;
        function Reset()//重置
        {
            window.clearInterval(int);
            millisecond=hour=minute=second=0;
            document.getElementById('timetext').value='00时00分00秒000毫秒';
        }
 
        function start()//开始
        {
            int=setInterval(timer,50);
        }
 
        function timer()//计时
        {
            millisecond=millisecond+50;
            if(millisecond>=1000)
            {
                millisecond=0;
                second=second+1;
            }
            if(second>=60)
            {
                second=0;
                minute=minute+1;
            }
 
            if(minute>=60)
            {
                minute=0;
                hour=hour+1;
            }
            document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
 
        }
 
        function stop()//暂停
        {
            window.clearInterval(int);
        }
    </script>
</head>
<body>
<div style="text-align: center">
    <input type="text" id="timetext" value="00时00分00秒" readonly><br>
    <button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>

  

作者:晓晨Master(李志强)

出处:https://www.cnblogs.com/stulzq/p/4872887.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   晓晨Master  阅读(7389)  评论(3编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示