[jQuery基础] jQuery案例 -- 狂拍灰太狼

最新推荐文章于 2022-01-10 16:31:49 发布
最新推荐文章于 2022-01-10 16:31:49 发布
阅读量741 收藏 9
点赞数 3
分类专栏： jQuery 文章标签： css js html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeathDomain/article/details/106862094
版权

狂拍灰太狼(补充音效)

案例效果展示

在这里插入图片描述
 

案例构架

1.背景图片
2.得分选项
3.时间进度条
4.游戏规则的点开以及关闭
5.开始游戏选项和重新开始选项

 
 
 

案例思路

  • 布局html页面的基本样式
    • 设置得分
    • 设置时间进度条
    • 设置开始游戏按键
    • 设置游戏规则框架
    • 设置游戏规则
    • 设置 game over 和 重新开始按键
  • 设置这个游戏的基本规则
    • 1.游戏时间:60s
    • 2.拼手速,殴打灰太狼+10分
    • 3.殴打小灰灰-10分

接下来开始正题,js的基本实现过程

  • 监听点击时的效果

    • 从游戏效果上看在开始游戏和重新游戏的时候会有图片的淡入淡出效果,在点击游戏规则和关闭上也会有淡入和淡出的效果
      // 1.监听游戏规则的点击
$(".rules").click(function (e) {
    // 淡入 -- fadeIN()
    $(".rule").stop().fadeIn(100);
});

// 2.监听关闭按钮的点击
$(".close").click(function (e) {
    // 淡出 -- fadeOUt()
    $(".rule").stop().fadeOut(100);
});

// 3.监听开始游戏按钮的点击
$(".start").click(function (e) {
    // 开始游戏后实现游戏规则淡出效果
    $(this).stop().fadeOut(100);
});

// 4.监听重新开始按钮的点击
$(".reStart").click(function () {
    // 点击开始让重新开始界面淡出消失
    $(".mask").stop().fadeOut(100);
});
    • 接下来要开始处理进度条结束后的问题,我们可以看到在进度条结束后出现的重新开始以及在我们点击重新开始的时候要保证进度条是满的(也就是说要保证在点击之后width:180)
      $(".progress").css({
	width: 180,
});
    • 在进度条的基础上还要保证在重新开始点击按钮是得分为0
      $(".score").text(0);

  • 我们先解决进度条得问题

    • 重新设置进度条的宽度 – 保证每一次点击开始游戏时进度条的宽度都是180px
      $(".progress").css({
    width: 180,
});
    • 开启定时器处理进度条的问题
      • 首先要拿到当前进度条的宽度
        var progressWidth = $(".progress").width();
      • 减少当前的宽度
        progressWidth -= 1;
      • 其次重新给进度条赋值一个宽度
        $(".progress").css({
    width: progressWidth,
});
      • 然后也是主要的判断进度条是否走完
        • 确认进度条已经走完时,要关闭定时器
          clearInterval(timer);
        • 重新显示开始界面 – 让game over 和重新开始界面淡入
          $(".mask").stop().fadeIn(100);

  • 接下来我们要开始处理灰太狼和小灰灰的动画问题

    • 我们发现有小灰灰和灰太狼两种不同的图片,所以我们可以先定义两个数组,分别命名为wolf_1和wolf_2,将灰太狼和小灰灰的图片分别放在这两个数组中

      var wolf_1 = [
	"./images/h0.png",
    "./images/h1.png",
    "./images/h2.png",
    "./images/h3.png",
    "./images/h4.png",
    "./images/h5.png",
    "./images/h6.png",
    "./images/h7.png",
    "./images/h8.png",
    "./images/h9.png",
];
var wolf_2 = [
    "./images/x0.png",
    "./images/x1.png",
    "./images/x2.png",
    "./images/x3.png",
    "./images/x4.png",
    "./images/x5.png",
    "./images/x6.png",
    "./images/x7.png",
    "./images/x8.png",
    "./images/x9.png",
];

    • 其次要保存一个数组中图片可能出现的所有位置

      var arrPos = [
    { left: "100px", top: "115px" },
    { left: "20px", top: "160px" },
    { left: "190px", top: "142px" },
    { left: "105px", top: "193px" },
    { left: "19px", top: "221px" },
    { left: "202px", top: "212px" },
    { left: "120px", top: "275px" },
    { left: "30px", top: "295px" },
    { left: "209px", top: "297px" },
];

    • 接下来我们要先创建一个图片,然后随机获取到图片的位置(向上取整,四舍五入)

      // 3.创建一个图片
