HTML
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>数码时钟</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box {

            margin: 30px auto;

            padding: 10px;

            width: 393px;

            background: #000;

        }

        #box span {

            display: inline-block;

            padding: 4px 6px;

            width: 50px;

            line-height: 50px;

            text-align: center;

            background: #fff;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        var oBox = document.getElementById('box');

        // 添加前缀

        function addPrefixZero(num){

            return num < 10? '0' + num : num;

        }

        // 设置随机颜色

        function createColor(){

             var str = '#';

             for(var i =0;i < 6;i++){

                 str = str +Math.floor(Math.random()*16).toString(16);

             }

             return str;

         }

        function setTime(){

            var oDate = new Date(),

            year = oDate.getFullYear(),

            month = addPrefixZero(oDate.getMonth()),

            date = addPrefixZero(oDate.getDate()),

            hour = addPrefixZero(oDate.getHours()),

            minute = addPrefixZero(oDate.getMinutes()),

            second = addPrefixZero(oDate.getSeconds());

            oBox.innerHTML = '<span>' + year +'</span>:<span>' + month +'</span>:<span>' + date +'</span> <span>' + hour +'</span>:<span>' + minute +'</span>:<span style="background: ' + createColor() +';">' + second +'</span>';

        }

        setTime();

        setInterval(setTime, 1000);

        // var oBox = document.getElementById('box');

        // // 添加前缀0

        // function addPrefixZero(num) {

        //     return num < 10 ? '0' + num : num;

        // }

        // // 生成随机颜色字符串：#ffffff

        // function createColor() {

        //     var str = '#';

        //     for(var i = 0; i < 6; i++) {

        //         str = str + Math.floor(Math.random() * 16).toString(16);

        //     }

        //     return str;

        // }

        // // 设置当前时间信息

        // function setTime() {

        //     var oDate  = new Date(),

        //         year   = oDate.getFullYear(),

        //         month  = addPrefixZero(oDate.getMonth() + 1),

        //         date   = addPrefixZero(oDate.getDate()),

        //         hour   = addPrefixZero(oDate.getHours()),

        //         minute = addPrefixZero(oDate.getMinutes()),

        //         second = addPrefixZero(oDate.getSeconds());

        //     oBox.innerHTML = '<span>' + year +'</span>:<span>' + month +'</span>:<span>' + date +'</span> <span>' + hour +'</span>:<span>' + minute +'</span>:<span style="background: ' + createColor() +';">' + second +'</span>';

        // }

        // setTime();

        // setInterval(setTime, 1000);

    </script>

</body>

</html>

　　

 

js之数码时钟加随机变色的更多相关文章

  1. 用js制作数码时钟

    实现效果 实现效果 图片素材 图片素材 原理分析 用setInterval(fn, 1000)来循环刷新图片. 用date对象的getHours().getMinutes().getSeconds() ...

  2. js基础练习三之数码时钟

    这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...

  3. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  4. JS定时器的使用--数码时钟

    <title>无标题文档</title> <script> function toDou(n){ if(n<10){ return '0'+n; }else{ ...

  5. 利用JS函数制作时钟运行程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. node.js 实现 AES CTR 加解密

    node.js 实现 AES CTR 加解密 node aesctr 前言 由于最近我们在做一款安全的文件分享 App, 所有文件均需要使用 aes ctr 来进行加密,aes key 还有一整套完整 ...

  7. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

随机推荐

  1. 爬虫框架Scrapy之Item Pipeline

    Item Pipeline 当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline ...

  2. webservice的测试案例

    1.服务器端 服务器接口Test_service.java package com.xiaostudy; /** * @desc 服务器接口 * @author xiaostudy * */ publ ...

  3. 解题报告：hdu 1276 士兵队列训练问题 - 简单题

    Problem Description 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行 ...

  4. 从0开始 数据结构 AC自动机 hdu 2222

    参考博客 失配指针原理 使当前字符失配时跳转到另一段从root开始每一个字符都与当前已匹配字符段某一个后缀完全相同且长度最大的位置继续匹配,如同KMP算法一样,AC自动机在匹配时如果当前字符串匹配失败 ...

  5. codeforces208E Blood Cousins

    题目链接:codeforces208E 正解:$dsu$ $on$ $tree$ 解题报告: 又是一波$dsu$ $on$ $tree$咯… $p$级$cousin$其实就是对于$x$的$p$级祖先统 ...

  6. C5 标准IO库：APUE 笔记

    C5 :标准IO库 在第三章中,所有IO函数都是围绕文件描述符展开,文件描述符用于后续IO操作.由于文件描述符相关的操作是不带缓冲的IO,需要操作者本人指定缓冲区分配.IO长度等,对设备环境要求一定的 ...

  7. NSMutableString和NSString区别，及相互转换方法

    NSString是一个不可变的字符串对象.这不是表示这个对象声明的变量的值不可变,而是表示它初始化以后,你不能改变该变量所分配的内存中的值,但你可以重新分配该变量所处的内存空间.而NSMutableS ...

  8. ubuntu下python安装pandas和numpy等依赖库版本不兼容的问题RuntimeWarning: numpy.dtype size changed

    习惯了linux下用pip install numpy及pip install pandas命令了.折腾了好久了. 上来先在python3中pip3 install numpy装了numpy,然后再p ...

  9. 你曾后悔进入 IT 行业吗？为什么？（转自知乎）--一生不悔入IT

    你曾后悔进入 IT 行业吗?为什么?(转自知乎)--一生不悔入IT 一.总结 一句话总结:看了大概200条评论,99%的不后悔,大部分人后悔没有早点干,但是做it最最主要的是要注意身体. 1.it是最 ...

  10. 理解django的多对多ManyToManyField

    转自:http://luozhaoyu.iteye.com/blog/1510635 对于第一次碰到django这样类activerecord的ORM,初学者可能比较疑惑的是ManyToManyFie ...