纯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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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编程每天必学之验证码
2016/03/03 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python实现接口并发测试脚本
2019/06/25 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
毕业生文员求职信
2013/11/03 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
会计电算化专业求职信
2014/06/10 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android