用JavaScript在网页上显示时间，并可暂停和开始

最新推荐文章于 2023-10-23 23:15:43 发布
原创 最新推荐文章于 2023-10-23 23:15:43 发布 · 2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css #h5

本文介绍了一个使用HTML和JavaScript实现的实时更新的时钟代码。该时钟能够显示当前的日期和时间，并通过按钮控制其开始与暂停。适用于前端开发者学习实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <script type="text/javascript">
        function shijian(){
        var myclock = new Date();
        var year = myclock.getFullYear();
        var mon = myclock.getMonth()+1;
        var day = myclock.getDate();
        var HH = myclock.getHours();
        var mm = myclock.getMinutes();
        var ss = myclock.getSeconds();
        document.getElementById("shi").innerHTML=year+"年"+mon+"月"+day+"日"+"&nbsp;&nbsp;"+HH+":"+mm+":"+ss;

        }
        var myclock1 = setInterval("shijian()",1000);
        function stops(){
            clearInterval(myclock1);

        }
        function strat(){
            myclock1 = setInterval("shijian()",1000);
        }
    </script>
</head>
<body onload="shijian()">
<div id="shi"></div>
<input type="button" value="开始" onclick="strat();" style="width: 100px" >
<input type="button" value="暂停" onclick="stops();" style="width: 100px" >
</body>
</html>


页面显示如下

网页活大屏展示的倒计时器，可设置倒计时时间、暂停、继续、重置、带音效
05-12
1、可展示在网页和大屏。 2、可设置倒计时时间、暂停、继续、重置、带音效
js实现在页面实时显示时间，一个按钮控制时间暂停和开始
qq_44108469的博客
03-17 9458
js实现在html实时显示时间，一个按钮控制时间暂停和开始.代码如下： &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;style&amp;gt; #ma
JavaScript将系统时间渲染在页面当中，并且让页面的时间可以暂停，重新开始前进
Lou__Lan的博客
10-27 739
【代码】JavaScript将系统时间渲染在页面当中，并且让页面的时间可以暂停，重新开始前进。
JS中内置的日期类Date，显示系统时间、停止系统时间
m0_53881899的博客
09-01 584
JS中内置的日期类Date，显示系统时间、停止系统时间
Javascript中暂停功能(sleep)的实现
方健的博客
09-24 5899
  "javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也可以作为一个对象使用。 比如： function Test(){ alert("hellow"); 
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
10-15
为了在网页上显示秒表，我们选取了一个`<div>`元素，并在其中显示时间。同时，我们为开始、暂停、继续和重置按钮分配了`<button>`元素，并分别赋予相应的点击事件处理函数。 开始按钮的点击事件触发`setTimeStr()`...
利用 JavaScript 的 Date 对象获取当前时间，在网页上展示实时数字时钟的源码
01-09
通过JavaScript的Date对象，我们可以轻松获取系统当前的时间，并利用JavaScript编程逻辑，在网页上动态展示一个实时更新的数字时钟。在实现这一功能的过程中，我们将涉及到JavaScript中与时间操作相关的方法与属性，...
javascript计算用户打开网页的停留时间
12-02
JavaScript是一种广泛应用于网页开发的脚本语言，它允许在客户端执行动态交互，...总的来说，这段JavaScript代码提供了一个简单的方法来估算用户在特定网页上的停留时间，对于理解用户行为和页面性能有一定的参考价值。
JavaScript暂停和继续定时器的实现方法.doc
最新发布
07-16
虽然JavaScript本身没有提供暂停和继续定时器的直接方法，但通过合理运用`setInterval`和`clearInterval`结合变量控制，我们可以在网页应用中实现类似的效果。这些技术的合理运用，对于提升网页交互体验和执行复杂...
使用JavaScript和HTML表单按钮实现当前时间的开始和暂停
yusuhbdybxbdhj的博客
07-04 1166
首先写三个input表单元素，分别为输入框、开始按钮、暂停按钮，并为其赋予一个id属性。
使用javaScript或jquery实现页面时钟走动效果(包含秒表计时), 和系统时间同步
04-03
使用简单的十行左右代码就可以实现html页面计时效果, 同系统时间同步, 并带有秒表实时走动效果哦,感谢大家的支持
javascript如何实现暂停功能
11-25
本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下： Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也可以作为一个对象使用。 比如： 　　function Test(){ 　　 alert("hellow"); 　　 this.NextStep=function(){ 　　 alert("NextStep"); 　　 } 　　} 我们可以这样调用 var myTest=new Test();myTest.NextStep(); 
JavaScript暂停和继续定时器的实现方法
12-10
对于JavaScript的定时器来说没有严格意义上的暂停和重启，只有清除停止，但是可以通过一些‘障眼法’实现 allChild[index].onclick = function(){//当点击目标且满足下面的条件时 让计时器时间暂停 if(gamInt == true){ $("#tu").css("display","block"); //计时器暂停（清除定时器） clearInterval(countdownTimer); //延迟2s后游戏继续 计时器暂停结束 setTimeout(function(){ // 移除所有的图片 removeImgFun(); $("#tu").cs
时间开始与暂停
weixin_57766703的博客
03-08 450
1.这是一个显示时间的案例，首先创建一个html，div附上类名，再包含一个span标签，设置一个id名 2.设置第二个div，里面包含两个button标签附上id名，这里设置的是开始和暂停的按钮 3.新建css，将html里的内容样式化，分别给它们设置背景颜色以及按钮颜色，宽高大小，位置等，如下图： 4.接着是js的动态效果，对应html的id名进行设置，第一个id名为空值，然后下面进行布尔类型的逻辑判断，true表示真，false表示假...
Javascript中暂停功能的实现
hyw520110的专栏
10-24 185
&lt;script language="javascript"&gt; /*Javascript中暂停功能的实现 Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也可以作为一个对象使用。 比如： function Test(){ alert("hellow"); th...
JavaScript显示时间自动走动
Willow_Spring的博客
06-16 849
<body> <a href="#" id="time"></a> <button>停止</button> <!-- <script> var time1 = window.setInterval('timeShow()', 1000); timeShow(); function timeShow() {
JavaScript实现程序暂停（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-23 444
JavaScript实现程序暂停（附完整源码）
JavaScript实现暂停程序（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-23 428
JavaScript实现暂停程序（附完整源码）
JavaScript实现显示时间，暂停时间，和取消显示时间
小小鱼儿小小林的博客
09-26 3542
//显示时间函数 var id;//设置该id主要是为了之后的暂停和取消显示时间用到clearInterval(这里传id); function showTime(){ var divOne=document.getElementById("one"); var d=new Date(); var timStr=d.getFullYear()+"-"+(d.getMonth()+1
JavaScript实现网页秒表功能：开始、暂停、继续、重置
本资源提供了一种使用JavaScript在网页上实现秒表功能的方法，包括开始、暂停、继续和重置等基本操作。示例代码详细展示了如何通过HTML、CSS和JavaScript构建一个简单的秒表界面，并通过JavaScript实现计时逻辑。 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值