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实现的跟随鼠标移动的时钟效果(中英文日期显示)
中文日期限制 "; 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
-
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实现简单的时钟实例代码
复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
-
一个简易时钟效果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
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
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网页时钟
//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
-
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
-
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
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
随机推荐
- php调用dll的实例操作动画与代码分享
- Lua中rawset和rawget的作用浅析
- Python实现的十进制小数与二进制小数相互转换功能
- golang实现通过smtp发送电子邮件的方法
- 详解Python3操作Mongodb简明易懂教程
- Hyper-V 与 VMware比较哪个好用
- PHP中使用php5-ffmpeg撷取视频图片实例
- php和editplus正则表达式去除空白行
- python通过apply使用元祖和列表调用函数实例
- ASP开发准则是什么
- 解析Mysql多表查询的实现
- 解析SQL 表结构信息查询 含主外键、自增长
- php 日期时间处理函数小结
- 209个透明flash背景以及使用方法详解
- Android获取应用程序大小和缓存的实例代码
- Tunnel的具体配置
- Python排序搜索基本算法之归并排序实例分析
- Python通过matplotlib画双层饼图及环形图简单示例
- vue.js开发实现全局调用的MessageBox组件实例代码
- PHP性能分析工具xhprof的安装使用与注意事项
其他
- CloudStack 创建主存储失败解决方案
- security 登录互踢
- python中print提示gbk
- \u0000为什么显示乱码
- subplot绘图出现标题和xlaabel重叠的问题
- idea 导入项目转成maven结构
- vue实现分页表格数据懒加载
- python怎样把for循环计算的数值生成列表
- python跨平台使用吗
- .net core mvc 配置开发环境和发布环境
- ttkbootstrap 使用自己的主题
- LambdaQueryWrapper 实现逻辑
- vmware和docker冲突
- log4j xml自定义异常写到一个文件
- linux 用户虚拟内存参数设置
- vue在线预览pdf
- windows上传到A服务器的图片 怎么备份到B服务器
- kms 服务器 端口号
- js正则不允许输入数字
- 小程序适配iphone底部