纯JavaScript实现实时反馈系统时间
用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实现实时反馈系统时间,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
6种javascript显示当前系统时间代码
第一种:javascript显示当前系统时间代码 2015年12月1日 12:05:08 星期二 <div id="jnkc"> </div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> 第二种:javascri
-
基于JS代码实现实时显示系统时间
1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个
-
javascript 显示当前系统时间代码
1.在<head></head>中加入下列代码 复制代码 代码如下: <script language=JavaScript> var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false;} function startclock () { stopclock(); sho
-
js显示当前系统时间的代码
js获取当前系统时间 复制代码 代码如下: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate
-
jsp实现页面实时显示当前系统时间的方法
JS代码 复制代码 代码如下: <script language="javascript"> function realSysTime(clock){ var now=new Date(); //创建Date对象 var year=now.getFullYear(); //获取年份 var month=now.getMonth(); //获取月份 var date=now.getDate(); //获取日期 var day=now.getDay(); //获取星期 var
-
android+json+php+mysql实现用户反馈功能方法解析
相信每个项目都会有用户反馈建议等功能,这个实现的方法很多,下面是我实现的方法,供大家交流.首先看具体界面,三个字段.名字,邮箱为选填,可以为空,建议不能为空.如有需要可以给我留言. 下面贴出布局代码,这里用到一个<include layout="@layout/uphead">就是把另外一个布局文件引入到这个布局中. 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> &l
-
基于javascript实现动态显示当前系统时间
本文实例讲解了javascript实现动态显示当前系统时间的详细代码,具体内容如下 (1)时间日期信息,应该在一个<div>中来显示 (2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout() (3)时钟显示的时机(事件):当网页加载完成后才显示,事件onload (4)如何将 时间日期信息 写入到指定的<div>中,DOM对象中的innerHTML属性 效果图: 具体代码: <html> <head> <meta http-e
-
纯JavaScript实现实时反馈系统时间
用javascript反馈系统时间 运用知识 JavaScript HTML DOM HTML DOM 中的setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法setInterval(code,milliseconds) code--代码(可以为函数) milliseconds--在此调用的时间(毫秒) 因此,我们想让反馈的系统时间动起
-
JavaScript实现实时更新系统时间的实例代码
一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()
-
JavaScript页面实时显示当前时间实例代码
前言 这次认认真真又重新看了相关内容,现把需要注意的地方总结如下: 1.通过getDay()得到的星期数是从0开始,0表示星期天,之后从1~6依次表示星期一到星期六: 2.得到日期需使用getDate()而不是getDay() ,因为可能习惯性地认为日期就是天数,可能会使用getDay() ,但其实getDay()是用于得到星期数的: 3.通过getMonth()得到月份,从0开始计数,所以需要再加1. 实例代码如下: <html> <head> <title><
-
ASP.NET网站实时显示时间的方法
本文实例讲述了ASP.NET网站实时显示时间的方法.分享给大家供大家参考.具体方法如下: 在ASP.NET环境中开发设计网站或网络应用程序时,往往需要实时显示当前日期和时间.这时,通常使用AJAX控件来实现. 需要注意的是,在.NET Framework 2.0版本中,工具箱中是没有AJAX Extensions控件的.而.NET Framework 3.5版本中集成了AJAX. ASP.NET AJAX包括三部分: ①一个扩展客户端JavaScript功能的客户端库或框架: ②一个允许ASP.
-
纯javascript版日历控件
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo
-
纯javascript实现的小游戏《Flappy Pig》实例
本文实例讲述了纯javascript实现的小游戏<Flappy Pig>.分享给大家供大家参考.具体如下: Flappy Pig,是Pig,使用原生javascript写的网页版"Flappy Bird".我也奇了个怪为什么搞这个东西出来,而且还花了一天宝贵的周末,但是既然写出来,就拿出来和大家分享一下. option.js如下: /** * 原生javascript实现的<Flappy Pig>v0.1.0 * =======================
-
纯javascript制作日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met
-
纯javaScript、jQuery实现个性化图片轮播【推荐】
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position:relative 会导致自身位置的相对变化,而不会影响其他元素的位置.大小的变化.使得使用了position:absolute 元素相对于画布位置进行定位: absolute元素脱离了文档结构,产生破坏性,导致父元素坍塌,float元素也会脱离文档结构,absolute元素会悬浮在页面上方,遮挡其他部分显示,
-
纯javascript模仿微信打飞机小游戏
七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示 源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov
-
纯javascript响应式树形菜单效果
简要教程 aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件.该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标.它的特点有: 可以创建一个基本的树结构并渲染它. 可以实时添加和删除树节点. 可以显示不同的树节点图标. 在树节点打开和关闭的时候可以自定义事件. 每个树节点上都可以制作右键上下文菜单. 使用方法 使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件. <
随机推荐
- 浅谈iOS中三种生成随机数方法
- 深入array multisort排序原理的详解
- perl特殊符号及默认的内部变量
- SQLSERVER 2005的ROW_NUMBER、RANK、DENSE_RANK的用法
- jquery给图片添加鼠标经过时的边框效果
- 全新感受Oracle 9i
- PHP实现的博客欢迎提示功能(很特别哦)
- 浅谈ASP数据库下载漏洞
- Highcharts+NodeJS搭建数据可视化平台示例
- 捕捉并保存ASP运行错误的函数代码
- 关于vi和vim的区别及命令详解
- JAVA通过XPath解析XML性能比较详解
- linux中配置pptp服务器配置的方法
- 实现dedecms图集单击图片翻页的功能
- java读取word-excel-ppt文件代码
- 原生AJAX写法实例分析
- Android中你可能不知道的Fragment妙用
- android图库播放幻灯片时按power键灭屏再亮屏显示keyguard
- Python matplotlib 画图窗口显示到gui或者控制台的实例
- 易语言时钟如何用?易语言时钟用法