var $wolfImage = $("<img src='' class='wolfImage'>");
// 随机获取图片的位置
var posIndex = Math.round(Math.random() * 8);

      向上取整,四舍五入
      0 * 8 = 0 == 0
      0.1* 8 = 0.8 == 1
      0.2* 8 = 1.6 == 2
      0.3* 8 = 2.4 == 2
      0.4* 8 = 3.2 == 3
      0.5* 8 = 4.0 == 4
      0.6* 8 = 4.8 == 5
      0.7* 8 = 5.6 == 6
      0.8* 8 = 6.4 == 6
      0.9* 8 = 7.2 == 7
      1* 8 = 8 == 8

    • 然后要设置图片显示的位置,利用随机位置实现随机图片的效果(判断是否等于0?等于0为wolf_1,等于1为wolf_2)

      var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;

    • 之后要设置图片的内容

      window.wolfIndex = 0;
window.wolfIndexEnd = 5;
      • 设置每隔一段时间切换一张图片效果
        • 判断图片是否到第五张
          • 到了第五张图片要删除图片
            $wolfImage.remove();
          • 关闭定时器
            clearInterval(wolfTimer);
          • 然后动画做完之后继续调用做下一个动画
            startWolfAnimation();

  • 之后在我们重新开始游戏后,让定时器再次开始,保证图片能够重新获取到显示的位置

    $(".container").append($wolfImage);

  • 然后我们要实现加分减分的过程

    • 首先能够想到的就是要保证图片能够点击一次,不可能要点击一次图片就让分数加一次
      • 修改索引
        indow.wolfIndex = 5;
window.wolfIndexEnd = 9;
      • 拿到当前点击图片的地址
        var $src = $(this).attr("src");
      • 根据图片地址判断是否是灰太狼
        var flag = $src.indexOf("h") >= 0;
      • 根据点击的图片类型增减分数
        if(flag){
    // +10
    $(".score").text(parseInt($(".score").text()) + 10);
}else{
    // -10
    $(".score").text(parseInt($(".score").text()) - 10);
}

  • 最后我们要保证在进度条为0后要停止灰太狼和小灰灰的动画

    • 要删除图片
      $(".wolfImage").remove();
    • 然后关掉定时器
      clearInterval(wolfTimer);

  • 补充(加入音效效果)

    • 在开始点击以及重新开始的时候播放音乐
    • 在游戏结束后音效自动停止
      // 开始动画时的音乐
function startmusic(){
    var $music = $("<audio src='./我爱平底锅.mp3' loop='loop' autoplay='autoplay'></audio>")
    $(".music").append($music)
}
// 游戏结束的关闭动画
function stopmusic(){
    $(".music").empty()
}

之后还有一些零碎的细节要处理

  • 比如要在点击重新开始按钮点击的时候要保证让开始游戏方法运作
  • 比如在获取随机图片位置的时候保证是向上取整,四舍五入
  • 比如在游戏点击灰太狼和小灰灰的时候出现的击打效果和加分效果

 
 
 

效果拆解

开始游戏界面

在这里插入图片描述
 

重新游戏界面

在这里插入图片描述
 

游戏规则界面

在这里插入图片描述

 

游戏加分减分

在这里插入图片描述

 

时间进度条

在这里插入图片描述

 
 
 
 

图片地址

链接：https://pan.baidu.com/s/1DUDiSNI2vrFO8vkqQt9qGQ
提取码：nkm9

 
 
 
 

代码展示

  • html部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 主体 -->
    <div class="container">
        <!-- 设置得分 -- 默认为0 -->
        <h1 class="score">0</h1>
        <!-- 设置时间的进度条 -->
        <div class="progress"></div>
        <!-- 设置开始游戏 -->
        <button class="start">开始游戏</button>
        <!-- 设置最下面的游戏规则的框架 -->
        <div class="rules">游戏规则</div>
        <!-- 设置最下面的游戏规则 -- 默认隐藏 -->
        <div class="rule">
            <p>游戏规则:</p>
            <p>1.游戏时间:60s</p>
            <p>2.拼手速,殴打灰太狼+10分</p>
            <p>3.殴打小灰灰-10分</p>
            <a href="#" class="close">[关闭]</a>
        </div>
        <!-- 设置输了的game over和重新开始 -- 默认不显示-->
        <div class="mask">
            <h1>GAME OVER</h1>
            <button class="reStart">重新开始</button>
        </div>
    </div>
</body>
</html>

 
 

  • css部分
*{
    margin: 0;
    padding: 0;
}
/* 主体 */
.container{
    width: 320px;
    height: 480px;
    background: url("../images/game_bg.jpg") no-repeat 0 0;
    margin: 50px auto;
    position: relative;
}
/* 设置得分 */
.container>h1{
    color: white;
    margin-left: 60px;
}

