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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
extjs fckeditor集成代码
May 10 Javascript
jquery JSON的解析方式
Jul 25 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
js正则相关知识点专题
May 10 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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 str_pad 函数使用详解
2009/01/13 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python插件机制实现详解
2020/05/04 Python
Pandas之缺失数据的实现
2021/01/06 Python
linux面试题参考答案(3)
2012/09/13 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技