从零开始手把手教你使用原生JSCSS3实现老虎水果机游戏

项目体验地址
免费视频教程

幸运水果机是一款街机游戏，游戏界面由 24 个方格拼接成一个正方形，每个方格中都有一个不同的水果图形，方格下都有一个小灯。玩家使用游戏币选择希望押注的目标，按下开始后，小灯开始绕着正方形中每个格子转。当小灯停下时，如果停在玩家押注的目标上则可赢取相应的游戏币。

物品：游戏中的物品有八种，分别为：苹果、西瓜、木瓜、橙子、铃铛、77、双星，这些物品又分为大小两种。还有 BAR 图标，分为 2 种。

赔率：以下为所有固定赔率物品的赔率。·所有其他小的物品（小 77、小星星、小西瓜、小铃铛、小木瓜、小橙子）1：2
苹果 1：5·橙子 1：10·木瓜 1：15·铃铛 1：20·西瓜 1：20·双星 1：30·77 1：40·小 BAR 1：25·中 BAR 1：50·大 BAR 1：100

当玩家中奖之后，玩家点击“开始”按钮为收分，再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。

如果玩家没有中奖，则玩家点击“开始”按钮为按照上一次押注再次进行游戏。

在线体验

我们使用原生 JS+CSS3，来开发一个集趣味性与技术性于一体的 H5 小游戏，项目使用到了以下知识点：

CSS：盒子模型，定位，浮动，CSS3 的 Flex 弹性盒模型，图片背景，CSS3 选择器 …
JS：json，map，定时器，随机数，dom 操作，模板字符串 …

学习本课程的同学，了解一点 HTML/CSS/JS 基础知识即可，我们会就地讲解项目中用到的 css，js 基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3 弹性盒子，CSS3 高级选择器，背景图片，json，map，定时器，随机数，dom 操作，模板字符串，是综合运用前端基础知识的当前互联网上少见优秀综合案例。

demo1.html

<body>
  <ul>
    <li> 苹果 </li>
    <li> 香蕉 </li>
    <li> 桔子 </li>
    <li> 苹果 </li>
    <li> 香蕉 </li>
    <li> 桔子 </li>
  </ul>
</body>

    li{
      border: 1px solid red;
      list-style: none;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }

运行效果

可以看到每个 li 独占一行，因为 li 是块级元素，必须使 li 脱离标准文档流，才能水平排布。

标准文档流

标准文档流: 是指页面上从上到下, 从左到右, 网页元素一个挨一个的简单的正常的布局方式。

一般在 HTML 元素分为两种：块级元素和行内元素。像 div,p,ul,li 这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；

行内元素是在一行中水平布置，从左到右的排列；span,strong,a 等属于行内元素。

2.2 绝对定位 `VS` 相对定位

demo2.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul{
      border: 1px solid red;
      height: 500px;
      padding: 0;
      position: relative;
    }
    li{
      border: 1px solid red;
      list-style: none;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      position: absolute;
      top: 20px;
      left: 50px;
    }
  </style>
</head>
<body>
  <ul>
    <li> 苹果 </li>
  </ul>
</body>
</html>

运行效果

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;

        }
    </style>
</head>
<body>
<ul>
  <li style="left:0px;top:0px;"> 苹果 </li>
  <li style="left:50px;top:0px;"> 苹果 </li>
  <li style="left:100px;top:0px;"> 苹果 </li>
  <li style="left:150px;top:0px;"> 苹果 </li>
  <li style="left:200px;top:0px;"> 苹果 </li>
  <li style="left:250px;top:0px;"> 苹果 </li>
  <li style="left:300px;top:0px;"> 苹果 </li>

  <li style="left:300px;top:50px;"> 苹果 </li>
  <li style="left:300px;top:100px;"> 苹果 </li>
  <li style="left:300px;top:150px;"> 苹果 </li>
  <li style="left:300px;top:200px;"> 苹果 </li>
  <li style="left:300px;top:250px;"> 苹果 </li>
  <li style="left:300px;top:300px;"> 苹果 </li>

  <li style="left:250px;top:300px;"> 苹果 </li>
  <li style="left:200px;top:300px;"> 苹果 </li>
  <li style="left:150px;top:300px;"> 苹果 </li>
  <li style="left:100px;top:300px;"> 苹果 </li>
  <li style="left:50px;top:300px;"> 苹果 </li>
  <li style="left:0px;top:300px;"> 苹果 </li>


  <li style="left:0px;top:250px;"> 苹果 </li>
  <li style="left:0px;top:200px;"> 苹果 </li>
  <li style="left:0px;top:150px;"> 苹果 </li>
  <li style="left:0px;top:100px;"> 苹果 </li>
  <li style="left:0px;top:50px;"> 苹果 </li>

