纯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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
jQuery实现元素的插入
Feb 27 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP header函数分析详解
2011/08/06 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
javascript 闭包详解
2015/07/02 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
房屋登记授权委托书范本
2014/10/09 职场文书
实习单位推荐信
2015/03/27 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL