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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php计算十二星座的函数代码
2012/08/21 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python中生成器和yield语句的用法详解
2015/04/17 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
在python中做正态性检验示例
2019/12/09 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
啤酒节策划方案
2014/05/28 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
酒店开业主持词
2015/07/02 职场文书
公司人力资源管理制度
2015/08/05 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL