js实现时钟定时器


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了js实现时钟定时器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>时钟</title>
 <script type="text/javascript">
 function showClock(){
 // 1. 获取当前时间
 var time = new Date();
 // document.write(time);
 var year = time.getFullYear();
 // document.write(year);
 var month = time.getMonth() + 1;
 // document.write(month);
 
 var day = time.getDate();
 // var day1 = time.getDay();
 // document.write(day1);
 
 var hours = time.getHours();
 // document.write(hours);
 
 var minutes = time.getMinutes();
 // document.write(minutes);
 
 var seconds = time.getSeconds();
 
 
 document.getElementById("clock").innerHTML = year+"-"+month+"-"+day+" "
 +hours+":"+minutes+":"+seconds;
 
 }
 
 var flag = true;
 var id;
 function runClock(){
 var btn = document.getElementById("btn");
 
 if(flag){
  // 计时操作
  id = setInterval("showClock()",1000);
  flag = false;
  btn.innerHTML = "停止";
 }else{
  // 停止计时操作
  clearInterval(id);
  flag = true;
  btn.innerHTML = "动起来";
 }  
 
 }

 
 </script>
 </head>
 <body>
 <button οnclick="showClock()">点击显示时钟</button>
 <div id="clock">
 
 </div>
 <button id="btn" οnclick="runClock()">动起来</button>
 </body>
</html>

js实现时钟定时器

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

Javascript 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 #Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 #Javascript
js实现带箭头的进度流程
Mar 26 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php字符串截取问题
2006/11/28 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
第三篇Bootstrap网格基础
2016/06/21 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
React组件refs的使用详解
2018/02/09 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
django 外键model的互相读取方法
2018/12/15 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
学校安全责任书范本
2014/07/23 职场文书
村级个人对照检查材料
2014/08/22 职场文书
安全施工责任书
2014/08/25 职场文书
离婚协议书格式
2015/01/26 职场文书
辞职书格式样本
2015/02/26 职场文书
个人德育工作总结
2015/03/05 职场文书
表扬信格式模板
2015/05/05 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python