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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
理解JS绑定事件
Jan 19 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
js下载文件并修改文件名
May 08 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Python读写unicode文件的方法
2015/07/10 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
详解Python 解压缩文件
2019/04/09 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python制作朋友圈九宫格图片
2019/11/03 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
企业业务员岗位职责
2014/03/14 职场文书
企业党员公开承诺书
2014/03/26 职场文书
中介业务员岗位职责
2014/04/09 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
旷课检讨书
2015/01/26 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL