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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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 中执行系统外部命令
2006/10/09 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Numpy之文件存取的示例代码
2018/08/03 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python之指数与E记法的区别详解
2019/11/21 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
如何进行Linux分区优化
2016/09/13 面试题
气象学专业个人求职信
2014/03/15 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2019毕业论文致谢词
2019/06/24 职场文书