编程 Javascript

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实现时钟定时器

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

js实现时钟定时器

- Author -

JackieDYH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用JavaScript实现Java的List功能(实例讲解)

Nov 07 Javascript

选择复选框按钮置灰否则按钮可用

May 22 Javascript

javascript 小数取整简单实现方式

May 30 Javascript

JavaScript使用focus()设置焦点失败的解决方法

Sep 03 Javascript

jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

Jan 29 Javascript

浅谈JavaScript 函数参数传递到底是值传递还是引用传递

Aug 23 Javascript

js中document.referrer实现移动端返回上一页

Feb 22 Javascript

JavaScript中的普通函数和箭头函数的区别和用法详解

Mar 21 Javascript

详解vue.js 开发环境搭建最简单攻略

Jun 12 Javascript

详解如何让InstantClick兼容MathJax、百度统计等

Sep 12 Javascript

Bootstrap-table自定义可编辑每页显示记录数

Sep 07 Javascript

微信小程序仿抖音视频之整屏上下切换功能的实现代码

May 24 Javascript

如何解决vue在ios微信"复制链接"功能问题

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