JavaScript实现打地鼠小游戏-前端开发

让我来介绍一下如何使用JavaScript实现打地鼠小游戏的攻略。这个攻略将涵盖整个实现过程，并且提供两个示例来帮助解释。

让我来介绍一下如何使用JavaScript实现打地鼠小游戏的攻略。这个攻略将涵盖整个实现过程，并且提供两个示例来帮助解释。

准备工作

首先，为了开始这个小游戏的开发，我们需要准备一些基本的工具和框架。以下是需要准备的内容：

HTML：用于构建页面并显示游戏。
CSS：用于样式和布局方案。
JavaScript：用于游戏逻辑的实现。
图片资源：用于创建动画和显示地鼠。

HTML和CSS的设置

首先，我们需要创建一个HTML文件，用于构建基本的页面和布局方案。在HTML文件中，创建一个包含菜单、游戏区域、得分和倒计时的容器。游戏区域是指玩家需要打击地鼠的区域。在HTML中设置好CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打地鼠 - JavaScript 小游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <h1>打地鼠 - JavaScript 小游戏</h1>
      <div class="menu">
          <h2>菜单</h2>
          <button id="start">开始游戏</button>
          <button id="restart" disabled>重新开始</button>
          <h3>分数: <span id="score">0</span></h3>
          <h3>倒计时: <span id="timer">30</span></h3>
      </div>
      <div class="game">
          <div class="hole hole1" id="hole1"><img src="./images/mole.png"></div>
          <div class="hole hole2" id="hole2"><img src="./images/mole.png"></div>
          <div class="hole hole3" id="hole3"><img src="./images/mole.png"></div>
          <div class="hole hole4" id="hole4"><img src="./images/mole.png"></div>
          <div class="hole hole5" id="hole5"><img src="./images/mole.png"></div>
          <div class="hole hole6" id="hole6"><img src="./images/mole.png"></div>
          <div class="hole hole7" id="hole7"><img src="./images/mole.png"></div>
          <div class="hole hole8" id="hole8"><img src="./images/mole.png"></div>
          <div class="hole hole9" id="hole9"><img src="./images/mole.png"></div>
      </div>
  </div>

  <script src="game.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 50px 0;
}

