纯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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
js回调函数仿360开机
Dec 26 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
英文自我鉴定
2013/12/10 职场文书
校园创业策划书
2014/01/14 职场文书
情况说明书格式范文
2014/05/06 职场文书
投标保密承诺书
2014/05/19 职场文书
五一活动标语
2014/06/30 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
2015年领班工作总结
2015/04/29 职场文书
教师远程培训心得体会
2016/01/09 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android