纯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 相关文章推荐
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript实现日期按月份加减
May 15 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用vscode快速建立vue模板过程详解
Oct 10 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/08 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
详解React 条件渲染
2020/07/08 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
物理教学随笔感言
2014/02/22 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
中秋联欢会主持词
2015/07/04 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python