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 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
谈一谈收音机的高放电路
2021/03/02 无线电
php分页示例分享
2014/04/30 PHP
yii操作cookie实例简介
2014/07/09 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python上下文管理器和with块详解
2017/09/09 Python
机器学习python实战之决策树
2017/11/01 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
创意广告词
2014/03/17 职场文书
节水标语大全
2014/06/11 职场文书
擅自离岗检讨书
2014/09/12 职场文书
期末考试复习计划
2015/01/19 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL