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读取本地Excel文件内容的代码示例
Apr 08 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
vue一步步实现alert功能
Jul 05 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 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加密解密函数(动态加密)
2013/06/19 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
2014年社区庆元旦活动方案
2014/03/08 职场文书
学习经验演讲稿
2014/05/10 职场文书
人事任命书格式
2014/06/05 职场文书
药店促销活动总结
2014/07/10 职场文书
免职通知
2015/04/23 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python