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 相关文章推荐
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
如何解决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基础知识:类与对象(1)
2006/12/13 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
摘自启点的main.js
2008/04/20 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python实现邮件发送功能
2019/08/10 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
pandas apply多线程实现代码
2020/08/17 Python
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
2015年爱牙日活动总结
2015/02/05 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript