脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js时钟定时器

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • echarts安装与配置

    echarts安装与配置

    这篇文章介绍了echarts安装与配置的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 深入理解requireJS-实现一个简单的模块加载器

    深入理解requireJS-实现一个简单的模块加载器

    本篇文章主要介绍了深入理解requireJS-实现一个简单的模块加载器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JS 页面计时器示例代码

    JS 页面计时器示例代码

    计时器效果想必大家都见到过吧，其实使用js可以很轻松的实现，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-10-10
  • js实现简单翻牌小游戏

    js实现简单翻牌小游戏

    这篇文章主要为大家详细介绍了js实现简单翻牌小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发之数据存储 参数传递 数据缓存

    本文主要介绍了微信小程序开发之数据存储、参数传递、数据缓存的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • js实现瀑布流触底动态加载数据

    js实现瀑布流触底动态加载数据

    这篇文章主要为大家详细介绍了js实现瀑布流触底动态加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 如何实现动态删除javascript函数

    如何实现动态删除javascript函数

    如何实现动态删除javascript函数...
    2007-05-05
  • Js检查变量类型的代码()

    Js检查变量类型的代码()

    本文章为你提供一款js 返回变量的类型代码哦，如果你不懂得如何获取js变量的类型的话，看看我们下面的代码你就知道如何获取js变量的代码哦。
    2010-07-07
  • JS中实现replaceAll的方法(实例代码)

    JS中实现replaceAll的方法(实例代码)

    本文是对JS中实现replaceAll的方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • js拖动div 当鼠标移动时整个div也相应的移动

    js拖动div 当鼠标移动时整个div也相应的移动

    要拖动的div为最外层的div，这段代码对显示对话框的头部绑定鼠标监听事件，当鼠标移动时，整个div也相应的移动，具体的实现如下，感兴趣的朋友可以参考下
    2013-11-11

最新评论