JS实现秒表

最新推荐文章于 2024-04-24 18:14:24 发布
最新推荐文章于 2024-04-24 18:14:24 发布
阅读量464 收藏 1
点赞数 1
分类专栏： Java Web 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40748967/article/details/119917452
版权 
<!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
    评论
专栏目录
操作元素之修改样式属性
leechoy
06-12 633
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
用JS实现一个秒表功能
wang_swa99er的博客
08-20 699
用JS实现一个秒表功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
web前端：利用js实现随机点名和秒表计数器
最新发布
2301_76862126的博客
04-24 214
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。提示：采用定时器及定义计数器变量完成，定时器间隔为1s。3.样式请参考css及html自由发挥完成。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
js秒表制作
weixin_45000814的博客
03-29 321
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
js实现计时器秒表功能
王世凡的技术博客
11-01 520
本文实例为大家分享了js实现计时器秒表功能的具体代码，供大家参考，具体内容如下。
js制作简易秒表效果详细讲解、开始、暂停与结束（定时器制作和时间戳制作）
Cat_LIKE_Mouse的博客
09-03 1427
首先，css和html <section> <div class="minute"></div> <div class="second"></div> <div class="mill"></div> </section> <button class="start">开始</button> <butto
JavaScript实现秒表
10-12
接下来，我们编写JavaScript代码来实现秒表功能。在`秒表.js`文件中，我们将定义一个`Stopwatch`类，包含初始化、计时、暂停、继续和重置的方法。 ```javascript class Stopwatch { constructor() { this....
js实现秒表计时器
12-13
本文实例为大家分享了js实现秒表计时器的具体代码，供大家参考，具体内容如下 秒表计时器的实现： 效果图如下： 附代码，已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
Javascript实现秒表计时游戏
11-20
本文实例为大家分享了javascript实现秒表计时游戏的具体代码，供大家参考，具体内容如下 一、说明 本游戏页面设计分为左右两栏。左上为跑马灯，左下为计时器和”START”按钮；右上为排行榜，右下为游戏规则说明。 ...
Javascript实现秒表倒计时功能
12-29
本文实例为大家分享了js实现秒表倒计时的具体代码，供大家参考，具体内容如下 效果图： 代码： <html> <body> <span id=clock xss=removed>00:30:00:00 [removed] var oclock=document....
JS 秒表
珎珎啊
04-01 187
<body> <div>00:00:00:00</div> <button>开始</button> <button disabled>暂停</button> <button disabled>继续</button> <button disable...
js实现简单的秒表
10-15
主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript设计简单的秒表计时器
11-24
本文实例讲述了javascript设计简单的秒表计时器的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0" name="txt1"/> <input type="button" value="开始" name="btnStart"/> <input type="button" value="重置" name="btnRese
js计时器(开始计时、停止计时、重置)
02-20
计时器的实现，有开始计时、停止计时、重置功能。
秒表JS
03-04
秒表JS
JS实现计时器/秒表功能
qq_41927979的博客
10-05 1341
系统学习JS时的一个小练习 直接上代码吧，注释写得还算详细，就不赘述了，很简单的一个练习。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
使用js做一个简单的秒表计时
becauseof_11的博客
08-16 4375
我们平时登录网页也许会遇到不久之后网页会自动提示您开启了多久这样的界面，那么这就关系到秒表计算的问题了，我们来看看简单秒表是如何做成的，下面来分析一下实现秒表的过程： 首先第一步肯定是分别获取时分秒 第二步就是将它们都置0  第三步就是运用计时器，即setInterval(function(),num)这个函数,里面的num就是你希望执行的速度了 过程解释清楚了，那么具体代码是如何实现的呢
Js实现简单的秒表
进击的葱
12-17 5835
描述： 实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停， 点击暂停暂停计时，点击复位回到最初始状态。 效果： 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
用原生js制作一个简单的秒表
nn_nn_n的博客
09-03 232
html <div id="box"> <div id=count> <span id="h">00</span>: <span id="m">00</span>: <span id="s">00</span> </div> <input id...
用JavaScript实现电子秒表计时器
04-21
好的，可以使用JavaScript实现电子秒表计时器。以下是示例代码： ```html <!DOCTYPE html> 秒表计时器 秒表计时器 <p id="timer">00:00:00:000 ()">开始 ()">停止 ()">复位 var startTime, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值