/* 设置时间的进度条 */
.container>.progress{
    width: 180px;
    height: 16px;
    background: url("../images/progress.png") no-repeat 0 0;
    position: absolute;
    top: 66px;
    left: 63px;
}

/* 设置开始游戏 */
.container>.start{
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: white;
    background: linear-gradient(#E55C3D,#C50000);
    border-radius: 20px;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    cursor: pointer;
}

/* 设置最下面的游戏规则的框架 */
.container>.rules{
    width: 100%;
    height: 20px;
    background: #ccc;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
}

/* 设置最下面的游戏规则 */
.container>.rule{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    cursor: pointer;
}

/* 设置规则的字体颜色和大小 */
.rule>p{
    line-height: 50px;
    color: white;
}
.rule>a{
    color: red;
}

/* 设置输了的game over 和 重新开始 */
.container>.mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 200px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    cursor: pointer;
}

/* 设置game over的颜色、大小和阴影 */
.mask>h1{
    color: #ff4500;
    text-shadow: 3px 3px 0 #fff;
    font-size: 40px;
}

/* 设置重新开始按钮 */
.mask>button{
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: white;
    background: linear-gradient(#74ACCF,#007DDC);
    border-radius: 20px;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    cursor: pointer;
}

 
 

  • js部分
// 先做游戏规则
// 确保开始游戏和重新游戏时规则的淡入淡出问题
// 处理进度条在结束后出现重新开始,以及在点击重新开始时保证时间的进度条是满的(width:180)
// 开始处理灰太狼和小灰灰的动画问题
// 分别处理灰太狼和小灰灰的图片(放在两个数组内)
// 获取到图片的不同位置
// 随机获取到图片的位置
// 随机获取两组数组中的位置
// 利用随机位置实现随机图片效果
// 实现每隔一段时间切换一张图片
// 判断是否到了第五张图片,到了删掉,关掉定时器,然后动画做完之后继续调用做下一个动画
// 在重新开始游戏后,让定时器重新开始,图片重新获取位置显示
// 实现加分减分
// 拿到点击图片的地址,进行判断,辨别是否是灰太狼

$(function () {
    // 1.监听游戏规则的点击
    $(".rules").click(function (e) {
        // 淡入 -- fadeIN()
        $(".rule").stop().fadeIn(100);
    });

    // 2.监听关闭按钮的点击
    $(".close").click(function (e) {
        // 淡出 -- fadeOUt()
        $(".rule").stop().fadeOut(100);
    });

    // 3.监听开始游戏按钮的点击
    $(".start").click(function (e) {
        // 开始游戏后实现游戏规则淡出效果
        $(this).stop().fadeOut(100);
        // 调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法
        startWolfAnimation();
        // 开始播放音乐按钮
        startmusic()
    });

    // 4.监听重新开始按钮的点击
    $(".reStart").click(function () {
        // 得分重置为0
        $(".score").text(0);
        // 点击开始让重新开始界面淡出消失
        $(".mask").stop().fadeOut(100);
        // 调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法 -- 点击重新开始游戏后,让开始游戏方法运作
        startWolfAnimation();
        // 开始播放音乐按钮
        startmusic()
    });

    // 定义一个专门处理进度条的方法
    function progressHandler() {
        // 重新设置进度条的宽度 -- 保证每一次点击开始游戏时进度条的宽度都是180px
        $(".progress").css({
            width: 180,
        });
        // 开启定时器处理进度条
        var timer = setInterval(function () {
            // 拿到进度条当前的宽度
            var progressWidth = $(".progress").width();
            // 减少当前的宽度
            progressWidth -= 1;
            // 重新给进度条赋值宽度
            $(".progress").css({
                width: progressWidth,
            });
            // 监听进度条是否走完
            if (progressWidth <= 0) {
                // 关闭定时器 -- 确认进度条已经走完
                clearInterval(timer);
                // 显示重新开始界面 -- 让game over 和重新开始界面淡入
                $(".mask").stop().fadeIn(100);
                // 进度条归0后停止灰太狼的动画
                stopWolfAnimation();
                // 停止背景音乐
                stopmusic()
            }
        }, 100);
        return timer;
    }

    var wolfTimer;
    // 定义一个专门处理灰太狼动画的方法
    function startWolfAnimation() {
        // 1.定义两个数组分别保存灰太狼和小灰灰的图片
        var wolf_1 = [
            "./images/h0.png",
            "./images/h1.png",
            "./images/h2.png",
            "./images/h3.png",
            "./images/h4.png",
            "./images/h5.png",
            "./images/h6.png",
            "./images/h7.png",
            "./images/h8.png",
            "./images/h9.png",
        ];
        var wolf_2 = [
            "./images/x0.png",
            "./images/x1.png",
            "./images/x2.png",
            "./images/x3.png",
            "./images/x4.png",
            "./images/x5.png",
            "./images/x6.png",
            "./images/x7.png",
            "./images/x8.png",
            "./images/x9.png",
        ];

        // 2.定义一个数组保存所有可能出现的位置
        var arrPos = [
            { left: "100px", top: "115px" },
            { left: "20px", top: "160px" },
            { left: "190px", top: "142px" },
            { left: "105px", top: "193px" },
            { left: "19px", top: "221px" },
            { left: "202px", top: "212px" },
            { left: "120px", top: "275px" },
            { left: "30px", top: "295px" },
            { left: "209px", top: "297px" },
        ];
      

        // 3.创建一个图片
        var $wolfImage = $("<img src='' class='wolfImage'>");
        // 随机获取图片的位置
        var posIndex = Math.round(Math.random() * 8);
        // 4.设置图片显示的位置
        $wolfImage.css({
            position: "absolute",
            left: arrPos[posIndex].left,
            top: arrPos[posIndex].top,
        });
        // 随机获取数组类型 -- 判断是否等于0?等于0为wolf_1,等于1为wolf_2
        var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
        // 5.设置图片的内容
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        // 设置每隔一段时间切换一张图片效果
        wolfTimer = setInterval(function () {
            // 判断图片是否到第五张
            if (wolfIndex > wolfIndexEnd) {
                // 到了第五张删掉图片
                $wolfImage.remove();
                // 关掉定时器
                clearInterval(wolfTimer);
                // 动画做完之后继续调用做下一个动画
                startWolfAnimation();
            }
            $wolfImage.attr("src", wolfType[wolfIndex]);
            wolfIndex++;
        }, 300);

        // 6.将图片添加到界面上
        $(".container").append($wolfImage);

        // 7.调用处理游戏规则的方法 -- 实现加分减分
        gameRules($wolfImage);
    }


    // 实现加分减分
    function gameRules($wolfImage) {
        // 确保图片只能够点击一次
        $wolfImage.one("click",function () {
            // 修改索引
            window.wolfIndex = 5;
            window.wolfIndexEnd = 9;

            // 拿到当前点击图片的地址
            var $src = $(this).attr("src");
            // 根据图片地址判断是否是灰太狼
            var flag = $src.indexOf("h") >= 0;
            // 根据点击的图片类型增减分数
            if(flag){
                // +10
                $(".score").text(parseInt($(".score").text()) + 10);
            }else{
                // -10
                $(".score").text(parseInt($(".score").text()) - 10);
            }
        });
    }


    // 进度条归0后停止灰太狼的动画
    function stopWolfAnimation() {
        // 删掉图片
        $(".wolfImage").remove();
        // 关掉定时器
        clearInterval(wolfTimer);
    }

    // 开始动画时的音乐
    function startmusic(){
        var $music = $("<audio src='./我爱平底锅.mp3' loop='loop' autoplay='autoplay'></audio>")
        $(".music").append($music)
    }
    // 游戏结束的关闭动画
    function stopmusic(){
        $(".music").empty()
    }


    //向上取整,四舍五入
    /*
    0  * 8 = 0   == 0
    0.1* 8 = 0.8 == 1
    0.2* 8 = 1.6 == 2
    0.3* 8 = 2.4 == 2
    0.4* 8 = 3.2 == 3
    0.5* 8 = 4.0 == 4
    0.6* 8 = 4.8 == 5
    0.7* 8 = 5.6 == 6
    0.8* 8 = 6.4 == 6
    0.9* 8 = 7.2 == 7
    1* 8 =  8    == 8
    */
    // console.log(Math.random());
    // console.log(Math.round(0.5));//向上取整
});
^ω^奋斗小青年
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现小游戏源代码--打灰太狼
weixin_45902966的博客
07-06 1628
注：该游戏是通过学习B站李南江老师jQuery后，再其基础上做的修正。 不多说，直接上代码:代码有详细的注释，应该不难看懂 首先是HTML代码:值得一提的是，我这里引入的是jQuery1.12.4版本的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打灰太狼</title> <link rel="stylesheet"
JS 原生 锅打灰太狼小游戏
qq_57264830的博客
09-25 652
1.先来看页面首页效果图 整个首页由一个大的div包裹，背景图也是在外层div设置的，然后就一个开始游戏的按钮，还有进度条图片，也包括进度条结束后出现的蒙版页面 2.点击开始页面，动画开始加载，会随机出现小灰灰和灰太狼 3.敲打灰太狼加分，小灰灰减分 4.进度条走完，游戏结束，出现结束页面 5.点击重新开始按钮即可再玩一次游戏 6.来看一下html结构和css样式 <div class="container...
[jQuery案例练习]——锅打灰太狼
tory886的博客
01-10 2276
一个jQuery案例练习——锅拍灰太狼（打地鼠）
狂拍灰太狼图片集.rar
06-30
李南江教授--jQuery+Ajax--狂拍灰太狼
【jQuery笔记】狂拍灰太狼案例笔记
码小余の博客
06-18 2879
狂拍灰太狼 使用 jQuery 语法实现的新浪微博页面 我要实现的功能： 点击开始游戏按钮，开始游戏 游戏有时间进度条 游戏结束以后可以点击重新开始按钮，重新开始游戏 有游戏规则 点击灰太狼加 10 分，点击小灰灰减 10 分，并且只能点击一次，以防用户一直点 点击之前显示没有被平底锅打击的图片，点击之后显示被平底锅打击的图片 游戏结束，动画结束 首先，布局HTML页面 <!-- * @Author: 码小余 * @Date: 2020-06-18 14:32:44 * @LastE
jquery-migrate
03-05
jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 jQuery Migrate是应用迁移辅助插件，是用于...
jquery练习狂拍灰太狼.zip
02-22
《jQuery属性节点训练——“狂拍灰太狼”实践教程》 在JavaScript的世界里，jQuery以其简洁、易用的API，成为了许多Web开发者首选的库。对于初学者来说，掌握jQuery的基本操作，尤其是属性节点的处理，是学习过程中...
jquery.i18n.properties-min-1.0.9.js
05-12
jquery.i18n.properties-min-1.0.9 主要用于国际化和读取properties文件
jQuery实例-锅拍灰太狼.zip
08-11
《jQuery实例：锅拍灰太狼小游戏解析》 在网页前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等常见任务。本实例——“锅拍灰太狼”小游戏，是针对初学者设计...
jquery-migrate3.4版本
05-17
《jQuery Migrate 3.4 版本详解》 jQuery Migrate 是一个插件，它的主要目的是帮助开发者平滑地过渡到较新版本的 jQuery，解决老版本代码在新版本中可能遇到的兼容性问题。在jQuery Migrate 3.4.0版本中，我们看到...
狂拍灰太狼练习源码和素材.rar
11-30
看jQuery视频 顺便敲敲代码 加深下理解 做个小游戏听起来很复杂很难，其实只要把整体一步步拆分，一步步完成。最后发现，越来越丰满了。 需要的朋友拿去看看吧。
锅拍灰太狼图片素材
10-17
锅拍灰太狼图片素材，
js锅打灰太狼小游戏。
01-24
利用JavaScript制作的小游戏，包含游戏规则，重新开始，计算得分的功能
锅打灰太狼小游戏的改进
08-24
js基础，锅打灰太狼小游戏的改进
jQuery实现拍打灰太狼小游戏
x1037490413的博客
11-08 528
要图片的同学可以私聊我~ html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Jquery项目练习-狂拍灰太狼
SDAW_1的博客
02-13 655
最终效果图： html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>狂拍灰太狼游戏</title> <link rel="stylesheet" href="1.css"> <script s...
jQuery写经典游戏：锅打灰太狼
finedayforu的博客
04-26 817
没看源代码，可能思路有些不一样，还做了如下优化： 1、增加了音效 增加了狼儿钻回洞里的动画。 2、计分规则 3、设置了combo系统， 连续5个combo 时间+10S 4、打小灰灰会减分 减时间 5、挂到了我的个人服务器上，可以去以下网址体验以下： 锅打灰太狼 6、需要优化的部分： ①、如果游戏中...
56-狂拍灰太狼游戏
yangyalun的博客
11-21 2317
HTML &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;狂拍灰太狼游戏&lt;/title&gt; &lt;link rel="stylesheet" href=&q
jQuery小游戏之锅打灰太郎
qq_43696174的博客
04-22 334
HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>锅拍灰太狼</title> <link rel="stylesheet" type="text/css" href="css1.css"/> <script src="....
jQuery-----淘宝精品服饰案例
最新发布
08-27
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，您可以使用 jQuery 来处理页面中的元素，例如添加、删除、修改元素的内容和样式等。下面是一个简单的例子，展示了如何使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值