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中==与===操作符的比较
Mar 21 Javascript
JavaScript 常用函数
Dec 30 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
ES6数组与对象的解构赋值详解
Jun 14 Javascript
vue实现拖拽效果
Dec 23 Javascript
微信小程序选择图片控件
Jan 19 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学习笔记(一) 简单了解PHP
2014/08/04 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python安装第三方库的3种方法
2015/06/21 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
详解Python爬虫的基本写法
2016/01/08 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
2014年师德承诺书
2014/05/23 职场文书
学习与创新自我评价
2015/03/09 职场文书
九年级历史教学反思
2016/02/19 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP