javascript实现动态时钟的启动和停止


Posted in Javascript onJuly 29, 2020

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时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
一个很不错的PHP翻页类
2009/06/01 PHP
10 个经典PHP函数
2013/10/17 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python实现杨辉三角思路
2017/07/14 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python提取log文件内容并画出图表
2019/07/08 Python
python实现的汉诺塔算法示例
2019/10/23 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
利用python汇总统计多张Excel
2020/09/22 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
接口可以包含哪些成员
2012/09/30 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
统计工作个人总结
2015/03/03 职场文书
文艺晚会开场白
2015/05/29 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL