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 相关文章推荐
js日期对象兼容性的处理方法
Jan 28 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
Angularjs过滤器使用详解
May 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
react-router实现按需加载
May 09 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 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
PHP 采集心得技巧
2009/05/15 PHP
php抓取https的内容的代码
2010/04/06 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
javascript实现留言板功能
2020/02/08 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
利用python实现AR教程
2019/11/20 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
会计求职自荐信
2014/06/20 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
MySQL注入基础练习
2021/05/30 MySQL