從零開始手把手教你使用原生JS+CSS3實現幸運水果機游戲

来源:https://www.cnblogs.com/songboriceboy/archive/2020/06/22/native-javascript-fortune-fruit-machine.html
-Advertisement-
Play Games

我們使用原生JS+CSS3，來開發一個集趣味性與技術性於一體的H5小游戲。我們會就地講解項目中用到的css，js基礎知識點，先舉一些小的示例，來闡明知識點的用法，再說明如何在本項目中應用，應用在哪塊功能的實現上。比如標準文檔流，定位，浮動，盒子模型，CSS3彈性盒子，CSS3高級選擇器，背景圖片，j... ...


項目體驗地址
免費視頻教程

游戲介紹

幸運水果機是一款街機游戲，游戲界面由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操作，模板字元串，是綜合運用前端基礎知識的當前互聯網上少見優秀綜合案例。

幸運水果機之原生js實現

1. 安裝vscode插件Live Server

2. 水果機輪盤界面設計

2.1 輪盤界面設計之基本方格

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>

運行效果

2.3 內部樣式

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>

效果：

2.4 背景圖片

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>

效果：

2.5 綜合在一起

<!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>

最終效果：

3. 使用原生JS動態生成水果機輪盤

3.1 JS動態創建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>

3.2 JS控制元素樣式

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>

3.3 認識JSON

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>

3.4 模板字元串

    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)

3.5 綜合在一起

<!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>

4. 讓跑燈跑起來

4.1 JS中的2種定時器

  1. 周期性定時器
<!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>


2. 一次性定時器

<!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>

4.2 JS中的隨機數

       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);

4.3 CSS中的z-index屬性

<!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>

4.4 整合在一起

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>

js

 <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>

4.5 實現小燈變速旋轉

          //給開始按鈕綁定事件處理函數

            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);
                
            }

完整教程

完整教程


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端 平滑滾動到底部/頂部
    頁面滾動時，添加平滑特效 1.在頁面入口處，添加css 1 html { 2 scroll-behavior: smooth; 3 } 添加全局css之後，直接使用window.scroll(0,0)就可以平滑滾動到頂部了。 註：相容性很差，僅支持火狐、chrome高級版本 2.指定滾動操作，使用平 ...
  • 1.單鏈表的逆序(JavaScript版) 使用遞歸實現
    ES6版本 鏈表逆序： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit ...
  • 【前端學習分享】HTML+CSS京東商城靜態頁面
    ###註意事項 ####一、CSS的定位問題position static 沒有定位，遵循正常的文檔流對象。 以下使用較多 fixed 相對於瀏覽器視窗是固定的，視窗的他不會移動（比如說百度彈出來的登錄視窗，不會移動） relative相對定位元素的定位是相對其正常位置，相對定位元素經常被用來作為絕 ...
  • 轉行前端到底是自學好還是培訓好？
    學習web前端開發有必要去培訓班嗎？ 很多人在考慮向web前端轉行的時候都會問這個問題，畢竟參加培訓班需要投入時間和金錢，學完之後效果如何，是否能夠順利找到工作，是很多人都會擔心的問題。對於這個，給大家分析一下web開發零基礎怎樣入門以及web開發自學好還是培訓好？ 1、web開發技術三個階段 分別 ...
  • CSS：元素的顯示與隱藏（display、visibility、overflow）
    1、display顯示與隱藏 （1）display的屬性值 none：隱藏元素 block：轉換為塊級元素、顯示元素 （2）隱藏 不添加隱藏盒子的屬性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> ...
  • 簡單兩步使用css控制div下導航欄ul居中顯示
    第一步：父層設置文本居中屬性。第二步：li設置內聯樣式。只需以上兩步就可以實現導航欄居中顯示了，但為了美觀好看，可以稍微加點料。以下供參考：list-style:none; 取消列表前面的列表樣式border-radius:25px; 設置圓角背景樣式text-decoration:none; 取消... ...
  • 手摸手帶你理解Vue響應式原理
    前言 響應式原理作為 Vue 的核心，使用數據劫持實現數據驅動視圖。在面試中是經常考查的知識點，也是面試加分項。 本文將會循序漸進的解析響應式原理的工作流程，主要以下麵結構進行： 分析主要成員，瞭解它們有助於理解流程 將流程拆分，理解其中的作用 結合以上的點，理解整體流程 文章稍長，但部分是代碼，還 ...
  • localStorage. sessionStorage、 Cookie不共同點:（面試題）
    ●存儲大小的不同: localStorage的大小一般為5M sessionStorage的大小一般為5M cookies的大小一般為4K ●有效期不同: 1.localStorage的有效期為永久有效，除非你進行手動刪除。 2.sessionStorage在當前會話下有效，關閉頁面或者瀏覽器時會被 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類