</ul>
</body>
</html>

效果：

demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            /* position: absolute; */
            /*background-image: url("images/77.png");*/
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
</head>
<body>
<ul>
    <li style="background-image: url('images/77.png')"></li>
</ul>
</body>
</html>

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
</head>
<body>
<ul>
    <li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>
    <li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>
    <li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>
    <li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>
    <li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>
    <li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>
    <li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>

    <li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>
    <li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>
    <li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>
    <li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>
    <li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>
    <li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>

    <li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>
    <li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>
    <li style="left:150px;top:300px;background-image: url('images/77.png');"></li>
    <li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>
    <li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>
    <li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>

    <li style="left:0px;top:250px;background-image: url('images/star.png');"></li>
    <li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>
    <li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>
    <li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>
    <li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>

</ul>
</body>
</html>

最终效果：

分 2 步：
1. 创建元素（document.createElement）
2. 添加元素（appendChild）

<!DOCTYPE html>
<html>

<body>

  <div id="div1">
    <p id="p1"> 这是一个段落。</p>
    <p id="p2"> 这是另一个段落。</p>
  </div>

  <script>
    let para = document.createElement("p");
    para.innerText = "这是新段落。";

    let element = document.getElementById("div1");
    element.appendChild(para);
  </script>

</body>

</html>

再看一个例子

<!DOCTYPE html>
<html>

<body>

  <div id="div1">

  </div>

  <script>
    let ul = document.createElement('ul')
    let div = document.getElementById('div1')
    for (let i = 0; i < 3; i++){let li = document.createElement('li')
      li.innerText = i;
      ul.appendChild(li)
    }
    div.appendChild(ul)
  </script>

</body>

</html>

style 属性
html 文档中的每一个元素都是一个对象, 文档的每个元素都有一个属性 style。使用 JS，通过对象的 style 属性可以设置元素的任意 css 样式，看一个例子：

<!DOCTYPE html>
<html>

<body>

  <div id="div1">
    <p id="content">helloworld</p>
  </div>

  <script>
    let p = document.querySelector('p')
    p.style.color = 'red'
    p.style.fontSize = '30px'
  </script>

</body>

</html>

JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。
1、对象
对象是一个无序的“‘名称 / 值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称 / 值’对”之间使用“,”（逗号）分隔。

var person = {"name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing"}};

2. 数组

var students =  
              [{"sno":"001","name":"jack","age":130},  
                     {"sno":"002","name":"tame","age":120},  
                     {"sno":"003","name":"cule","age":110}
              ];

看一个例子：


<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>json</title>
    <script>
        var imgData={"name":"图片描述和图片相对路径", "title":"logo 图片","url":"logo.png"};
        console.log(imgData.name);
        console.log(imgData["name"] );

        var json1={"name":"这里是一组图片的文字描述和图片相对路径",
            "title":["logo 图片","图片 1","图片 2","图片 3"],
            "url":["logo.png","1.png","2.png","3.png"]
        };

        console.log(json1.name);
        console.log(json1.url);
        console.log(json1.url[1] );



        var json2 ={ "name":"图片描述和图片相对路径",
            "imgData":[{ "name":"图片 1", "title":"logo 图片 1","url":"logo1.png"} ,
                {"name":"图片 2", "title":"logo 图片 2","url":"logo2.png"}  ,
                {"name":"图片 3", "title":"logo 图片 3","url":"logo3.png"}
            ]
        };
        console.log(json2.name);
        console.log(json2.imgData[0].name );

    </script>


</head>

<body>


