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时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS getRandomValues和Math.random方法深入解析
这篇文章主要为大家介绍了JS getRandomValues和Math.random方法深入详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
表格头固定而列可滚动的效果...2007-11-11
这篇文章主要为大家详细介绍了微信小程序日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了JS实现鼠标点击箭头旋转180度的效果,通过点击三角按钮旋转180度,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-02-02
下面小编就为大家分享一篇JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
箭头函数是和我们工作密切相关的东西，本文主要介绍了js中什么时候不能使用箭头函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
这篇文章主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下2017-02-02
本文给大家分享web 中 DropDownList绑定数据源的几种方式以及DropdownList控件动态绑定数据源的两种方法，下面通过本文给大家详细介绍，感兴趣的朋友一起看看2016-12-12
这篇文章主要为大家详细介绍了JavaScript实现三级联动菜单实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍了原生js实现可拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论