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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
Javascript 面向对象之重载
May 04 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Jquery $when done then的用法详解
May 20 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 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获取汉字拼音首字母的方法
2015/10/21 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Python自动生产表情包
2017/03/17 Python
python 同时运行多个程序的实例
2019/01/07 Python
python实现XML解析的方法解析
2019/11/16 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
经济管理专业自荐信
2013/12/30 职场文书
运动会表扬稿大全
2014/01/16 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2015年幼师工作总结
2015/04/28 职场文书
统招统分证明
2015/06/23 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL