纯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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
JS实现一个简单的日历
Feb 22 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
JS实现网页时钟特效
Mar 25 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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 SQLite类
2009/05/07 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
简单了解python反射机制的一些知识
2019/07/13 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
2014年教研组工作总结
2014/11/26 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
暂住证明怎么写
2015/06/19 职场文书
电工生产实习心得体会
2016/01/22 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android