</body>
</html>

    var name = "Neo";
    var occupation = "programmer";    // 不使用模板字符串拼接
    var str1 = "He is" + name + ",he is a" + occupation;    // 使用模板字符串拼接
    var str2 = `He is ${name},he is a ${occupation}`;
    console.log(str1)
    console.log(str2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>
    <script>
        window.onload = function () {
            var fruits = [{left:'0px',top:'0px',content:'桔子',src:'b_orange.png',score:10},
                {left:'50px',top:'0px',content:'铃铛',src:'b_alarm.png',score:20},
                {left:'100px',top:'0px',content:'小 BA',src:'s_bar.png',score:50},
                {left:'150px',top:'0px',content:'BA',src:'b_bar.png',score:100},
                {left:'200px',top:'0px',content:'苹果',src:'b_apple.png',score:5},
                {left:'250px',top:'0px',content:'小苹果',src:'s_apple.png',score:2},
                {left:'300px',top:'0px',content:'椰子',src:'b_coconut.png',score:15},
                {left:'300px',top:'50px',content:'西瓜',src:'b_watermelons.png',score:25},
                {left:'300px',top:'100px',content:'小西瓜',src:'s_watermelons.png',score:2},
                {left:'300px',top:'150px',content:'XX',src:'cha.png',score:0},
                {left:'300px',top:'200px',content:'苹果',src:'b_apple.png',score:5},
                {left:'300px',top:'250px',content:'小桔子',src:'s_orange.png',score:2},
                {left:'300px',top:'300px',content:'桔子',src:'b_orange.png',score:10},
                {left:'250px',top:'300px',content:'铃铛',src:'b_alarm.png',score:20},
                {left:'200px',top:'300px',content:'小 77',src:'s_77.png',score:2},
                {left:'150px',top:'300px',content:'77',src:'b_77.png',score:40},
                {left:'100px',top:'300px',content:'苹果',src:'b_apple.png',score:5},
                {left:'50px',top:'300px',content:'小椰子',src:'s_coconut.png',score:2},
                {left:'0px',top:'300px',content:'椰子',src:'b_coconut.png',score:15},
                {left:'0px',top:'250px',content:'星星',src:'b_star.png',score:30},
                {left:'0px',top:'200px',content:'小星星',src:'s_star.png',score:2},
                {left:'0px',top:'150px',content:'XX',src:'cha.png',score:0},
                {left:'0px',top:'100px',content:'苹果',src:'b_apple.png',score:5},
                {left:'0px',top:'50px',content:'小铃铛',src:'s_alarm.png',score:2}
            ];

            var ul = document.getElementById('machine');
            for(var i = 0; i < fruits.length; i++)
            {
                // 动态的创建 li 元素
                var li = document.createElement('li');
                li.style.left = fruits[i].left;
                li.style.top = fruits[i].top;
                li.style.backgroundImage = `url('images/${fruits[i].src}')`;
                ul.appendChild(li);

            }
        }

    </script>
</head>
<body>
<ul id = 'machine'>
    <!--<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>-->
    <!--<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>-->
    <!--<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>-->
    <!--<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>-->
    <!--<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>-->
    <!--<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>-->

    <!--<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>-->
    <!--<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>-->
    <!--<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>-->
    <!--<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>-->
    <!--<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>-->

    <!--<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>-->
    <!--<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>-->
    <!--<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>-->
    <!--<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>-->
    <!--<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>-->

    <!--<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>-->
    <!--<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>-->
    <!--<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>-->
    <!--<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>-->
    <!--<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>-->

</ul>

</body>
</html>

周期性定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
//        setInterval(fun,time)
//        function hello() {//            console.log('hello');
//        }
//        setInterval(hello, 1000);
//        var timerID = setInterval(fun,time);// 返回值就是定时器 id
//        // 停止定时器
//        clearInterval(timerID);
        var count = 1;
        window.onload = function () {var h2 = document.getElementById('count');
            // 启动定时器
            var timerID = setInterval(function () {
                h2.innerHTML = count++;
                if(count == 11)
                {
                    // 停止定时器
                    clearInterval(timerID);
                }
            },1000);
        }
    </script>
</head>
<body>
<h2 id="count">
    0
</h2>
</body>
</html>

一次性定时器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>

    window.onload = function () {
      var count = 1;
      var h2 = document.getElementById('count');
      function counter() {
        h2.innerHTML = count++;
        if (count < 11) {setTimeout(counter, 1000)
        }
      }
      setTimeout(counter, 1000)
    }
    
  </script>
</head>

<body>
  <h2 id="count">
    0
  </h2>
</body>

</html>

       var num = Math.random();//0-- 1 之间的数[0,1)
       console.log(num);
       //0-10 之间的整数
       var num2 = num*10;
       var num3 = parseInt(5.69);

       console.log(num3);
       var num = parseInt(Math.random()*10);
       console.log(num);
        // 30-50 之间的整数
        // 0--20 之间的整数 +30
       var num2 = parseInt(Math.random()*20) + 30;
       console.log(num2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{position: relative;}
        #one{
            height: 100px;
            width: 100px;
            background-color: red ;
            position: absolute;
            left:0;
            top: 0;
            z-index: 10;
        }
        #two{
            height: 80px;
            width: 80px;
            background-color: blue ;
            position: absolute;
            left:0;
            top: 0;
            z-index: 20;
        }
    </style>
</head>
<body>
<div id="one">

</div>
<div id="two">

</div>
</body>
</html>

html

<body>
<ul id = 'machine'>
<div id="active">

</div>
</ul>
<div id="footer">
    <div id="msg"></div>
    <button id="btn"> 开始 </button>
