简单七彩变色计时器！

简单的七彩变色计时器！
原创不易！！！！！！
七彩时间效果图

话不多说直接上代码，后面提供大致思路，大神请绕道！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>--七彩计时器！--</title>
    <style>
            div{padding: 0}

            body{
                background: rgb(131, 131, 130);
                color: rgb(0, 255, 255);
                text-align: center;
            }
            .time{
                display: flex;
                justify-content: center;
                margin-top: 10%;
                /* box-shadow: 0px 10px 160px #afafaf; */
            }
            .time span{
                display: block;
                box-shadow: 10px 10px 100px #afafaf;
                background: #080808;
                padding: 20px 30px;
                font-size: 150px;
                border-radius: 10%;
                margin: 10px;
                letter-spacing: 5px;
            }
            
            /* 背景设置 */
            .set{
                width: 300px;
                position: absolute;
                top: 0;
                left: 0;
                cursor: pointer;
            }
    </style>
</head>
<body id="body">
    <div class="time">
        <span class="h" id="h">88</span>
        <span class="m" id="m">88</span>
        <span class="s" id="s">88</span>
    </div>
    <div class="set">
        <div class="kaiguan"><b id="qicai">-开启七彩-</b></div>
    </div>
</body>
<script>
        window.onload=function(){
            function shuang(i) {
                i = i.toString();
                if(i.length<2){i = '0'+ i};
                return i;
            }
            setInterval(function(){
                var date    = new Date();
                var hours   = shuang(date.getHours());  //获取时
                var minutes = shuang(date.getMinutes()); //获取分钟
                var seconds = shuang(date.getSeconds()); //获取秒
                document.getElementById('h').innerHTML = hours;
                document.getElementById('m').innerHTML = minutes;
                document.getElementById('s').innerHTML = seconds;
            }
            ,100)
            //填充数字
            function zill(x){
                var y = x.toString().length;
                y < 3 ? y < 2 ? x="00"+x:x=x:x=x;
                return x;
            }
    
            //颜色变化
            var now=0,old=2,next=1;
            rgb = [255,0,0];
            function bianhua(){
                if(rgb[now] >= 255){
                    if(rgb[old] <= 0){
                        now = next;
                        now == 0 ? old=2:old=now-1;
                        now == 2 ? next=0:next=now+1;
                        rgb[now] += 5;
                    }
                    else{
                        rgb[old] -= 5;
                        if(rgb[old] <= 0){
                            now = next;
                            now == 0 ? old=2:old=now-1;
                            now == 2 ? next=0:next=now+1;
                        }
                    }
                }
                else{
                    rgb[now] += 5;
                }
                char_rgb = "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
                document.getElementById("body").style.color = char_rgb;
            }
            //七彩控制
            var qicai = document.getElementById("qicai");
            var qicai_switch = 0;
            qicai.onclick = function(){
                if(qicai_switch == 0){
                    qicai_switch = 1;
                    qicai.innerText = "-关闭七彩-";
                    Auto = setInterval(function(){bianhua()},100);
                }
                else{
                    qicai_switch = 0;
                    qicai.innerText = "-开启七彩-";
                    clearInterval(Auto);
                }
            }
        }
</script>
</html>

大致思路：

首先用rgb模式作为背景色，初始为 rgb(255，0，0) 红色
将 green 值自增到255 渐变为 rgb(255，255，0) 橙色
将 red 值自减到0 渐变为 rgb(0，255，0) 黄色
再按照1~3的思路由黄→绿→蓝→…→红，完成七彩渐变

增减思路：可能描述存在问题，多看几遍能理解的！

在大致思路中，总体每步都可以分为对当前值(红\绿\蓝)进行改变，对上一个值，下一个值进行判断
将大致思路中每步进行分解如：
由1到2：判断当前 red 值为255，到达最高；判断 blue 值为0；所以对 green 值进行自增直到 255
由2到3：判断当前 green 值为255，到达最高；判断 red 值为255；所以对 red 值进行自减直到 0
此时为（0，255，0）循环：
判断当前 green 值为255，到达最高；判断 red 值为0；所以对 blue 值进行自增直到 255
判断当前 blue 值为255，到达最高；判断 green 值为255；所以对 green 值进行自减直到 0
此时为（0，0，255）依次循环
所以需要三个变量来记录当前值(now)、上一个值(old)、下一个值(next)
当每次自增或自减，结束后重新赋予三个变量的值，以此达到JS变幻效果

js实现代码：

//颜色变化
var now=0,old=2,next=1;
rgb = [255,0,0];
function bianhua(){
  if(rgb[now] >= 255){
  if(rgb[old] <= 0){
      now = next;
      now == 0 ? old=2:old=now-1;
      now == 2 ? next=0:next=now+1;
      rgb[now] += 5;	//自增
   }
         else{
             rgb[old] -= 5;		//自减
             if(rgb[old] <= 0){
                 now = next;
                 now == 0 ? old=2:old=now-1;
                 now == 2 ? next=0:next=now+1;
             }
         }
     }
     else{
         rgb[now] += 5;
     }
     char_rgb = "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
     document.getElementById("body").style.color = char_rgb;
 }

来源：CSDN

作者：智韬

链接：https://blog.csdn.net/qq_42825870/article/details/103585265

标签

计时器

rgb模式