纯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 相关文章推荐
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
vue-router的钩子函数用法实例分析
Oct 26 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php显示页码分页类的封装
2017/06/08 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
PHP7 list() 函数修改
2021/03/09 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
动态创建类实例代码
2009/10/07 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python 忽略文件名编码的方法
2020/08/01 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
家长学校工作方案
2014/05/07 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
公司租车协议书
2015/01/29 职场文书
市场督导岗位职责
2015/04/10 职场文书