h1 {
    text-align: center;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hole {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hole img {
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all 0.3s;
}

.hole.active img {
    bottom: -20px;
    opacity: 1;
}

.hole.scored img {
    opacity: 0.5;
}

#score, #timer {
    font-size: 24px;
    margin: 0;
    color: #333;
    font-weight: bold;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #333;
    background-color: white;
    color: #333;
    border-radius: 10px;
    cursor: pointer;
}

button:disabled, button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

button:not(:disabled):hover {
    background-color: #333;
    color: white;
}

实现游戏逻辑

在游戏逻辑中，我们需要实现以下几个功能：

随机出现地鼠。
点击地鼠得分。
游戏倒计时和结束游戏。
重新开始游戏。

在JavaScript文件中，创建一个对象，用于存储游戏中的变量和函数

var game = {

}

随机出现地鼠

在随机出现地鼠的函数中，我们需要获取到所有的地鼠框，并从中随机选择其中一个地鼠进行显示。我们可以使用Math.random()函数随机从数组中选择一个地鼠。

randomHole: function() {
    var holes = document.querySelectorAll('.hole');
    var hole = holes[Math.floor(Math.random() * holes.length)];
    return hole;
}

在每隔一定的时间，随机出现一个地鼠并显示在游戏区域中。

startGame: function() {
    game.timer = setInterval(game.randomHole, 1000);
}

点击地鼠得分

在点击地鼠的函数中，我们需要获取到点击的地鼠元素，并将其得分加一，并在界面上更新显示分数。

clickMole: function(e) {
    if (!e.isTrusted) return;
    var mole = this.querySelector('.mole');
    if (!mole.classList.contains('active')) return;
    mole.classList.remove('active');
    mole.classList.add('scored');
    game.score++;
    document.getElementById('score').innerText = game.score;
}

游戏倒计时和结束游戏

我们需要在游戏开始时，启动一个定时器，每隔一秒，将游戏的倒计时减一，并在界面上更新显示。

countDown: function() {
    game.timer = setInterval(function() {
        game.timeLeft--;
        document.getElementById('timer').innerText = game.timeLeft;
        if (game.timeLeft < 1) game.gameOver();
    }, 1000);
}

在结束游戏的函数中，我们需要清除随机出现地鼠定时器和倒计时定时器，并在界面上显示游戏结束信息。

gameOver: function() {
    clearInterval(game.timer);
    alert('Game over. \nYour score: ' + game.score);
    document.getElementById('start').disabled = false;
    document.getElementById('restart').disabled = true;
    document.getElementById('score').innerText = '0';
    document.getElementById('timer').innerText = '30';
    document.querySelectorAll('.mole').forEach(function(mole) {
        mole.classList.remove('active');
    });
}

重新开始游戏

在重新开始游戏的函数中，我们需要清除所有的倒计时和得分数据，并在按钮上添加有效和无效状态。

restartGame: function() {
    clearInterval(game.timer);
    this.disabled = true;
    document.getElementById('start').disabled = true;
    game.timeLeft = 30;
    game.score = 0;
    game.countDown();
    game.startGame();
    setTimeout(function() {
        document.getElementById('restart').disabled = false;
    }, 3000);
}

示例介绍

下面我们来看两个比较简单的示例，来帮助理解打地鼠小游戏的实现过程。

示例1

在这个示例中，我们使用了一个简单的布局方案。玩家可以通过点击按钮开始或重新开始游戏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打地鼠 - 示例</title>
    <style>
        .container {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            font-size: 32px;
            font-weight:bold;
        }

        .game {
            margin: 50px 0;
        }

        .hole {
            width: 120px;
            height: 120px;
            border: 2px solid #333;
            display: inline-block;
            margin: 10px;
            position: relative;
            overflow: hidden;
            transition: all 0.2s;
            cursor: pointer;
        }

        .hole > img {
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: all 0.2s;
        }

        .hole.active > img {
            opacity: 1;
        }

        #score {
            font-size: 24px;
            color: #333;
            margin: 20px 0;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: 2px solid #333;
            background-color: white;
            color: #333;
            border-radius: 10px;
            cursor: pointer;
        }

        button:not(:disabled):hover {
            background-color: #333;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>打地鼠 - 示例</h1>
        <button id="start">开始游戏</button>
        <button id="restart" disabled>重新开始</button>
        <div class="game">
            <div class="hole" id="hole1"><img src="./images/mole.png"></div>
            <div class="hole" id="hole2"><img src="./images/mole.png"></div>
            <div class="hole" id="hole3"><img src="./images/mole.png"></div>
            <div class="hole" id="hole4"><img src="./images/mole.png"></div>
            <div class="hole" id="hole5"><img src="./images/mole.png"></div>
            <div class="hole" id="hole6"><img src="./images/mole.png"></div>
            <div class="hole" id="hole7"><img src="./images/mole.png"></div>
            <div class="hole" id="hole8"><img src="./images/mole.png"></div>
            <div class="hole" id="hole9"><img src="./images/mole.png"></div>
        </div>
        <div id="score">得分: 0</div>
    </div>

    <script src="game.js"></script>
</body>
</html>

var game = {
    timeLeft: 30,
    score: 0,
    timer: null,

    randomHole: function() {
        var holes = document.querySelectorAll('.hole');
        var hole = holes[Math.floor(Math.random() * holes.length)];
        hole.classList.add('active');
        setTimeout(function() {
            hole.classList.remove('active');
        }, 1000);
    },

    clickMole: function(e) {
        if (!e.isTrusted) return;
        var mole = this.querySelector('img');
        if (!mole) return;
        if (!mole.classList.contains('active')) return;
        mole.parentElement.classList.remove('active');
        mole.classList.add('scored');
        game.score++;
        document.getElementById('score').innerText = '得分: ' + game.score;
    },

    countDown: function() {
        game.timer = setInterval(function() {
            game.timeLeft--;
            if (game.timeLeft < 1) game.gameOver();
        }, 1000);
    },

    startGame: function() {
        game.timer = setInterval(game.randomHole, 1000);
    },

    gameOver: function() {
        clearInterval(game.timer);
        alert('Game over. \nYour score: ' + game.score);
        document.getElementById('start').disabled = false;
        document.getElementById('restart').disabled = true;
        var moles = document.querySelectorAll('.hole img');
        moles.forEach(function(mole) {
            mole.classList.remove('active');
        });
        game.score = 0;
        document.getElementById('score').innerText = '得分: 0';
        game.timeLeft = 30;
    },

    restartGame: function() {
        clearInterval(game.timer);
        game.timeLeft = 30;
        game.score = 0;
        game.countDown();
        game.startGame();
        document.getElementById('restart').disabled = true;
        setTimeout(function() {
            document.getElementById('restart').disabled = false;
        }, 3000);
    }
}

document.getElementById('start').addEventListener('click', function() {
    this.disabled = true;
    game.countDown();
    game.startGame();
    document.getElementById('restart').disabled = true;
});

document.getElementById('restart').addEventListener('click', game.restartGame);

document.querySelectorAll('.hole').forEach(function(hole) {
    hole.addEventListener('click', game.clickMole);
});

示例2

在这个示例中，我们使用了CSS动画，在地鼠出现和消失时添加了一些额外的动画效果。另外，游戏倒计时和分数信息通过固定的底部栏显示。

```html

打地鼠 - 示例2</p> <style> * { margin: 0; padding: 0; box-sizing: border-box; }</p> <p> body { font-family: Arial, sans-serif; background-color: #F5A623; height: 100vh; }</p> <p> .container { position: relative; max-width: 960px; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,.3); background-color: white; padding: 20px; margin-top: 30px; }</p> <p> h1 { font-size: 48px; font-weight:bold; margin-top: 20px; margin-bottom: 50px; text-align: center; }</p> <p> .mole { width: 150px; height: 128px; background-image: url('./images/moles.png'); position: absolute; bottom: 0; left: 0; transform: translateY(100%); transition: all 0.2s; animation: play 0.6s steps(5) infinite; }</p> <p> .hole { width: 150px; height: 128px; display: inline-block; margin: 10px; position: relative; overflow: hidden; }</p> <p> .hole:before { content:''; display:block; position:absolute; top: 50%; left: 50%; width: 125px; height: 125px; border-radius: 100%; margin: -63px 0 0 -63px; border: 5px solid #743f00; background-color: #963f02; }</p> <p> .hole.active:before { background-color: #9c4d0e; }</p> <p> .hole.active .mole { transform: translateY(0); }</p> <p> #score, #timer { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background-color: #D8D8D8; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 24px; color: #333; font-weight: bold; }</p> <p> button { position: fixed; top: 20px; left: 20px; padding: 10px 20px; font-size: 16px; border: 2px solid #333; background-color: white; color: #333; border-radius: 10px; cursor: pointer; }</p> <p> button:not(:disabled):hover { background-color: #333; color: white; }</p> <p> @keyframes play { from {background-position: 0 0;} to {background-position: -750px 0;} }</p> </style> <p><br /><body><br /> <button id="start">开始游戏</p> <div class="container"> <h1>打地鼠 - 示例2</h1> <div class="game"> <div class="hole" id="hole1"> <div class="mole"></div> </div> <div class="hole" id="hole2"> <div class="mole"></div> </div> <div class="hole" id="hole3"> <div class="mole"></div> </div> <div class="hole" id="hole4"> <div class="mole"></div> </div> <div class="hole" id="hole5"> <div class="mole"></div> </div></div></div> </article> <script src='/adv.php?aid=2' language='javascript'></script>  <div class="wmd-margin-top b-t"> <div class="tags-item wmd-single-tags"> </div> </div></div> <div class="wmd-background-default b-b wmd-margin-bottom b-r-4"> <div class="wmd-text-small wmd-panding-s"> <div class="single-head"> <div class="wmd-text-small wmd-text-muted wmd-flex wmd-text-truncate wmd-overflow-auto"> <div class="avatar wmd-flex-1 wmd-flex wmd-flex-middle wmd-avatar-t"> <span class="wmd-text-small wmd-display-block wmd-margin-small-left"><a title="文章作者" rel="author">织梦狗教程</a></span> <p>本文标题为：JavaScript实现打地鼠小游戏</p> <button id="TKLS" class="wmd-text-fz itemCopy red_tkl button_tkl" type="button" data-clipboard-text="JavaScript实现打地鼠小游戏：https://www.dedegg.com/itfiles/web/125060.html"><i class="iconfont icon-attachment"></i>复制本文链接</button> <div class="share"> <a class="weixin-share wmd-display-inline-block wmd-fx-weixin" href="#" wmd-tooltip="分享到微信" data-image="" target="_blank"><i class="iconfont icon-wechat-fill"></i></a> <a class="wmd-display-inline-block wmd-fx-qq" href="http://connect.qq.com/widget/shareqq/index.html?url=https://www.dedegg.com/itfiles/web/125060.html&sharesource=qzone&title=JavaScript实现打地鼠小游戏&pics=/xwassets/images/default.png&h=200&w=300&zc=1&a=t&q=100&s=1&summary=让我来介绍一下如何使用JavaScript实现打地鼠小游戏的攻略。这个攻略将涵盖整个实现过程，并且提供两个示例来帮助解释。…" wmd-tooltip="分享到QQ好友/QQ空间" target="_blank"><i class="iconfont icon-QQ"></i></a> <a class="wmd-display-inline-block wmd-fx-weibo" href="http://service.weibo.com/share/mobile.php?url=https://www.dedegg.com/itfiles/web/125060.html&title=JavaScript实现打地鼠小游戏&appkey=3313789115" wmd-tooltip="分享到微博" target="_blank"><i class="iconfont icon-weibo1"></i></a> </div> </div> </div> </div> </div> </div> <script src="https://www.dedegg.com/xwassets/js/clipboard.min.js" type="text/javascript"></script> <script> var clipboard = new Clipboard('.itemCopy'); clipboard.on('success', function(e) { if (e.trigger.disabled == false || e.trigger.disabled == undefined) { e.trigger.innerHTML = "<i class='iconfont icon-attachment'></i>链接复制成功"; e.trigger.disabled = true; setTimeout(function() { e.trigger.innerHTML = "<i class='iconfont icon-attachment'></i>复制本文链接"; e.trigger.disabled = false; }, 2000); } }); clipboard.on('error', function(e) { e.trigger.innerHTML = "链接复制失败"; }); </script> <div class="wmd-grid-small wmd-margin-bottom" wmd-grid> <div class='wmd-width-1-2'> <div class='b-r-4 wmd-inline wmd-overflow-hidden wmd-width-1-1 wmd-page-img' style='height:100px'> <img width='400' height='267' src='/xwassets/images/pre.png' class='attachment- size- wp-post-image' alt='' decoding='async' loading='lazy' srcset='/xwassets/images/pre.png 400w, /xwassets/images/pre.png 300w' sizes='(max-width: 400px) 100vw, 400px' /> <div class='wmd-overlay wmd-overlay-primary wmd-position-bottom'> <span>上一篇：</span> <a href='/itfiles/web/125059.html' class='wmd-display-block wmd-text-truncate'>JS中LocalStorage与SessionStorage五种循序渐进的使用方法</a> </div> </div> </div> <div class='wmd-width-1-2'> <div class='b-r-4 wmd-inline wmd-overflow-hidden wmd-width-1-1 wmd-page-img' style='height:100px'> <img width='400' height='267' src='/xwassets/images/next.png' class='attachment- size- wp-post-image' alt='' decoding='async' loading='lazy' srcset='/xwassets/images/next.png 400w, /xwassets/images/next.png 300w' sizes='(max-width: 400px) 100vw, 400px' /> <div class='wmd-overlay wmd-overlay-primary wmd-position-bottom'> <span>下一篇：</span> <a href='/itfiles/web/125061.html' class='wmd-display-block wmd-text-truncate'>使用jquery的cookie实现登录页记住用户名和密码的方法</a> </div> </div> </div> </div> <script src='/adv.php?aid=3' language='javascript'></script>  <section id="newbaike" class="wmd-background-default b-b wmd-margin-bottom-20 wmd-margin-top-20 b-r-4 wmd-single-foos wmd-xiangguan"> <div class="wmd-qa-commont section-title wmd-flex wmd-flex-middle"> <h3 class="wmd-position-relative wmd-flex-1 wmd-display-inline-block wmd-margin-remove"><i class="iconfont icon-wenjuan"></i> 基础教程推荐</h3> </div> <div class="card wmd-margin-top"> <div class="wmd-grid-ceosmls" wmd-grid> <div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/shtml/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22061Q11954421.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/shtml/" target="_blank" class="title wmd-display-block" title="学习HTML"> 学习HTML</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/jquery/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22062Q53310911.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/jquery/" target="_blank" class="title wmd-display-block" title="学习jQuery"> 学习jQuery</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/laravel/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-220630101I5353.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/laravel/" target="_blank" class="title wmd-display-block" title="学习Laravel"> 学习Laravel</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/css3/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-220622222529626.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/css3/" target="_blank" class="title wmd-display-block" title="学习CSS3"> 学习CSS3</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/vue/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22062Q63Z4541.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/vue/" target="_blank" class="title wmd-display-block" title="学习Vue.js"> 学习Vue.js</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/bootstrap5/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22062G53UE17.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/bootstrap5/" target="_blank" class="title wmd-display-block" title="学习Bootstrap5"> 学习Bootstrap5</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/thinkphp/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22063014335cI.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/thinkphp/" target="_blank" class="title wmd-display-block" title="学习ThinkPHP"> 学习ThinkPHP</a> </div> </div> </div></div><div class="wmd-width-1-1@s wmd-width-1-2 wmd-width-1-4@xl"> <div class="card-item b-r-4 wmd-background-default wmd-overflow-hidden wmd-vip-icons"> <div class="wmd_xg_img"> <a href="/ajax/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://imgs.dedegg.com/2206/1-22062R10QHQ.jpg" class="wmd-width-1-1@s lazyload"> </a> </div> <div class="wmd-padding-remove"> <div class="card-title-desc"> <a href="/ajax/" target="_blank" class="title wmd-display-block" title="学习AJAX"> 学习AJAX</a> </div> </div> </div></div> </div> </div> </section>  <section id="ceoxiangguan" class="wmd-background-default b-b wmd-margin-bottom-20 wmd-margin-top-20 b-r-4 wmd-padding-30px wmd-xiangguan"> <div class="wmd-xiangguan-wen"> <div class="wmd-qa-commont"> <span class="wmd-qa-turn"><i class="iconfont icon-xiangkan"></i> 猜你喜欢</span> </div> <ul class="xgart-row"> <li> <a href="/itfiles/web/118739.html" target="_blank" >js中通过父级进行查找定位元素</a> <span>2023-12-21</span> </li> <li> <a href="/itfiles/web/120568.html" target="_blank" >javascript结合Cookies实现浏览记录历史第2/3页</a> <span>2024-01-05</span> </li> <li> <a href="/itfiles/web/122695.html" target="_blank" >如何用js实现鼠标向上滚动时浮动导航</a> <span>2024-01-23</span> </li> <li> <a href="/itfiles/web/119626.html" target="_blank" >JS实现羊了个羊小游戏实例</a> <span>2023-12-28</span> </li> <li> <a href="/itfiles/web/118707.html" target="_blank" >服务器安全设置的几个注册表设置</a> <span>2023-12-21</span> </li> <li> <a href="/itfiles/web/124478.html" target="_blank" >jquery动画3.创建一个带遮罩效果的图片走廊</a> <span>2024-02-07</span> </li> <li> <a href="/itfiles/web/119752.html" target="_blank" >块级元素的三种垂直水平居中的方法</a> <span>2023-12-30</span> </li> <li> <a href="/itfiles/web/91569.html" target="_blank" >ajax局部刷新实例 (三种方法推荐)</a> <span>2023-01-31</span> </li> <li> <a href="/itfiles/web/93709.html" target="_blank" >不使用XMLHttpRequest对象实现Ajax效果的方法小结</a> <span>2023-02-23</span> </li> <li> <a href="/itfiles/web/109741.html" target="_blank" >原生JS实现非常好看的计数器</a> <span>2023-08-08</span> </li> </ul> </div> </section> </div> </div> <div class="wmd-side-lie-y sidebar-column"> <div class="sidebar"> <section class="side-author b-a b-r-4 wmd-background-default wmd-overflow-hidden wmd-margin-bottom"> <div class="side-author-latest wmd-background-default wmd-padding-small"> <div class="b-b wmd-padding-top-small wmd-padding-remove-horizontal wmd-clearfix wmd-flex wmd-flex-middle"> <span class="side-title side-title-style wmd-h5 wmd-float-left wmd-margin-remove wmd-position-relative">最新文章</span> </div> <ul class="wmd-padding-remove wmd-margin-remove-bottom"> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-02-12</span> <a href="/itfiles/web/125059.html" target="_blank" class="wmd-display-block">JS中LocalStorage与SessionStorage五种循序渐进的使用方法</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-02-12</span> <a href="/itfiles/web/125058.html" target="_blank" class="wmd-display-block">jquery中cookie用法实例详解(获取,存储,删除等)</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-02-12</span> <a href="/itfiles/web/125057.html" target="_blank" class="wmd-display-block">用js+cookie记录滚动条位置</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-02-12</span> <a href="/itfiles/web/125056.html" target="_blank" class="wmd-display-block">常见的浏览器存储方式（cookie、localStorage、sessionStorage）</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-02-12</span> <a href="/itfiles/web/125055.html" target="_blank" class="wmd-display-block">Cookie的使用及保存中文并用Cookie实现购物车功能</a> </li> </ul> </div> </section> <section class="side-art b-a b-r-4 wmd-background-default wmd-margin-bottom"> <div class="b-b wmd-padding-small wmd-clearfix wmd-flex wmd-flex-middle"> <span class="side-title side-title-style wmd-h5 wmd-float-left wmd-margin-remove wmd-position-relative">热门文章</span> </div> <ul class="wmd-list wmd-padding-remove wmd-overflow-auto wmd-sidebar-wenzhang"> <li class="wmd-margin-remove-top"> <div class="b-b wmd-padding-small"> <div wmd-grid class="wmd-grid-small"> <div class="wmd-width-1-3"> <a href="/itfiles/web/83559.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/imgfile/2211/1-2211011GR2209-simg.png" alt="怎么查看Iconfont字体有哪些图标和编码" src="https://www.dedegg.com/xwassets/images/default.gif" class="lazyload" > </a> </div> <div class="wmd-width-2-3 wmd-sidebar-article-c"> <div class="wmd-card"> <p class="wmd-margin-small-bottom"> <a href="/itfiles/web/83559.html" target="_blank" class="wmd-display-block wmd-text-truncate">怎么查看Iconfont字体有哪些图标和编码</a> </p> <div class="wmd-sidebar-article-ch wmd-text-meta wmd-margin-small-top wmd-flex"> <span class="wmd-margin-right"><i class="iconfont icon-rili"></i>2022-11-04</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>653</span> </div> </div> </div> </div> </div> </li> <li class="wmd-margin-remove-top"> <div class="b-b wmd-padding-small"> <div wmd-grid class="wmd-grid-small"> <div class="wmd-width-1-3"> <a href="/itfiles/web/83563.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/imgfile/2211/1-2211011KFU04-simg.png" alt="Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)报错" src="https://www.dedegg.com/xwassets/images/default.gif" class="lazyload" > </a> </div> <div class="wmd-width-2-3 wmd-sidebar-article-c"> <div class="wmd-card"> <p class="wmd-margin-small-bottom"> <a href="/itfiles/web/83563.html" target="_blank" class="wmd-display-block wmd-text-truncate">Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)报错</a> </p> <div class="wmd-sidebar-article-ch wmd-text-meta wmd-margin-small-top wmd-flex"> <span class="wmd-margin-right"><i class="iconfont icon-rili"></i>2022-11-04</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>496</span> </div> </div> </div> </div> </div> </li> <li class="wmd-margin-remove-top"> <div class="b-b wmd-padding-small"> <div wmd-grid class="wmd-grid-small"> <div class="wmd-width-1-3"> <a href="/itfiles/web/83235.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/imgfile/2210/1BD6133I1O0-Q395.gif" alt="cocos creator游戏实现loading加载页面，游戏启动加载动画" src="https://www.dedegg.com/xwassets/images/default.gif" class="lazyload" > </a> </div> <div class="wmd-width-2-3 wmd-sidebar-article-c"> <div class="wmd-card"> <p class="wmd-margin-small-bottom"> <a href="/itfiles/web/83235.html" target="_blank" class="wmd-display-block wmd-text-truncate">cocos creator游戏实现loading加载页面，游戏启动加载动画</a> </p> <div class="wmd-sidebar-article-ch wmd-text-meta wmd-margin-small-top wmd-flex"> <span class="wmd-margin-right"><i class="iconfont icon-rili"></i>2022-10-30</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>443</span> </div> </div> </div> </div> </div> </li> <li class="wmd-margin-remove-top"> <div class="b-b wmd-padding-small"> <div wmd-grid class="wmd-grid-small"> <div class="wmd-width-1-3"> <a href="/itfiles/web/106849.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/imgfile/2307/1DS64092W50-1Z95.png" alt="vue父子组件传值不能实时更新的解决方法" src="https://www.dedegg.com/xwassets/images/default.gif" class="lazyload" > </a> </div> <div class="wmd-width-2-3 wmd-sidebar-article-c"> <div class="wmd-card"> <p class="wmd-margin-small-bottom"> <a href="/itfiles/web/106849.html" target="_blank" class="wmd-display-block wmd-text-truncate">vue父子组件传值不能实时更新的解决方法</a> </p> <div class="wmd-sidebar-article-ch wmd-text-meta wmd-margin-small-top wmd-flex"> <span class="wmd-margin-right"><i class="iconfont icon-rili"></i>2023-07-09</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>279</span> </div> </div> </div> </div> </div> </li> <li class="wmd-margin-remove-top"> <div class="b-b wmd-padding-small"> <div wmd-grid class="wmd-grid-small"> <div class="wmd-width-1-3"> <a href="/itfiles/web/78917.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/imgfile/2207/1-220H51FKO20-lp.png" alt="javascript报错：xxx.foreach is not a function" src="https://www.dedegg.com/xwassets/images/default.gif" class="lazyload" > </a> </div> <div class="wmd-width-2-3 wmd-sidebar-article-c"> <div class="wmd-card"> <p class="wmd-margin-small-bottom"> <a href="/itfiles/web/78917.html" target="_blank" class="wmd-display-block wmd-text-truncate">javascript报错：xxx.foreach is not a function</a> </p> <div class="wmd-sidebar-article-ch wmd-text-meta wmd-margin-small-top wmd-flex"> <span class="wmd-margin-right"><i class="iconfont icon-rili"></i>2022-07-25</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>225</span> </div> </div> </div> </div> </div> </li> </ul> </section> <script src='/adv.php?aid=1' language='javascript'></script> <section class="side-art b-a b-r-4 wmd-background-default wmd-margin-bottom"> <div class="b-b wmd-padding-small wmd-clearfix wmd-flex wmd-flex-middle"> <span class="side-title side-title-style wmd-h5 wmd-float-left wmd-margin-remove wmd-position-relative">编程基础</span> </div> <ul class="wmd-sidebar-double wmd-padding-small wmd-overflow-auto wmd-sidebar-wenzhang wmd-grid" wmd-grid=""> <li class="wmd-margin-remove-top wmd-width-1-2 wmd-first-column"> <a href="/php/" class="wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/2206/1-22062R22353201.png" alt="PHP教程" src="https://imgs.dedegg.com/2206/1-22062R22353201.png" class="b-r-4 ls-is-cached lazyloaded"> <p>学习PHP</p> </a> </li><li class="wmd-margin-remove-top wmd-width-1-2 wmd-first-column"> <a href="/java/" class="wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/2207/1-220F223324U62.png" alt="JAVA教程" src="https://imgs.dedegg.com/2207/1-220F223324U62.png" class="b-r-4 ls-is-cached lazyloaded"> <p>学习JAVA</p> </a> </li><li class="wmd-margin-remove-top wmd-width-1-2 wmd-first-column"> <a href="/aspnet/" class="wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/2207/1-220F2164415D9.png" alt="ASP.NET教程" src="https://imgs.dedegg.com/2207/1-220F2164415D9.png" class="b-r-4 ls-is-cached lazyloaded"> <p>学习ASP.NET</p> </a> </li><li class="wmd-margin-remove-top wmd-width-1-2 wmd-first-column"> <a href="/python/" class="wmd-display-block wmd-overflow-hidden"> <img data-src="https://imgs.dedegg.com/2207/1-220F1110135351.png" alt="Python教程" src="https://imgs.dedegg.com/2207/1-220F1110135351.png" class="b-r-4 ls-is-cached lazyloaded"> <p>学习Python</p> </a> </li> </ul> </section> <section class="side-tag b-r-4 b-a wmd-background-default wmd-margin-bottom"> <div class="b-b wmd-padding-small wmd-flex wmd-flex-middle"> <span class="side-title side-title-style wmd-position-relative">热门标签</span> </div> <ul class="wmd-list tags-item wmd-padding-small wmd-margin-remove"> <a wmd-tooltip="136个相关文章" href='https://www.dedegg.com/itdocs/_177_1.html' title="" target="_blank" class="b-r-4 wmd-text-small"></a> <a wmd-tooltip="22个相关文章" href='https://www.dedegg.com/itdocs/layui_246_1.html' title="layui" target="_blank" class="b-r-4 wmd-text-small">layui</a> <a wmd-tooltip="1个相关文章" href='https://www.dedegg.com/itdocs/treetable_399_1.html' title="treetable" target="_blank" class="b-r-4 wmd-text-small">treetable</a> <a wmd-tooltip="3个相关文章" href='https://www.dedegg.com/itdocs/xialakuang_275_1.html' title="下拉框" target="_blank" class="b-r-4 wmd-text-small">下拉框</a> <a wmd-tooltip="1个相关文章" href='https://www.dedegg.com/itdocs/kebianji_398_1.html' title="可编辑" target="_blank" class="b-r-4 wmd-text-small">可编辑</a> <a wmd-tooltip="54个相关文章" href='https://www.dedegg.com/itdocs/html_1_1.html' title="html" target="_blank" class="b-r-4 wmd-text-small">html</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/img_205_1.html' title="img" target="_blank" class="b-r-4 wmd-text-small">img</a> <a wmd-tooltip="4个相关文章" href='https://www.dedegg.com/itdocs/M_295_1.html' title="M" target="_blank" class="b-r-4 wmd-text-small">M</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/s_300_1.html' title="s" target="_blank" class="b-r-4 wmd-text-small">s</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/tiaozhuan_90_1.html' title="跳转" target="_blank" class="b-r-4 wmd-text-small">跳转</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/lianjie_267_1.html' title="链接" target="_blank" class="b-r-4 wmd-text-small">链接</a> <a wmd-tooltip="16个相关文章" href='https://www.dedegg.com/itdocs/zhimeng_15_1.html' title="织梦" target="_blank" class="b-r-4 wmd-text-small">织梦</a> <a wmd-tooltip="32个相关文章" href='https://www.dedegg.com/itdocs/dedecms_10_1.html' title="dedecms" target="_blank" class="b-r-4 wmd-text-small">dedecms</a> <a wmd-tooltip="1166个相关文章" href='https://www.dedegg.com/itdocs/php_56_1.html' title="php" target="_blank" class="b-r-4 wmd-text-small">php</a> <a wmd-tooltip="10个相关文章" href='https://www.dedegg.com/itdocs/zhengzebiaodashi_70_1.html' title="正则表达式" target="_blank" class="b-r-4 wmd-text-small">正则表达式</a> <a wmd-tooltip="1个相关文章" href='https://www.dedegg.com/itdocs/pipei_397_1.html' title="匹配" target="_blank" class="b-r-4 wmd-text-small">匹配</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/video_396_1.html' title="video" target="_blank" class="b-r-4 wmd-text-small">video</a> <a wmd-tooltip="14个相关文章" href='https://www.dedegg.com/itdocs/mysql_74_1.html' title="mysql" target="_blank" class="b-r-4 wmd-text-small">mysql</a> <a wmd-tooltip="1个相关文章" href='https://www.dedegg.com/itdocs/yuanchenglianjie_395_1.html' title="远程连接" target="_blank" class="b-r-4 wmd-text-small">远程连接</a> <a wmd-tooltip="92个相关文章" href='https://www.dedegg.com/itdocs/guolvqi_394_1.html' title="过滤器" target="_blank" class="b-r-4 wmd-text-small">过滤器</a> <a wmd-tooltip="54个相关文章" href='https://www.dedegg.com/itdocs/jiantingqi_393_1.html' title="监听器" target="_blank" class="b-r-4 wmd-text-small">监听器</a> <a wmd-tooltip="39个相关文章" href='https://www.dedegg.com/itdocs/duojincheng_392_1.html' title="多进程" target="_blank" class="b-r-4 wmd-text-small">多进程</a> <a wmd-tooltip="22个相关文章" href='https://www.dedegg.com/itdocs/tupianshangchuan_391_1.html' title="图片上传" target="_blank" class="b-r-4 wmd-text-small">图片上传</a> <a wmd-tooltip="19个相关文章" href='https://www.dedegg.com/itdocs/wushuaxin_390_1.html' title="无刷新" target="_blank" class="b-r-4 wmd-text-small">无刷新</a> <a wmd-tooltip="808个相关文章" href='https://www.dedegg.com/itdocs/jiazai_389_1.html' title="加载" target="_blank" class="b-r-4 wmd-text-small">加载</a> <a wmd-tooltip="75个相关文章" href='https://www.dedegg.com/itdocs/jdk_388_1.html' title="jdk" target="_blank" class="b-r-4 wmd-text-small">jdk</a> <a wmd-tooltip="154个相关文章" href='https://www.dedegg.com/itdocs/Socket_387_1.html' title="Socket" target="_blank" class="b-r-4 wmd-text-small">Socket</a> <a wmd-tooltip="7个相关文章" href='https://www.dedegg.com/itdocs/xunhuanyuju_386_1.html' title="循环语句" target="_blank" class="b-r-4 wmd-text-small">循环语句</a> <a wmd-tooltip="35个相关文章" href='https://www.dedegg.com/itdocs/paixusuanfa_383_1.html' title="排序算法" target="_blank" class="b-r-4 wmd-text-small">排序算法</a> <a wmd-tooltip="8个相关文章" href='https://www.dedegg.com/itdocs/maopaopaixu_385_1.html' title="冒泡排序" target="_blank" class="b-r-4 wmd-text-small">冒泡排序</a> <a wmd-tooltip="2个相关文章" href='https://www.dedegg.com/itdocs/fangdaolian_384_1.html' title="防盗链" target="_blank" class="b-r-4 wmd-text-small">防盗链</a> <a wmd-tooltip="4个相关文章" href='https://www.dedegg.com/itdocs/caiji_67_1.html' title="采集" target="_blank" class="b-r-4 wmd-text-small">采集</a> <a wmd-tooltip="44个相关文章" href='https://www.dedegg.com/itdocs/xialacaidan_322_1.html' title="下拉菜单" target="_blank" class="b-r-4 wmd-text-small">下拉菜单</a> <a wmd-tooltip="28个相关文章" href='https://www.dedegg.com/itdocs/smarty_382_1.html' title="smarty" target="_blank" class="b-r-4 wmd-text-small">smarty</a> <a wmd-tooltip="3个相关文章" href='https://www.dedegg.com/itdocs/xitongrizhi_381_1.html' title="系统日志" target="_blank" class="b-r-4 wmd-text-small">系统日志</a> <a wmd-tooltip="69个相关文章" href='https://www.dedegg.com/itdocs/shujujiegou_380_1.html' title="数据结构" target="_blank" class="b-r-4 wmd-text-small">数据结构</a> <a wmd-tooltip="59个相关文章" href='https://www.dedegg.com/itdocs/xigouhanshu_379_1.html' title="析构函数" target="_blank" class="b-r-4 wmd-text-small">析构函数</a> <a wmd-tooltip="79个相关文章" href='https://www.dedegg.com/itdocs/suijishu_241_1.html' title="随机数" target="_blank" class="b-r-4 wmd-text-small">随机数</a> <a wmd-tooltip="209个相关文章" href='https://www.dedegg.com/itdocs/digui_378_1.html' title="递归" target="_blank" class="b-r-4 wmd-text-small">递归</a> <a wmd-tooltip="1个相关文章" href='https://www.dedegg.com/itdocs/Referer_376_1.html' title="Referer" target="_blank" class="b-r-4 wmd-text-small">Referer</a> </ul> </section> </div> </div> </div> </div>  </section> </main> <div class="wmd-app-gotop gotops wmd-hidden@s" id="gotops"> <a href="#header" class="wmd-display-block" wmd-scroll> <i class="iconfont icon-arrow-up"></i> </a> </div> <footer class="footer wmd-background-secondary"> <div class="foot wmd-container wmd-padding"> <div class="wmd-grid" wmd-grid> <div class="wmd-width-1-1@s wmd-width-1-3@xl"> <div class="foot-item foot-item-first wmd-position-relative"> <a href="" target="_blank" class="foot-logo wmd-display-block"><img src="https://www.dedegg.com/xwassets/images/flogo.png"></a> <p class="wmd-text-small">织梦狗教程网是一个专为初学者打造的前端开发和软件编程的学习网站，可以为编程者和程序员提供海量技术文档,以便编程初学者快速入门，提升开发技术水平和工作效率。</p> </div> </div> <div class="wmd-width-2-3 wmd-visible@s"> <div class="wmd-grid" wmd-grid> <div class="wmd-width-1-3"> <div class="foot-item"> <div class="foot-item-title"><i class="iconfont icon-anquan"></i>编程基础</div> <ul class="wmd-padding-remove"> <li><a href="/acode_h/" target="_blank"> HTML/CSS</a></li><li><a href="/acode_js/" target="_blank"> JAVASCRIPT</a></li><li><a href="/acode_php/" target="_blank"> PHP</a></li><li><a href="/acode_java/" target="_blank"> JAVA</a></li><li><a href="/acode_net/" target="_blank"> ASP.NET</a></li><li><a href="/acode_python/" target="_blank"> Python</a></li> </ul> </div> </div> <div class="wmd-width-1-3"> <div class="foot-item"> <div class="foot-item-title"><i class="iconfont icon-anquan"></i>编程教程</div> <ul class="wmd-padding-remove"><li><a href="/itstudy/" target="_blank">编程基础</a></li><li><a href="/itfiles/" target="_blank">编程教程</a></li><li><a href="/itask/" target="_blank">编程问答</a></li><li><a href="/itexp/" target="_blank">实例代码</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="foot-cop"> <div class="wmd-container wmd-padding-small wmd-clearfix"> <div class="wmd-float-left"> <span>© 2023-2024 织梦狗教程网版权所有并保留所有权</span> <a class="wmd-margin-small-right" href="https://www.dedegg.com/sitemap.xml" target="_blank"><i class="iconfont icon-location-fill" aria-hidden="true"></i> 网站地图</a> <span class="wmd-margin-small-right"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer nofollow">ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow" style="color:#bbb">粤ICP备20019714号</a></a></span> </div> </div> </div> <script type='text/javascript' src='https://www.dedegg.com/xwassets/js/jquery.cookie.js'></script> </footer>  <div class="wmd-app-footer-fixed wmd-app-footer wmd-hidden@s"> <a href="https://www.dedegg.com"> <span class="icon"> <i class="iconfont icon-home"></i> </span> <span class="text">网站首页</span> </a> <a href="/acode_h/"> <span class="icon"> <i class="iconfont icon-read-fill"></i> </span> <span class="text">HTML/CSS</span> </a> <a class="cat" wmd-toggle="target: #mob-nav"> <span class="icon"> <i class="iconfont icon-all"></i> </span> <span class="text">菜单</span> </a> <a href="/layui/"> <span class="icon"> <i class="iconfont icon-dropbox"></i> </span> <span class="text">Layui</span> </a> <a href="/yii2/"> <span class="icon"> <i class="iconfont icon-appstore-fill"></i> </span> <span class="text">Yii2</span> </a> </div> <div id="mob-nav" wmd-offcanvas> <div class="wmd-offcanvas-bar wmd-background-default wmd-box-shadow-small wmd-mobnav-box"> <div class="mob-nav"> <div class="wmd-margin-small-bottom wmd-text-center"> <a href="https://www.dedegg.com" class="logo wmd-display-inline-block wmd-margin-bottom"><img src="/xwassets/images/logo.png"></a> </div> <ul class="nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home"><a href="https://www.dedegg.com">网站首页</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_h/">HTML/CSS</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/shtml/">HTML</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/html5/">HTML5</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/css/">CSS</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/css3/">CSS3</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/saas/">Sass</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/layui/">Layui</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/bootstrap3/">Bootstrap3</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/bootstrap4/">Bootstrap4</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/bootstrap5/">Bootstrap5</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/appml/">AppML</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/awesome/">Font Awesome</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/foundation5/">Foundation5</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_js/">JAVASCRIPT</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/javascript/">JavaScript</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/jquery/">jQuery</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/angularjs/">AngularJS</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/angularjs2/">AngularJS2</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/vue/">Vue.js</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/vue3/">Vue3</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/react/">React</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/typescript/">TypeScript</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/easyui/">EasyUI</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/node/">Node.js</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/ajax/">AJAX</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/json/">JSON</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/echarts/">Echarts</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/highcharts/">Highcharts</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_php/">PHP</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/php/">PHP</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/laravel/">Laravel</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/cakephp/">CakePHP</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/codeigniter/">CodeIgniter</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/zend/">Zend</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/symfony/">Symfony</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/yii2/">Yii2</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/phalcon/">Phalcon</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/thinkphp/">ThinkPHP</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/smarty/">Smarty</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_java/">JAVA</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/java/">JAVA</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/spring/">Spring</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/hibernate/">Hibernate</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/struts/">Struts</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/play/">Play</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/toolkit/">GWT</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/jsp/">Jsp</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/maven/">Maven</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/servlet/">Servlet</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_net/">ASP.NET</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/aspnet/">ASP.NET</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/csharp/">C#</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/webpages/">Web Pages</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/razor/">Razor</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/mvc/">MVC</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/webforms/">Web Forms</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_python/">Python</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/python/">Python</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/python3/">Python 3</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/django/">Django</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_go/">Go</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/go/">Go</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/docker/">Docker</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/beego/">Beego</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/buffalo/">Buffalo</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/echo/">Echo</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/gin/">Gin</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/iris/">Iris</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/revel/">Revel</a></li> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/ruby/">Ruby</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/c/">C</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/cplus/">C++</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/perl/">Perl</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/lua/">Lua</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/rust/">Rust</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/scala/">Scala</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/vb/">VB</a> <ul class="sub-menu" style='display:none;'> </ul> </li><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children "><a href="/acode_m/">移动端</a> <ul class="sub-menu" > <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/android/">Android</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/swift/">Swift</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/ionic/">ionic</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/kotlin/">Kotlin</a></li><li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/harmonyos/">HarmonyOS</a></li> </ul> </li> </ul></div> </div> </div> </div> <script type='text/javascript' src='https://www.dedegg.com/xwassets/js/index.js'></script> <style> .night .wmd-logo-nav-night{ background: url(https://www.dedegg.com/xwassets/images/flogo.png) no-repeat!important; background-size: 150px auto; } .night .wmd-app-logo2{ background: url(https://www.dedegg.com/xwassets/images/flogo.png) no-repeat!important; background-size: 92px auto!important; } #canvas { position: absolute; left: 0; top: 0; } </style> <script src="https://www.dedegg.com/xwassets/js/highlight.min.js?v=1"></script> <script src="https://www.dedegg.com/xwassets/js/prism.min.js?v=1"></script> <script src="https://www.dedegg.com/xwassets/js/prism.js?v=1"></script> </body> </html>