</div>
</body>

css

 <style>
        
        #footer{
            width: 500px;
            margin: 0px auto;
        }
        #active
        {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: rgba(255,0,0,0.4);
            z-index: 1000;
            left:0;
            top: 0;
            display: none;
        }
        ul{
            /*border: 1px solid red;*/
            position: relative;
            height: 500px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
            text-align: center;
            line-height: 50px;
            position: absolute;
            background-size: contain;
            /*left:0px;*/
            /*top:0px;*/
        }
    </style>

 <script>
        window.onload = function () {
         
            // 给开始按钮绑定事件处理函数
            var index = 0;// 当前 active div 应该和哪个下标的水果重合
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                // 实现转灯的转动
                 // 算出本次需要转动的步数（非固定的），随机的步数
                // 步数又不能太少，至少需要转 3 圈，加上一个随机的步数（0-20）var step = fruits.length * 3 + parseInt(Math.random()*20);


                // 启动一个定时器，让转灯转动
                var timerID = setInterval(function () {
                    // 让转灯转动一格，行走一步
                    // 让隐藏的 div 显示，改变 div 的 left 和 top 来实现转灯的转动
                    var div = document.getElementById('active');
                    div.style.display = 'block';
                    div.style.left = fruits[index].left;
                    div.style.top = fruits[index].top;
                    step--;
                    if(step == 0)// 就应该停止定时器
                    {clearInterval(timerID);
                        var msg = document.getElementById('msg');
                        msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
                        return;
                    }

                    index++;
                    if(index == fruits.length)
                    {index=0;}

                },100);
            }
        }

    </script>

          // 给开始按钮绑定事件处理函数

            var btn = document.getElementById('btn');

            var index = 0;// 当前 active div 应该和哪个下标的水果重合
            btn.onclick = function () {
                // 实现转灯的转动
                // 算出本次需要转动的步数（非固定的），随机的步数
                // 步数又不能太少，至少需要转 3 圈，加上一个随机的步数（0-20）var step = fruits.length * 2 + parseInt(Math.random() * 35);
             
                var timerID = 0
                function turnOneStep() {console.log(step)
                    
                    // 让转灯转动一格，行走一步
                    // 让隐藏的 div 显示，改变 div 的 left 和 top 来实现转灯的转动
                    var div = document.getElementById('active');
                    div.style.display = 'block';
                    div.style.left = fruits[index].left;
                    div.style.top = fruits[index].top;
                    step--;
                    if (step == 0)// 就应该停止定时器
                    {clearTimeout(timerID);
                        var msg = document.getElementById('msg');
                        msg.innerHTML = fruits[index].content + ':' + fruits[index].score;
                        return;
                    }

                    index++;
                    if (index == fruits.length) {index = 0;}
                    timerID = setTimeout(turnOneStep, 1200/step);
                }

   
             
                // 启动一个定时器，让转灯转动
                turnOneStep(step);
                
            }

https://www.jianshu.com/p/528…

从零开始手把手教你使用原生JSCSS3实现老虎水果机游戏

游戏介绍

在线体验

课程目标

读者对象

幸运水果机之原生 js 实现

1. 安装 vscode 插件 Live Server

2. 水果机轮盘界面设计

2.1 轮盘界面设计之基本方格

2.2 绝对定位 `VS` 相对定位

2.3 内部样式

2.4 背景图片

2.5 综合在一起

3. 使用原生 JS 动态生成水果机轮盘

3.1 JS 动态创建 HTML 元素

3.2 JS 控制元素样式

3.3 认识 JSON

3.4 模板字符串

3.5 综合在一起

4. 让跑灯跑起来

4.1 JS 中的 2 种定时器

4.2 JS 中的随机数

4.3 CSS 中的 z -index 属性

4.4 整合在一起

4.5 实现小灯变速旋转

完整教程

游戏介绍

在线体验

课程目标

读者对象

幸运水果机之原生 js 实现

1. 安装 vscode 插件 Live Server

2. 水果机轮盘界面设计

2.1 轮盘界面设计之基本方格

2.2 绝对定位 VS 相对定位

2.3 内部样式

2.4 背景图片

2.5 综合在一起

3. 使用原生 JS 动态生成水果机轮盘

3.1 JS 动态创建 HTML 元素

3.2 JS 控制元素样式

3.3 认识 JSON

3.4 模板字符串

3.5 综合在一起

4. 让跑灯跑起来

4.1 JS 中的 2 种定时器

4.2 JS 中的随机数

4.3 CSS 中的 z -index 属性

4.4 整合在一起

4.5 实现小灯变速旋转

完整教程

2.2 绝对定位 `VS` 相对定位