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
Sep 24 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
vue实现文件上传读取及下载功能
Nov 17 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命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
javascript基础知识
2016/06/07 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python面向对象法实现图书管理系统
2019/04/19 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
全球性的女装店:storets
2019/06/12 全球购物
就业协议书范本
2014/10/08 职场文书
天坛导游词
2015/02/02 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
带你学习MySQL执行计划
2021/05/31 MySQL
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle