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.womengda.cn/itech/web/125338.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.womengda.cn/itech/web/125338.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.womengda.cn/itech/web/125338.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.womengda.cn/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='/itech/web/125337.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='/itech/web/125339.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="/htmls/" target="_blank" class="cover wmd-display-block wmd-overflow-hidden "> <img data-src="https://pic.womengda.cn/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="/htmls/" 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://pic.womengda.cn/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://pic.womengda.cn/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://pic.womengda.cn/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://pic.womengda.cn/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://pic.womengda.cn/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://pic.womengda.cn/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://pic.womengda.cn/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="/itech/web/93211.html" target="_blank" >简单实体类和xml文件的相互转换方法</a> <span>2023-02-14</span> </li> <li> <a href="/itech/web/120089.html" target="_blank" >css3 transform属性详解</a> <span>2024-01-25</span> </li> <li> <a href="/itech/web/114283.html" target="_blank" >使用php jquery ajax从mysql获取图像并在DIV中的html页面中显示它们</a> <span>2023-10-26</span> </li> <li> <a href="/itech/web/124418.html" target="_blank" >微信小程序自定义头部导航栏(组件化)</a> <span>2024-04-01</span> </li> <li> <a href="/itech/web/93216.html" target="_blank" >AJAX应用实例之检测用户名是否唯一(实例代码)</a> <span>2023-02-14</span> </li> <li> <a href="/itech/web/124875.html" target="_blank" >yii gridview实现时间段筛选功能</a> <span>2024-04-08</span> </li> <li> <a href="/itech/web/121157.html" target="_blank" >blob转换成string格式同步调用问题解决分析</a> <span>2024-02-10</span> </li> <li> <a href="/itech/web/122910.html" target="_blank" >页面图片浮动左右滑动效果的简单实现案例</a> <span>2024-03-09</span> </li> <li> <a href="/itech/web/118796.html" target="_blank" >js前端获取用户位置及ip属地信息</a> <span>2024-01-04</span> </li> <li> <a href="/itech/web/119971.html" target="_blank" >一步步教大家编写酷炫的导航栏js+css实现</a> <span>2024-01-23</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-04-16</span> <a href="/itech/web/125337.html" target="_blank" class="wmd-display-block">JS中LocalStorage与SessionStorage五种循序渐进的使用方法</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-04-15</span> <a href="/itech/web/125336.html" target="_blank" class="wmd-display-block">jquery中cookie用法实例详解(获取,存储,删除等)</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-04-15</span> <a href="/itech/web/125335.html" target="_blank" class="wmd-display-block">用js+cookie记录滚动条位置</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-04-15</span> <a href="/itech/web/125334.html" target="_blank" class="wmd-display-block">常见的浏览器存储方式（cookie、localStorage、sessionStorage）</a> </li> <li class="wmd-margin-small-bottom wmd-position-relative"> <span>2024-04-15</span> <a href="/itech/web/125333.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="/itech/web/83903.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://pic.womengda.cn/imgfile/2211/1-2211011GR2209-simg.png" alt="怎么查看Iconfont字体有哪些图标和编码" src="https://www.womengda.cn/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="/itech/web/83903.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-02</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>1555</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="/itech/web/80817.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://pic.womengda.cn/imgfile/2209/1B363D93500P-1cc.jpg" alt="HTML怎么设置下划线?html文字加下划线方法" src="https://www.womengda.cn/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="/itech/web/80817.html" target="_blank" class="wmd-display-block wmd-text-truncate">HTML怎么设置下划线?html文字加下划线方法</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-09-21</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>1316</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="/itech/web/84946.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://pic.womengda.cn/imgfile/2211/1BPH2Y40930-133308.png" alt="实现css文字垂直居中的8种方法" src="https://www.womengda.cn/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="/itech/web/84946.html" target="_blank" class="wmd-display-block wmd-text-truncate">实现css文字垂直居中的8种方法</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-13</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>843</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="/itech/web/79040.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://pic.womengda.cn/imgfile/2208/1B1S11b22F-SI9.jpg" alt="uniapp打包成微信小程序的详细过程" src="https://www.womengda.cn/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="/itech/web/79040.html" target="_blank" class="wmd-display-block wmd-text-truncate">uniapp打包成微信小程序的详细过程</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-08-31</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>694</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="/itech/web/79052.html" class="side-art-cover b-r-4 wmd-display-block wmd-overflow-hidden"> <img data-src="https://pic.womengda.cn/imgfile/2208/1B1S1244c230-1G0X.png" alt="微信小程序使用uni-app开发小程序及部分功能实现" src="https://www.womengda.cn/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="/itech/web/79052.html" target="_blank" class="wmd-display-block wmd-text-truncate">微信小程序使用uni-app开发小程序及部分功能实现</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-08-31</span> <span class="wmd-margin-right wmd-flex wmd-flex-middle"><i class="iconfont iconfont icon-yanjing"></i>567</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://pic.womengda.cn/2206/1-22062R22353201.png" alt="PHP教程" src="https://pic.womengda.cn/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://pic.womengda.cn/2207/1-220F223324U62.png" alt="JAVA教程" src="https://pic.womengda.cn/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://pic.womengda.cn/2207/1-220F2164415D9.png" alt="ASP.NET教程" src="https://pic.womengda.cn/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://pic.womengda.cn/2207/1-220F1110135351.png" alt="Python教程" src="https://pic.womengda.cn/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="91个相关文章" href='https://www.womengda.cn/items/_392_1.html' title="" target="_blank" class="b-r-4 wmd-text-small"></a> <a wmd-tooltip="23个相关文章" href='https://www.womengda.cn/items/layui_246_1.html' title="layui" target="_blank" class="b-r-4 wmd-text-small">layui</a> <a wmd-tooltip="1个相关文章" href='https://www.womengda.cn/items/treetable_394_1.html' title="treetable" target="_blank" class="b-r-4 wmd-text-small">treetable</a> <a wmd-tooltip="3个相关文章" href='https://www.womengda.cn/items/xialakuang_275_1.html' title="下拉框" target="_blank" class="b-r-4 wmd-text-small">下拉框</a> <a wmd-tooltip="1个相关文章" href='https://www.womengda.cn/items/kebianji_393_1.html' title="可编辑" target="_blank" class="b-r-4 wmd-text-small">可编辑</a> <a wmd-tooltip="40个相关文章" href='https://www.womengda.cn/items/html_1_1.html' title="html" target="_blank" class="b-r-4 wmd-text-small">html</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/img_205_1.html' title="img" target="_blank" class="b-r-4 wmd-text-small">img</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/tiaozhuan_90_1.html' title="跳转" target="_blank" class="b-r-4 wmd-text-small">跳转</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/lianjie_267_1.html' title="链接" target="_blank" class="b-r-4 wmd-text-small">链接</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/word_240_1.html' title="word" target="_blank" class="b-r-4 wmd-text-small">word</a> <a wmd-tooltip="32个相关文章" href='https://www.womengda.cn/items/dedecms_10_1.html' title="dedecms" target="_blank" class="b-r-4 wmd-text-small">dedecms</a> <a wmd-tooltip="16个相关文章" href='https://www.womengda.cn/items/zhimeng_15_1.html' title="织梦" target="_blank" class="b-r-4 wmd-text-small">织梦</a> <a wmd-tooltip="71个相关文章" href='https://www.womengda.cn/items/php_56_1.html' title="php" target="_blank" class="b-r-4 wmd-text-small">php</a> <a wmd-tooltip="12个相关文章" href='https://www.womengda.cn/items/zhengzebiaodashi_70_1.html' title="正则表达式" target="_blank" class="b-r-4 wmd-text-small">正则表达式</a> <a wmd-tooltip="3个相关文章" href='https://www.womengda.cn/items/pipei_289_1.html' title="匹配" target="_blank" class="b-r-4 wmd-text-small">匹配</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/video_391_1.html' title="video" target="_blank" class="b-r-4 wmd-text-small">video</a> <a wmd-tooltip="140个相关文章" href='https://www.womengda.cn/items/kuayuwenti_390_1.html' title="跨域问题" target="_blank" class="b-r-4 wmd-text-small">跨域问题</a> <a wmd-tooltip="4个相关文章" href='https://www.womengda.cn/items/qukuailian_389_1.html' title="区块链" target="_blank" class="b-r-4 wmd-text-small">区块链</a> <a wmd-tooltip="35个相关文章" href='https://www.womengda.cn/items/dingshirenwu_388_1.html' title="定时任务" target="_blank" class="b-r-4 wmd-text-small">定时任务</a> <a wmd-tooltip="1个相关文章" href='https://www.womengda.cn/items/ziyuanyingshe_387_1.html' title="资源映射" target="_blank" class="b-r-4 wmd-text-small">资源映射</a> <a wmd-tooltip="88个相关文章" href='https://www.womengda.cn/items/shejimoshi_386_1.html' title="设计模式" target="_blank" class="b-r-4 wmd-text-small">设计模式</a> <a wmd-tooltip="7个相关文章" href='https://www.womengda.cn/items/dailimoshi_385_1.html' title="代理模式" target="_blank" class="b-r-4 wmd-text-small">代理模式</a> <a wmd-tooltip="15个相关文章" href='https://www.womengda.cn/items/EasyExcel_384_1.html' title="EasyExcel" target="_blank" class="b-r-4 wmd-text-small">EasyExcel</a> <a wmd-tooltip="2个相关文章" href='https://www.womengda.cn/items/yunxingyuanli_383_1.html' title="运行原理" target="_blank" class="b-r-4 wmd-text-small">运行原理</a> <a wmd-tooltip="14个相关文章" href='https://www.womengda.cn/items/guibingpaixu_382_1.html' title="归并排序" target="_blank" class="b-r-4 wmd-text-small">归并排序</a> <a wmd-tooltip="88个相关文章" href='https://www.womengda.cn/items/paixusuanfa_359_1.html' title="排序算法" target="_blank" class="b-r-4 wmd-text-small">排序算法</a> <a wmd-tooltip="9个相关文章" href='https://www.womengda.cn/items/xierpaixu_381_1.html' title="希尔排序" target="_blank" class="b-r-4 wmd-text-small">希尔排序</a> <a wmd-tooltip="25个相关文章" href='https://www.womengda.cn/items/kuaisupaixu_380_1.html' title="快速排序" target="_blank" class="b-r-4 wmd-text-small">快速排序</a> <a wmd-tooltip="21个相关文章" href='https://www.womengda.cn/items/maopaopaixu_361_1.html' title="冒泡排序" target="_blank" class="b-r-4 wmd-text-small">冒泡排序</a> <a wmd-tooltip="10个相关文章" href='https://www.womengda.cn/items/jingdiansuanfa_379_1.html' title="经典算法" target="_blank" class="b-r-4 wmd-text-small">经典算法</a> <a wmd-tooltip="16个相关文章" href='https://www.womengda.cn/items/Nacos_378_1.html' title="Nacos" target="_blank" class="b-r-4 wmd-text-small">Nacos</a> <a wmd-tooltip="28个相关文章" href='https://www.womengda.cn/items/duixiangzhuanhuan_377_1.html' title="对象转换" target="_blank" class="b-r-4 wmd-text-small">对象转换</a> <a wmd-tooltip="267个相关文章" href='https://www.womengda.cn/items/Springboot_335_1.html' title="Springboot" target="_blank" class="b-r-4 wmd-text-small">Springboot</a> <a wmd-tooltip="14个相关文章" href='https://www.womengda.cn/items/mysql_74_1.html' title="mysql" target="_blank" class="b-r-4 wmd-text-small">mysql</a> <a wmd-tooltip="1个相关文章" href='https://www.womengda.cn/items/yuanchenglianjie_376_1.html' title="远程连接" target="_blank" class="b-r-4 wmd-text-small">远程连接</a> <a wmd-tooltip="92个相关文章" href='https://www.womengda.cn/items/guolvqi_375_1.html' title="过滤器" target="_blank" class="b-r-4 wmd-text-small">过滤器</a> <a wmd-tooltip="47个相关文章" href='https://www.womengda.cn/items/jiantingqi_374_1.html' title="监听器" target="_blank" class="b-r-4 wmd-text-small">监听器</a> <a wmd-tooltip="39个相关文章" href='https://www.womengda.cn/items/duojincheng_373_1.html' title="多进程" target="_blank" class="b-r-4 wmd-text-small">多进程</a> <a wmd-tooltip="23个相关文章" href='https://www.womengda.cn/items/tupianshangchuan_372_1.html' title="图片上传" target="_blank" class="b-r-4 wmd-text-small">图片上传</a> <a wmd-tooltip="21个相关文章" href='https://www.womengda.cn/items/wushuaxin_371_1.html' title="无刷新" target="_blank" class="b-r-4 wmd-text-small">无刷新</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.womengda.cn/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="/program/" target="_blank">编程基础</a></li><li><a href="/itech/" target="_blank">编程技术</a></li><li><a href="/ask/" target="_blank">编程问答</a></li><li><a href="/demo/" 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.womengda.cn/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备14083021号</a></a></span> </div> </div> </div> <script type='text/javascript' src='https://www.womengda.cn/xwassets/js/jquery.cookie.js'></script> </footer>  <div class="wmd-app-footer-fixed wmd-app-footer wmd-hidden@s"> <a href="https://www.womengda.cn"> <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.womengda.cn" 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.womengda.cn">网站首页</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="/htmls/">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.womengda.cn/xwassets/js/index.js'></script> <style> .night .wmd-logo-nav-night{ background: url(https://www.womengda.cn/xwassets/images/flogo.png) no-repeat!important; background-size: 150px auto; } .night .wmd-app-logo2{ background: url(https://www.womengda.cn/xwassets/images/flogo.png) no-repeat!important; background-size: 92px auto!important; } #canvas { position: absolute; left: 0; top: 0; } </style> <script src="https://www.womengda.cn/xwassets/js/highlight.min.js?v=1"></script> <script src="https://www.womengda.cn/xwassets/js/prism.min.js?v=1"></script> <script src="https://www.womengda.cn/xwassets/js/prism.js?v=1"></script> </body> </html>