纯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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
详解vue-router基本使用
Apr 18 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
vue安装遇到的5个报错及解决方法
Jun 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP面向对象精要总结
2014/11/07 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
js验证表单第二部分
2006/11/25 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
在django view中给form传入参数的例子
2019/07/19 Python
python list转置和前后反转的例子
2019/08/26 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
golang生成并解析JSON
2022/04/14 Golang