javascript实现简易数码时钟


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了javascript实现简易数码时钟的具体代码,供大家参考,具体内容如下

通过这个小例子复习一下Date对象的基本使用.
还可以用Date对象做定时器,计时器等等.

效果如图:

javascript实现简易数码时钟

可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字,则定时切换图片即可.

HTML代码:

<div id="clock">
 <p></p>
 <p></p>
 <p></p>
</div>

CSS代码:

*{margin:0;padding:0;}
 #clock{width:300px;height:150px;position: relative;margin:50px auto;background: #eeeeee;cursor: default;}
 #clock p{margin-top:5px;width:300px;height: 40px;text-align: center;
 font:italic bold 36px/40px arial,sans-serif;letter-spacing: 3px;color:blueviolet;}

JS代码:

window.onload = function ()
 {
 var oDiv = document.getElementById('clock');
 var aP = oDiv.getElementsByTagName('p');
 setInterval(clock,1000);
 function clock()
 {
 var oDate = new Date(); //创建日期对象
 var date = oDate.getFullYear()+'-'+ convert(oDate.getMonth()+1) +'-'+ convert(oDate.getDate());
 var time = convert(oDate.getHours()) +':'+convert(oDate.getMinutes()) + ':' +convert(oDate.getSeconds());
 aP[0].innerHTML = date;
 aP[1].innerHTML = time;
 aP[2].innerHTML = '星期' + convertWeek(oDate.getDay());
 }
 clock(); //加载完页面后立刻执行一次,不用等1秒后才显示
 };

 //把一位数字转换为两位字符串,补0
 function convert(num)
 {
 return num < 9?'0'+num:''+num;
 }
 //把week转换为中文
 function convertWeek(num)
 {
 return num==0?'日':num==1?'一':num==2?'二':num==3?'三':num==4?'四':num==5?'五':'六';
 }

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
可以文本显示的公告栏的js代码
Mar 11 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 #Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 #Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 #Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 #Javascript
JS中FormData类实现文件上传
Mar 27 #Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 #Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
JS实现骰子3D旋转效果
2019/10/24 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Python Socket传输文件示例
2017/01/16 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
会计专业求职信范文
2014/03/16 职场文书
演讲主持词
2014/03/18 职场文书
应聘英语教师求职信
2014/04/24 职场文书
学生保证书范文
2014/04/28 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
社区服务理念口号
2015/12/25 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers