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 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
vue实现单选和多选功能
Aug 11 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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微信支付通知的处理方式
2014/05/25 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python获取array中指定元素的示例
2019/11/26 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
大学总结自我鉴定
2014/01/18 职场文书
初中生自我评价
2014/02/01 职场文书
大学学习计划书范文
2014/05/02 职场文书
环保建议书100字
2014/05/14 职场文书
合作协议书格式
2014/08/19 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
个人向公司借款协议书
2014/10/09 职场文书
工作失职自我检讨书
2015/05/05 职场文书
超市员工辞职信范文
2015/05/12 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP