Native js achieve the selected word games

<!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>Document</title>
    <style>
        #wrap {
            width: 400px;
            margin: 30px auto;
            font-size: 18px;
            box-shadow: 5px 5px 20px rgb(231, 188, 130);
            border-radius: 8px;
        }
        #header p:first-child{
            float: left;
            margin-left: 20px;
        }
        #header p:last-child{
            float: right;
            margin-right: 20px;
        }
    
        #main {
            clear: both;
            font-size: 150px;
            text-align: center;
            margin: 120px auto;
        }
        #wrap>p {
            text-indent: 2em;
            line-height: 35px;
            margin: 5px;
        }
        .choose{
            the display: Flex;
            The justify
            <p>绿</p> -content: space- around; 
        } 
        .choose P { 
            font - size: 30px; 
            Cursor: pointer; 
        }
         </ style> 
</ head> 
<body> 
    <div ID = "wrap"> 
        <div ID = "header" > 
            <P> countdown: <span ID = "Time"> 10 </ span> S </ P> 
            <P> score: <span id = "mark" > 0 </ span> min </ P> 
        </ div > 
        <div ID = "main"> </ div> 
        <P> selected in accordance with the above font color from below the right word, selecting the correct game begins automatically. </ P> 
        <div ID = "the choose" class = "the choose"> 
            <P> blue </ p> 
            <P> yellow </ p> 
            <P> red </ p>
            <p>粉</p>
        </div>
    </div>

    <script>var time = document.getElementById("time");
    var mark = document.getElementById("mark");
    var main = document.getElementById("main");
    var smallFont = document.querySelector('#choose');
    var choose = document.querySelectorAll('#choose p');
    // console.log(choose);// 文字的数组var fontArr = ["红","橙","黄","绿","蓝"];
    colorArr = [ "Red", "Orange", "Yellow", "Green", "Blue"vartext color array//
    
    

    
    
    "orange","yellow","green","blue"];
    //Statement scores, time, countdown, 
    var Grade = 0 ; 
     var DJS = 10 ;
     var Timer;
     // Set In Flag 
    var In Flag = to true ;
     // wrapper function generates a random number 
    function Random (A, B) {
         return Math.round (the Math .random () * (ab &) + B); 
    } 
    // random array 
    function rnArr () {
         var ARR = [];
         // deduplication 
        // array length is less than 5 
        the while (arr.length <. 5 ) {
             // 0-4 generates a random number as an array index 
            var n-= random (0,4 );
             // generate scaled digital array corresponding to the absence of prior to, Push 
            IF (arr.indexOf (n-) == -. 1 ) { 
                arr.push (n-); 
            } 
        } 
        return ARR ; 
    } 
    rnArr (); 
    // Create a text page 
    function the createFont () {
         // random character arrays, as a page out a random characters (random index value) 
        main.innerHTML = fontArr [random (0,4 )];
         / / random array of colors, a color to characters taken 
        main.style.color = colorArr [random (0,4 )];
         // Create small print 
        // random array, a small print and small print color 
        var smallIndexArr rnArr = (); // small print array 
        var= rnArr smallColorArr (); // small print color array 
        // make random changes in small print 
        // Loop through small print array 
        for ( var J = 0; J <smallIndexArr.length; J ++ ) {
             // small print each array to a Font color 
            var fontIndex = smallIndexArr [J];
             // small print contents of the array as a subscript of the array elements, to find the original contents of the array 
            // to set small print page assignment element 
            the Choose [J] = .innerText fontArr [fontIndex];
             var the colorIndex = smallColorArr [J]; 
            the Choose [J] .style.color = colorArr [the colorIndex]; 
        } 
    } 
    the createFont ();
    // to small print cycle is to click time 
    for ( var K = 0; K <choose.length; K ++ ) { 
        the Choose [K] .onclick = function () {
             // get the current color characters 
            var bigColor = main.style. color;
             // get the current character 
            var Word = the this .innerText;
             // Analyzing the color scale and small print characters in the text contents of array subscript 
            IF (colorArr.indexOf (bigColor) == fontArr.indexOf (Word)) { 
                Grade ++ ; 
                mark.innerHTML = Grade; 
                the createFont (); 
                IF(In Flag) {
                     // the console.log (DJS); 
                    Timer = the setInterval ( function () { 
                        DJS - ; 
                        time.innerHTML = DJS;
                         // the console.log (DJS); 
                        IF (DJS == -1 ) {
                             / / clear timer 
                            the clearInterval (timer);
                             // end pop 
                            alert ( 'spicy chicken' + grade + 'points' ); 
                            Grade = 0 ; 
                            DJS= 10;
                            mark.innerHTML = grade;
                            time.innerText = djs;
                            creatFont();
                            flag = true;
                        }
                    },1000)
                }
                flag = false;
            }
        }
    }
    </script>
</body>
</html>
Renderings
Game Logic: randomly generated page text and color, select the correct points.
Articles address https://www.cnblogs.com/sandraryan/
Native js achieve the selected word games

Guess you like
