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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php while循环控制的简单实例
2016/05/30 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
开发Vue树形组件的示例代码
2017/12/21 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python抽象类的新写法
2015/06/18 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
EJB的基本架构
2016/09/22 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
大学生求职自荐信
2013/12/12 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
职工运动会感言
2014/02/07 职场文书
迎新晚会主持词
2014/03/24 职场文书
小学开学标语
2014/07/01 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
56句经典英文座右铭
2019/08/09 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python