初学JavaScript之颜色小游戏

/*老师布置的的颜色小游戏的作业，根据问题显示的文字找出对应的颜色判断小游戏，可能有很多需要改进的代码，后面会多多改进的，谢谢2018-07-15 12:45:59*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>颜色小游戏</title>
        <style type="text/css">
            .container{
                width: 400px;
                height: 550px;
                margin: 0 auto;
                border: 1px solid black;
                position: relative;
                background-color: #F0F0F0;
            }
            .info{
                overflow: hidden;
            }
            .time{
                margin: 20px 20px;
                float: left;
            }
            .score{
                margin: 20px 20px;
                float: right;
            }
            .question{
                width: 100%;
                height: 80px;
                font-size: 60px;
                text-align: center;
                margin-top: 140px;
                color: blue;
            }
            .reset{
                width: 100px;
                height: 50px;
                background-color: green;
                color: white;
                text-align: center;
                line-height: 50px;
                margin: 0 auto;
                cursor: pointer;
            }
            .answer{
                width: 100%;
                height: 80px;
            }
            .answer ul{
                width: 100%;
                height: 80px;
                width: 350px;
                margin: 0 auto;
                padding: 0;

            }
            .answer ul li{
                list-style-type: none;
                float: left;
                height: 60px;
                width: 60px;
                margin:0 5px ;
                font-size: 60px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="info">
                <div class="time">倒计时：<span>6.66</span></div>
                <div class="score">得分：<span>0</span></div>
            </div>
            <div class="question">红</div>
            <div class="reset">准备</div>
            <div class="answer">
                <ul>
                    <li>红</li>
                    <li>黄</li>
                    <li>蓝</li>
                    <li>绿</li>
                    <li>黑</li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var time = document.querySelector(".time").querySelector("span");
        var countTime;
        var target = true;
        //倒计时
        function cutTime(){
            if(target){
                sec = 6;
                ms = 66;
                if(target){target= false;}
                countTime = setInterval(function(){
                    if(sec == 0&&ms==0){
                        clearInterval(countTime);
                        // target = true;
                    }
                    if(ms == 0&&sec>0){
                        sec-=1;
                        ms = 100;
                    }
                    time.innerText=sec+"."+ms;
                    ms-=1;

                },10);
            }
        }

        //随机颜色
        var color = ["red","yellow","blue","green","black"];
        var text = ["红","黄","蓝","绿","黑"];
        var question = document.querySelector(".question");
        var answer = document.querySelector(".answer").querySelector("ul");
        var answer_li = answer.querySelectorAll("li");

        //随机数组
        function getRandArr(min,max,len){
            var arr=[];
            while(arr.length<len){
                var target = true;
                var rd=Math.floor(Math.random()*(max-min+1)+min);
                for(var i=0;i<arr.length;i++){
                    if(arr[i] == rd){
                        target = false;
                        break;
                    }
                }
                if(target){
                    arr.push(rd);
                }
            }
            return arr;
        }
        changeColor();
        //改变颜色
        function changeColor(){
            textRandom=getRandArr(0,4,5);
            colorRandom=getRandArr(0,4,5);
            rd = getRandArr(0,4,5);

            question.innerText=text[rd[1]];
            question.style.color=color[rd[2]];

            for(var i = 0;i<text.length;i++){
                answer_li[i].innerText=text[textRandom[i]];
                answer_li[i].style.color=color[colorRandom[i]];
            }
        }

        //li点击事件
        var score = document.querySelector(".score").querySelector("span");
        var scores = 0;

        for(var j =0;j<answer_li.length;j++){
            answer_li[j].index = j;
            answer_li[j].onclick = function(){
                cutTime();
                resets.innerText="进行中";
                console.log(time.innerText);
                if(time.innerText!=0){
                    //增加分数
                    if(rd[2] == textRandom[this.index]){
                        scores +=1;
                    }else{
                        scores -=1;
                    }
                    changeColor();
                    score.innerText = scores;
                }else{
                    resets.innerText="游戏结束";
                }
            }
        }

        //重置游戏
        resets = document.querySelector(".reset");

        resets.onclick = function(){
            console.log(countTime);
            resets.innerText="准备";
            if(countTime==undefined){
                alert("已在准备中，可直接开始");
            }
            if(time.innerText=="6.66"&&scores==0){
                alert("已在准备中，可直接开始");
            }
            clearInterval(countTime);
            target = true;
            time.innerText="6.66";
            score.innerText=scores=0;
        }
    </script>
</html>
来源：oschina
链接：https://my.oschina.net/u/4258161/blog/3904813
标签
black
javascript
RED
Solid