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 相关文章推荐
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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 zend解密软件绿色版测试可用
2008/04/14 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python统计分析模块statistics用法示例
2019/09/06 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
30岁生日感言
2014/01/25 职场文书
教学器材管理制度
2014/01/26 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
篮球比赛口号
2014/06/10 职场文书
药店促销活动策划方案
2014/08/24 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
师德承诺书2015
2015/04/28 职场文书
银行资信证明
2015/06/17 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python