纯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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
浅谈js原生拖放
Nov 21 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
vue实现记事本功能
Jun 26 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
python:socket传输大文件示例
2017/01/18 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
高中打架检讨书
2014/02/13 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
高中学校对照检查材料
2014/08/31 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
结婚幸福感言
2015/08/01 职场文书
Python入门之基础语法详解
2021/05/11 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript