纯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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
javascript 数组的方法集合
Jun 05 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php4的彩蛋
2006/10/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python hashlib加密实现代码
2019/10/17 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
方正Java笔试题
2014/07/03 面试题
学校出纳员岗位职责
2014/03/18 职场文书
大学生活自我评价
2014/04/09 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
sql注入教程之类型以及提交注入
2021/08/02 MySQL
JVM之方法返回地址详解
2022/02/28 Java/Android
详解PyTorch模型保存与加载
2022/04/28 Python