javascript实现动态时钟的启动和停止-偶像资源网

javascript实现动态时钟的启动和停止，点击开始按钮，获取当前时间，点击停止按钮，时间停止

<!DOCTYPE html>
<html>
 <head>
  <meta charset=\"UTF-8\">
  <title>动态时钟的启动和停止</title>
 </head>
 <body background=\"img/2.jpg\" style=\"background-repeat: no-repeat;margin-left: 180px;\">
 <!--1.显示当前时间
  2.启动秒表
  3.停止时钟
 -->
 <h1>动态时钟</h1>
 <p>
  当前时间：<span id=\"clock\" style=\"color: #FF0000;\"/> </span>
 </p>
 <p>
 <input type=\"button\" value=\"start\" onclick=\"start()\" style=\"color: #FF0000;\"/>
 <input type=\"button\" value=\"stop\" onclick=\"stop()\" style=\"color: #FF0000;\"/>
 </p>
 </body>
 <script type=\"text/javascript\">
  var timer;
  function start(){
   //设置定时器（方法的实现，毫秒数）
    timer=setInterval(function(){
    var now=new Date();
    var time=now.toLocaleTimeString();
    var c=document.getElementById(\"clock\");
    c.innerHTML=time;
   },1000);
  }
  function stop(){
   //暂停 清楚定时器
   clearInterval(timer);
  }
 </script>
</html>

效果截图：

javascript实现动态时钟的启动和停止

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

javascript实现动态时钟的启动和停止

请登录后发表评论