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 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
百度地图api如何使用
Aug 03 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
jquery实现数字输入框
Feb 22 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
详解微信小程序缓存--缓存时效性
May 02 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 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产生动态的影像图
2006/10/09 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python中endswith()函数的基本使用
2015/04/07 Python
手把手教你python实现SVM算法
2017/12/27 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
解释一下钝化(Swap out)
2016/12/26 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
学生处主任岗位职责
2013/12/01 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
我是特种兵观后感
2015/06/11 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
python画条形图的具体代码
2022/04/20 Python