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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js获取图片宽高的方法
Nov 25 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
vue实现分页的三种效果
Jun 23 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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中如何调用用户自定义函数
2013/08/06 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
this关键字的含义
2015/04/08 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
python在package下继续嵌套一个package
2022/04/14 Python