js实现一个简单的数字时钟效果
效果图:
代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8"> // 定义一个函数用以显示当前时间 function displayTime() { var elt = document.getElementById("clock"); // 通过id= "clock"找到元素 var now = new Date(); // 得到当前时间 elt.innerHTML = now.toLocaleTimeString(); //让elt来显示它 setTimeout(displayTime,1000); //在1秒后再次执行 } window.onload = displayTime; //当onload事件发生时开始显示时间 </script> <style type="text/css" media="all"> #clock { font: bold 24pt sans; background: #ddf; padding: 10px; border: 2px solid black; border-radius: 10px; } </style> </head> <body> <h1>一个简单的数字时钟</h1> <span id="clock"></span> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
超级可爱纯js网页时钟
//oObj input requires that a matrix filter be applied. //deg input defines the requested angle of rotation. var deg2radians = Math.PI * 2 / 360; function MatrixFilter(obj) { if(!obj.filters)return; //alert(obj.filters.item(0)); var Matrix; for(p in o
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
-
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
中文日期限制 "; props2=""; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i '+props2+D
-
JavaScript实现简单的时钟实例代码
复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
-
js实现倒计时时钟的示例代码
如下所示: 复制代码 代码如下: <!--将以下代码加入HTML的<Body></Body>之间--> <SCRIPT language=JavaScript1.2>function setcountdown(theyear,themonth,theday){yr=theyear;mo=themonth;da=theday}setcountdown(2008,7,12)var occasion="2008北京奥运会"var message
-
一个简易时钟效果js实现代码
本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi
-
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
-
js实现简单的秒表走动的时钟特效
本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
随机推荐
- Java中正则表达式的使用和详解(下)
- python版简单工厂模式
- thinkPHP js文件中U方法不被解析问题的解决方法
- php过滤XSS攻击的函数
- 开启CURL扩展,让服务器支持PHP curl函数(远程采集)
- JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法
- 用JSP/ASP创建WAP应用
- SQLServer 跨库查询实现方法
- sql 截取域名的问题
- URLConnection发送HTTP请求的方法_动力节点Java学院整理
- Java项目开发命名规范(动力节点Java学院整理)
- 实时计算知多少?
- BootStrap栅格系统、表单样式与按钮样式源码解析
- DevExpress实现自定义GridControl中按钮文字内容的方法
- Android编程获取网络连接方式及判断手机卡所属运营商的方法
- 谈谈python中GUI的选择
- Django项目之Elasticsearch搜索引擎的实例
- Android应用架构思想分析
- Python3实现的字典、列表和json对象互转功能示例
- opencv3/C++轮廓的提取与筛选方式