js实现时钟定时器

 更新时间:2020年03月26日 14:10:33   作者:JackieDYH  
这篇文章主要为大家详细介绍了js实现时钟定时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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幻想 读取二进制文件

    JS幻想 读取二进制文件

    如果说让JavaScript读取站点上一文本文件,那不过是个再简单不了的事了;但若说要换成一个二进制的文件,并且是完全静态的读取,那似乎有点天方夜谭了。
    2009-04-04
  • 在服务端(Page.Write)调用自定义的JS方法详解

    在服务端(Page.Write)调用自定义的JS方法详解

    自从[javascript]自定义MessageBox一文发布以后,很多网友都来信询问,如何在服务端调用ShowInfo方法,周末休息想了个折中的办法来实现
    2013-08-08
  • JavaScript使用AutoDecimal解决运算精度问题

    JavaScript使用AutoDecimal解决运算精度问题

    这篇文章主要介绍了 JavaScript 运算中的精度问题及解决方案 AutoDecimal,指出 JavaScript 处理浮点数运算常出现精度问题,现有解决方案存在不足,为了解决这一问题,AutoDecimal 应运而生,本文给大家介绍了JavaScript使用AutoDecimal解决运算精度问题
    2024-12-12
  • 使弱类型的语言JavaScript变强势

    使弱类型的语言JavaScript变强势

    Javascript (ECMA Script)是一种弱类型的语言.这并不意味着它没有数据类型,只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值.Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用.
    2009-06-06
  • 微信小程序开发WXML模板语法基础教程

    微信小程序开发WXML模板语法基础教程

    这篇文章主要介绍了微信小程序模板语法,WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Bootstrap多级导航栏(级联导航)的实现代码

    Bootstrap多级导航栏(级联导航)的实现代码

    这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下
    2016-03-03
  • 一些在TypeScript上费过时间的地方总结

    一些在TypeScript上费过时间的地方总结

    这篇文章主要给大家介绍了关于一些在ts上费过时间的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-11-11
  • js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    这篇文章主要介绍了js与jquery正则验证电子邮箱、手机号、邮政编码的方法,涉及javascript与jQuery鼠标事件的响应与正则验证操作字符串的相关技巧,需要的朋友可以参考下
    2016-07-07
  • 对layui中的onevent 和event的使用详解

    对layui中的onevent 和event的使用详解

    今天小编就为大家分享一篇对layui中的onevent 和event的使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中遍历的十种方法总结

    JavaScript中遍历的十种方法总结

    这篇文章主要给大家介绍了关于JavaScript中遍历的十种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论