纯JavaScript实现实时反馈系统时间


Posted in Javascript onOctober 26, 2017

用javascript反馈系统时间

运用知识

JavaScript HTML DOM

HTML DOM 中的setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法setInterval(code,milliseconds)

code——代码(可以为函数)

milliseconds——在此调用的时间(毫秒)

因此,我们想让反馈的系统时间动起来,只需要让方法没隔1000毫秒调用一次就可以使显示的时间像闹钟一样动起来。

setInterval(function(){myTimer()},1000)

new Date()//获得当前时间
.toLocaleTimeString()//根据本地时间把Date对象的时间部分转换为字符串
.getElementById("clock")//返回带有指定 ID 的元素
.innerHTML=c; //将c返回给指定元素

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="clock"></div>
</body>
<script>
  var a = setInterval(function(){myTimer()},1000);
  function myTimer(){
    var b = new Date();
    var c = b.toLocaleTimeString();
    document.getElementById("clock").innerHTML=c;
  }
</script>
</html>

总结

以上所述是小编给大家介绍的纯JavaScript实现实时反馈系统时间,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 #Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 #Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 #Javascript
js 只比较时间大小的实例
Oct 26 #Javascript
基于Require.js使用方法(总结)
Oct 26 #Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
You might like
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
告诉大家什么是JSON
2008/06/10 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python解释器spython使用及原理解析
2019/08/24 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
道歉信怎么写
2015/05/12 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS