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实现滑块滑动改变值的实现代码
Apr 12 Javascript
javascript操作css属性
Dec 30 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
Angular实现form自动布局
2016/01/28 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python 常见的排序算法实现汇总
2020/08/21 Python
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
英语道歉信范文
2014/01/09 职场文书
电台编导求职信
2014/05/06 职场文书
建筑管理专业求职信
2014/07/28 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
鲁迅故居导游词
2015/02/05 职场文书
四风之害观后感
2015/06/09 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2019银行竞聘书
2019/06/21 职场文书