2019.6.22 Web全栈开发 学习笔记（十三）

已于 2023-06-29 10:06:12 修改
阅读量183 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： Web编程 JavaScript 前端
于 2019-09-11 19:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44363959/article/details/100747152
版权

JavaScript Day 6

上课日期：2019年8月15日

课程内容

这次的三个案例都是用js代码实现的对网页上图片的一个处理，我们在浏览网页的时候，如果图片全部摆成一行，或者摆在一个地方，很容易影响页面美观，所以使用三维轮播等效果，就能使美观性大大提高。

一、案例：三维图片轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: black;
        }

        .banner {
            position: relative;
            width: 900px;
            height: 350px;
            margin: auto;
        }

        .imglist {
            width: 400px;
            height: 200px;
            position: absolute;
            box-shadow: 0 0 15px #fff;
            transition: all .1s linear;
        }

        .imglist > img {
            width: 100%;
            height: 100%;
        }

        .items {
            position: absolute;
            z-index: 10;
            left: 0;
            bottom: -40px;
            width: 100%;
            text-align: center;
        }

        .items > div {
            width: 17px;
            height: 17px;
            margin: 0 5px;
            border: 2px solid #fff;
            box-sizing: border-box;
            display: inline-block;
            transform: rotate(45deg);
        }

        .bgcolor {
            background: #17ff1e;
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="imglist" style="left: 250px;top: 150px;z-index: 5">
        <img src="./img/1.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:0px;top: 100px;z-index: 4">
        <img src="./img/2.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:0px;top: 50px;z-index: 3">
        <img src="./img/3.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:250px;top: 0px;z-index: 2">
        <img src="./img/4.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:500px;top: 50px;z-index: 3">
        <img src="./img/5.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:500px;top: 100px;z-index: 4">
        <img src="./img/6.jpg" alt=""/>
    </div>
    <div class="items">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    /*
     * 1.网页加载完成  默认转动
     *
     * */

    var lists = document.getElementsByClassName("imglist");
    var item = document.getElementsByClassName("items")[0].children;
    var speed = 1500;
    var timer = null;
    var index = 0//记录当前正面的那张图的索引
    var count = 0;//用户操作的时候转的次数
    var isanimate = true;//记录动画的状态
    function animate() {
        timer = setInterval(function () {
            ShunAnimate();
            addColor();
        }, speed);
    }
    //顺时针动画
    function ShunAnimate() {
        var ele_0 = [lists[0].style.left, lists[0].style.top, lists[0].style.zIndex];
        for (var i = 0; i < lists.length; i++) {
            if (i < lists.length - 1) {
                lists[i].style.left = lists[i + 1].style.left;
                lists[i].style.top = lists[i + 1].style.top;
                lists[i].style.zIndex = lists[i + 1].style.zIndex;
            }
            else {
                lists[i].style.left = ele_0[0];
                lists[i].style.top = ele_0[1];
                lists[i].style.zIndex = ele_0[2];
            }
            if (lists[i].style.zIndex == 5) {
                index = i;
            }
        }
    }
    function addMouseEnter() {
        for (var i = 0; i < lists.length; i++) {
            lists[i].onmouseenter = function () {
                //停止计时器
                clearInterval(timer);
            }
            lists[i].onmouseleave = function () {
                animate();
            }
        }
    }
    function addColor() {
        //下面的点跟随变化的一个方法
        for (var i = 0; i < item.length; i++) {
            //当前变色
            if (i == index) {
                item[i].className = "bgcolor";
            }
            else {
                item[i].className = "";
            }
        }
    }
    function additemEvent() {
        for (var i = 0; i < item.length; i++) {
            item[i].index = i;
            item[i].onmouseenter = function () {
                clearInterval(timer);
                if (isanimate) {
                    isanimate = false;
                }
                else {
                    return;
                }
                //进入当前的变色
                count = this.index - index;
                //顺时针动画
                var num = 0;
                var c = 0;
                if (this.index > index) {
                    c = item.length - count;
                }
                else if (this.index < index) {
                    c = index - this.index;
                }
                loop();
                function loop() {
                    num++;
                    if (num > c) {
                        console.log("动画完成");
                        isanimate = true;
                        return;
                    }
                    ShunAnimate();//0.3ms
                    setTimeout(loop, 100);
                }

                index = this.index;
                addColor();

            }
            item[i].onmouseleave = function () {
                animate();
            }
        }
    }
    window.onload = function () {
        animate();
        addMouseEnter();
        addColor();
        additemEvent();
    }
</script>
</body>
</html>

二、案例：横向滚动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .par {
            position: relative;
            width: 600px;
            height: 300px;
            border: 1px solid black;
            margin: auto;
            overflow: hidden;
        }

        .nav {
            width: 4200px;
            height: 300px;
        }

        .tras {
            transition: margin-left 0.5s ease-in;
        }

        .nav > li {
            width: 600px;
            height: 300px;
            float: left;
            list-style: none;
        }

        .nav > li img {
            width: 100%;
            height: 100%;
        }

        .dian {
            position: absolute;
            width: 100%;
            height: auto;
            left: 0;
            bottom: 0;
            text-align: center;
        }

        .dian > div {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            border: 1px solid #fff;
            display: inline-block;
        }

        .bgcolor {
            background: red;
        }

        .btn {
            position: absolute;
            top: 140px;
            z-index: 11;
            width: 100%;
        }

        .btn > span {
            display: block;
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.69);
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

        .btn > span:nth-child(1) {
            border-radius: 0 50% 50% 0;
            float: left;
        }

        .btn > span:nth-child(2) {
            border-radius: 50% 0 0 50%;
            float: right;
        }
    </style>
</head>
<body>
<div class="par">
    <ul class="nav tras">
        <li>
            <img src="img/1.jpg">
        </li>
        <li>
            <img src="img/2.jpg">
        </li>
        <li>
            <img src="img/3.jpg">
        </li>
        <li>
            <img src="img/4.jpg">
        </li>
        <li>
            <img src="img/5.jpg">
        </li>
        <li>
            <img src="img/6.jpg">
        </li>
        <li>
            <img src="img/1.jpg">
        </li>
    </ul>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="btn">
        <span><</span>
        <span>></span>
    </div>
</div>
<script>
    /*
     * 1.初始动画
     * */
    var nav = document.getElementsByClassName("nav")[0];
    var par = document.getElementsByClassName("par")[0];
    var dian = document.getElementsByClassName("dian")[0].children;
    var btnspan = document.getElementsByClassName("btn")[0].children;
    var speed = 2000;
    var count = 0;
    var index = 0;
    var timer = null;
    function animate() {
        timer = setInterval(function () {
            transanimte();
        }, speed)
    }
    function transanimte() {
        nav.className = "nav tras";
        count++;
        nav.style.marginLeft = (-600 * count) + "px";
        setTimeout(function () {
            //动画完成之后去做判断
            if (count >= nav.children.length - 1) {
                nav.className = "nav";
                count = 0;
                nav.style.marginLeft = "0px";
            }
            index = count == 6 ? 0 : count;
            addColor();
        }, 500);
    }
    function addColor() {
        for (var i = 0; i < dian.length; i++) {
            if (i == index) {
                dian[i].className = "bgcolor";
            }
            else {
                dian[i].className = "";
            }
        }
    }
    window.onload = function () {
        animate();
        addColor();
        //事件
        par.onmouseenter = function () {
            clearInterval(timer);
        }
        par.onmouseleave = function () {
            animate();
        }
        for (var i = 0; i < dian.length; i++) {
            dian[i].index = i;
            dian[i].onmouseenter = function () {
                count = this.index - 1;
                transanimte();
                index = this.index;
                addColor();
            }
        }
        //两箭头事件
        btnspan[0].onclick = function () {
            transanimte();
        }
        //右边   比较难写
        btnspan[1].onclick = function () {
            count--;
            if (count < 0) {
                nav.className = "nav";
                count = nav.children.length - 2;
                nav.style.marginLeft = "-3600px";
            }
            //稍微上下代码有点延迟
            setTimeout(function () {
                nav.className = "nav tras";
                nav.style.marginLeft = (-600 * count) + "px";
                //动画完成之后
                setTimeout(function () {
                    index = count;
                    addColor();
                }, 500)
            }, 1);
        }
    }
</script>
</body>
</html>

三、案例：淡入淡出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .par {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: auto;
            position: relative;
        }

        .par > div.items {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }

        .par > div > a img {
            width: 100%;
            height: 100%;
            border: 0;
        }

        .nav {
            position: absolute;
            z-index: 10;
            width: 100%;
            left: 0;
            bottom: 0;
            text-align: center;
        }

        .nav > div {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 10px #fff;
            display: inline-block;
        }

        .bgcolor {
            background: red;
        }

        .btn {
            position: absolute;
            top: 180px;
            z-index: 11;
            width: 100%;
        }

        .btn > span {
            display: block;
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.69);
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

        .btn > span:nth-child(1) {
            border-radius: 0 50% 50% 0;
            float: left;
        }

        .btn > span:nth-child(2) {
            border-radius: 50% 0 0 50%;
            float: right;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="items"><a href="#"><img src="./img/1.jpg" alt=""/></a></div>
    <div class="items"><a href="#"><img src="./img/2.jpg" alt=""/></a></div>
    <div class="items"><a href="#"><img src="./img/3.jpg" alt=""/></a></div>
    <div class="items"><a href="#"><img src="./img/4.jpg" alt=""/></a></div>
    <div class="items"><a href="#"><img src="./img/5.jpg" alt=""/></a></div>
    <div class="items"><a href="#"><img src="./img/6.jpg" alt=""/></a></div>
    <div class="nav">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="btn">
        <span><</span>
        <span>></span>
    </div>
</div>
<script>
    /*
     * 淡入淡出动画
     * 1.设置层的情况
     * 2.写层的动画
     * 3.添加淡入淡出动画
     * 4.写圈圈动画  默认第一个有颜色  ---对应的图片对应的圈 变化
     *5.添加事件  鼠标进入和离开
     * 6.给点添加事件
     * 7.当前点变色   显示当前对应的图片
     * 8.给两个箭头添加点击事件操作动画
     * */
    var items = document.getElementsByClassName("items");
    var dian = document.getElementsByClassName("nav")[0].children;
    var btnspan = document.getElementsByClassName("btn")[0].children;
    var parentEle = document.getElementsByClassName("par")[0];
    var speed = 2000;
    items[0].style.opacity = 1;
    var index = 0;
    var timer = null;
    //设置层
    function attrZindex() {
        for (var i = 0; i < items.length; i++) {
            items[i].style.zIndex = items.length - i - 1;
        }
    }
    //动画方法
    function animate() {
        timer = setInterval(function () {
            setindexopacity("right", 1);
            addColor();
        }, speed);
    }
    function setindexopacity(res, count) {
        for (var k = 0; k < count; k++) {
            for (var i = 0; i < items.length; i++) {
                var zindex = parseInt(items[i].style.zIndex);
                if (res == "right") {
                    zindex += 1;
                    if (zindex >= items.length) {
                        items[i].style.opacity = 0;
                        zindex = 0;
                    }
                    if (zindex == items.length - 1) {
                        items[i].style.opacity = 1;
                        //动态修改index 的值
                        index = i;
                    }
                }
                else {
                    zindex -= 1;
                    if (zindex == -1) {
                        items[i].style.opacity = 1;
                        zindex = items.length - 1;
                        //动态修改index 的值
                        index = i;
                    }
                    else if (zindex == items.length - 2) {
                        items[i].style.opacity = 0;
                    }
                }
                items[i].style.zIndex = zindex;
            }
        }
    }
    //点颜色的相关操作
    function addColor() {
        for (var i = 0; i < dian.length; i++) {
            if (i == index) {
                dian[i].className = "bgcolor";
            }
            else {
                dian[i].className = "";
            }
        }
    }
    window.onload = function () {
        attrZindex();
        animate();
        addColor();
        //操作动画  停止开启
        parentEle.onmouseenter = function () {
            clearInterval(timer);
        }
        parentEle.onmouseleave = function () {
            animate();
        }
        //给点添加事件
        for (var i = 0; i < dian.length; i++) {
            dian[i].index = i;
            dian[i].onmouseenter = function () {
                //鼠标进入当前点变色
                //使用当前的索引 -之前的索引
                var count = this.index - index > 0 ? this.index - index : dian.length + (this.index - index);
                setindexopacity("right", count);
                index = this.index;
                addColor();
            }
        }
        //给left  right btn 事件
        //left
        btnspan[0].onclick = function () {
            setindexopacity("left", 1);
            addColor();
        }
        //right
        btnspan[1].onclick = function () {
            setindexopacity("right", 1);
            addColor();
        }
    }
</script>
</body>
</html>
SkywalkerHD
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
秦疆 西部开源_Java实现文件上传
weixin_39837139的博客
12-23 9395
JavaWeb实现文件的上传(整理自西部开源秦疆老师)1、准备工作对于文件上传，浏览器在上传的过程中是将文件以流的形式提交到服务器端的。一般采用Apache的开源工具common-fileupload这个文件上传组件。common-fileupload是依赖于common-io这个包的，所以还需要下载这个包。我们下载最新的jar包:common-fileupload :点击下载common-io...
Xilinx_Vivado_SDK_Web_2019.1_0524_1430_Win64.exe
06-28
下载请注意操作系统！ Vivado HLx 2019.1：WebPACK 和版本 —Windows 自解压 Web 安装程序 (EXE - 64.62 MB)
web 全栈开发-实战项目-一
小dobby
04-02 838
一、web 全栈开发-实战项目 项目描述： ou-article文章管理系统，包括pc页面展示（自适应移动端），后台文章管理系统（有完整的权限系统），server服务端，以及环境部署。 适合人群： 有一定的前端开发经验，并有意向转型成为web全栈工程师，想提升自己，又缺乏真是的项目经验。 技术选型： 页面展示：vue.js less webpack axios 后台管理系统：vue.js element.ui less webpack axios 服务端：node.js koa2
Web全栈开发汇总
Slovenia_groot的博客
09-08 517
处女作《Web全栈开发进阶之路》出版了！
weixin_34418883的博客
04-12 331
书中源码下载地址：github.com/qinggee/Web… 01、 当初决定写博客的原因非常的纯洁：只要每个月写上 4 篇以上博客，月底的绩效奖金就多 500 块。你可能会好奇地问，哪里会有这么好的公司呢？偷偷地告诉你，这公司没在别处，就在九朝古都洛阳。 有个成语叫做“日久生情”。没错，就这样写着写着，我竟然爱上了写作。写作的原动力也随之发生了改变：搞技术这么多年了，总应该留下点什么；或者...
【1】SpringMVC前瞻、回顾MVC
Kuber
12-10 182
SpringMVC前瞻 ssm：myabtis+Spring+SpringMVC MVC三层架构 JavaSE：认真学，老师带，入门快 JavaWeb：认真学，老师带，入门快 SSM框架：研究官方文档，锻炼自学能力，锻炼笔记能力，锻炼项目能力 SpringMVC + Vue + SpringBoot + SpringCloud + Linux Spring：IOC和AOP SpringMVC理论：SpringMVC执行流程 SpringMVC操作：SSM框架整合 1、回顾MVC 1.1、什么是MVC 模型
常用web开发工具 JetBrains PhpStorm 2019.zip.baiduyun.p
06-30
常用web开发工具 JetBrains PhpStorm 2019.zip.baiduyun.p常用web开发工具 JetBrains PhpStorm 2019.zip.baiduyun.p常用web开发工具 JetBrains PhpStorm 2019.zip.baiduyun.p常用web开发工具 JetBrains PhpStorm ...
pycharm2019.3.1jiejie.zip
12-21
5. **Django和Flask支持**：对于Python web开发，PyCharm提供了对Django和Flask框架的深度支持，包括模板语法高亮、自动完成和错误检查。 6. **Python虚拟环境管理**：可以创建和管理多个Python虚拟环境，避免不同...
studio-3t-x64_2019.2.1_windows.zip
10-10
windows版本的studio-3t-x64_2019.2.1 官网无法下载这个版本的了,上传给大家使用.网上可以找其他教程达到无限试用的目的.
idea vue.js插件(2019.3.1)
02-02
亲测 本人IDEA版本2019.3.1 vuejs-193.5662.65.zip File>Setting>plugins>install plugin from disk 选择文件安装完重启即可; 亲测 本人IDEA版本2019.3.1 vuejs-193.5662.65.zip File>Setting>plugins>install ...
西部开源官方网站.zip
07-06
本资源用html和CSS设计完成了一个网站（西部开源培训中心官方网站），仅供参考，包含源代码，可直接使用，新手练习作品。
全栈开发之前端开发
05-25
前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。以前会Photoshop和Dreamweaver就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为Web前端开发。前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计，艺术性较强的视觉设计等。在Web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息，并不能满足用户在界面上的需求，对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及，技术可以在用户体验方面实现更多种可能，前端技术领域迸发出旺盛的生命力。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着手机成为人们生活中不可或缺的一部分，成为人们身体的延伸，人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外，前端技术还能应用于智能电视、智能手表甚至人工智能领HTML掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。 [3] CSS学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。JavaScript学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。操作系统了解Unix和Linux的基本知识，对于开发人员有益无害。网络服务器了解Web服务器，包括对Apache的基本配置，htaccess配置技巧的掌握等。
2019.6.22 Web全栈开发 学习笔记（十二）
SkywalkerH的博客
09-06 2230
JavaScript Day 5 上课日期：2019年8月13日 课程内容 一、JavaScript的内置对象
Java学习记录 Day20（网络编程）
赈川
05-27 360
Day 20 2019年5月26日。 这是我来到西部开源的第二十天。 这一天，我学到了以下的知识。 计算机网络 计算机网络，就是把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大，功能强的网络系统，从而使众多的计算机可以方便的互相传递信息，共享硬件，软件，数据信息等资源。 其中，具有以下重要概念： 计算机网络的主要功能：​ - 资源共享 - 信息传输与集中处理 - 均衡负荷...
2019.6.22 Web全栈开发 学习笔记（十七）
SkywalkerH的博客
09-20 245
JavaScript Day 10 上课日期：2019年8月29日 课程内容 一、JavaScript中的模式 工厂模式 function factory() { var args = arguments; //实例化对象 返回对象 var obj = new Object(); //封装属性以及方法 obj....
Web前端和全栈开发---了解
放荡不羁爱自由
08-04 1489
传统的前端： HTML页面结构，CSS页面样式，JavaScript页面的行为。没有技术含量 HTML5时代的大前端： 各种端的兼容开发（pc 、移动端） 移动APP开发和移动站点开发 Ajax+服务器端技术开发 高级设计模式和框架（MVC、AngularJS、。。。） 自动化工作流（Grunt） 网站安全、SEO、测试、源代码管理、团队合作 HTML5游戏 全栈的前端： 缘...
Web前端开发 学习笔记（一）
SkywalkerH的博客
07-16 1929
Day 1 2019年7月5日，我加入西部开源所上的第一天课，由于没上之前的课程，学校安排了补课给我们，这次主要讲的是前端开发最基础的部分，HTML和CSS。以下是本次课程的主要内容总结。（学习笔记内容和正式上课内容相同） 课程内容 一、字符编码 字符编码（英语：Character encoding）也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉...
西部开源带给我的Java第一课
FoxStopM的博客
11-29 1273
Java语言特性 1.JavaSE (Java Standard Edition):Java标准版    基础，可以开发桌面应用、图形化应用等 2. JavaEE(Java Enterprise Edition):Java企业版  开发企业级应用 常用DOS 命令 在目标界面按shift+右键“在此处打开命令窗口” 1、切换目录  cd   /d   目标目录
大厂Web全栈工程师深度学习路线：Promise+ES6+Vue+React+Node.js实战
通过以上内容的学习，学员不仅可以全面掌握Web开发的核心技术，还能了解到当前Web开发的最新趋势和工具，为成为高级Web全栈工程师打下坚实基础。如果百度网盘链接失效，可以访问紫轩技术论坛获取最新资源。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值