javascript实现动态时钟的启动和停止
更新时间：2020年07月29日 08:19:34 作者：Of_the
这篇文章主要为大家详细介绍了javascript实现动态时钟的启动和停止文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现动态时钟的启动和停止，点击开始按钮，获取当前时间，点击停止按钮，时间停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟的启动和停止</title>
</head>
<body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;">
<!--1.显示当前时间
2.启动秒表
3.停止时钟
-->
<h1>动态时钟</h1>
<p>
当前时间：<span id="clock" style="color: #FF0000;"/> </span>
</p>
<p>
<input type="button" value="start" onclick="start()" style="color: #FF0000;"/>
<input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/>
</p>
</body>
<script type="text/javascript">
var timer;
function start(){
//设置定时器（方法的实现，毫秒数）
timer=setInterval(function(){
var now=new Date();
var time=now.toLocaleTimeString();
var c=document.getElementById("clock");
c.innerHTML=time;
},1000);
}
function stop(){
//暂停 清楚定时器
clearInterval(timer);
}
</script>
</html>
效果截图：
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ES6 新增的创建数组的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
自定义滚动条最早是IE玩出来的,但是后来,不知道为什么IE把这个有意思的功能废弃了,下面这篇文章主要给大家介绍了关于前端实现浏览器自定义滚动条写法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
在淘宝等购物网站，我们都会看到一个发送短信倒计时的按钮，究竟是如何实现的呢？下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时，需要的朋友参考下2015-12-12
这篇文章主要介绍了如何解决FusionCharts联动的中文乱码问题。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文介绍了根据Json串生成Html的一种方式（只是简单实现了文本框，密码框，下拉框）感兴趣的朋友可以了解下2013-01-01
这篇文章给大家分享一个利用javascript实现3D六边形拖拽翻转的效果实例，实现后的效果很赞，对大家的学习Javascript具有一定的参考借鉴价值，有需要的朋友们一起去来看看吧。2016-09-09
本文主要介绍了原生js实现吸顶效果的示例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了JS实现盒子拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
昨天同事问我一个问题：“有一个JSON对象，其中有若干个子对象，如何遍历这个对象中的子对象？”2009-07-07
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。2010-05-05
最新评论