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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
js 数组 fill() 填充方法
Nov 02 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中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
年度考核自我评价
2014/01/25 职场文书
护理不良事件检讨书
2014/02/06 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
安全先进个人材料
2014/12/29 职场文书
趣味运动会赞词
2015/07/22 职场文书
办公室规章制度范本
2015/08/04 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android