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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
JS面向对象编程浅析
Aug 28 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
如何解决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通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js判断是否是手机页面
2017/03/17 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
动态密码技术
2012/10/18 面试题
小班幼儿评语大全
2014/04/30 职场文书
地质灾害防治方案
2014/05/14 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS