纯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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js清空form表单中的内容示例
May 20 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 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 正则表达式的学习探讨
2013/06/06 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP7常量数组用法分析
2016/09/26 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
RequireJs的使用详解
2017/02/19 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
webpack分离css单独打包的方法
2018/06/12 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python中url标签使用知识点总结
2020/01/16 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
详解python程序中的多任务
2020/09/16 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
幼师自荐信
2013/10/26 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
表彰大会新闻稿
2015/07/17 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL