JavaScript编写开发动态时钟


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了JavaScript编写开发动态时钟的具体代码,供大家参考,具体内容如下

效果图:

JavaScript编写开发动态时钟

JavaScript编写开发动态时钟

实质上就是调用时间库,再添加一个颜色数组,给显示的时间嵌套一个div盒子,再将颜色数组的颜色设置随机变化,这样就使得时间变化的时候颜色也会发生变化。

完整源代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>网页时钟</title>
 <style>
 
 </style>
 </head>
 <style>
 
 .center{
  background: url(img/shizhong.jpg) no-repeat center;
   font-size: 50px;
   height: 600px;
   line-height: 620px;
   text-align: center;
 }
 </style>
 <body>
 <div class="center" id = "spanTip"></div>
 </body>
 <script>
 //格式化时间 给前面加个0;
 function addZero(num){ return num < 10? '0' + num : num; } 
 function genDate(){
 var date = new Date();
 //获取时间
 var dateStr =addZero(date.getHours()) +":"+addZero(date.getMinutes())+":"+addZero(date.getSeconds());
 var spanTip = document.getElementById("spanTip");
 spanTip.innerHTML = dateStr;
 //颜色数组
 var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon']; //钟表颜色数组
  var radom = Math.floor(Math.random() * color.length ); //随机数
  spanTip.style.color = color[radom]; //设置随机颜色
 }
 window.setInterval("genDate()",1000);
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
js编写简易的计算器
Jul 29 #Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 #Javascript
You might like
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php函数式编程简单示例
2019/08/08 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
python怎么提高计算速度
2020/06/11 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
简短大学毕业感言
2014/01/18 职场文书
综合实践教学反思
2014/01/31 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
检讨书范文2000字
2015/01/28 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python