zoukankan      html  css  js  c++  java
  • js之数码时钟加随机变色

     
    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;
                 393px;
                background: #000;
            }
            #box span {
                display: inline-block;
                padding: 4px 6px;
                 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>
    

      

     
  • 相关阅读:
    ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
    JavaScript 的 if else 和 switch对比
    setTimeout 、 promise、async await 的执行顺序?宏任务、微任务,分别包含哪些?
    mac终端,自定义命令提示符。zsh导致PS1变量序列字符失效!!!
    js基础——错误处理
    Nginx | CentOS 8 安装Nginx详细教程
    Vue | 虚拟DOM
    Vue | 双向数据绑定
    Hexo | 超详细的hexo+githhub page搭建过程
    JavaScript | 彻底搞懂JS闭包
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9476809.html
Copyright © 2011-2022 走看看