web开发：javascript案例

一、浮动与定位复习

二、小米菜单案例

三、轮播图

四、滚动轮播

一、浮动与定位复习

- 浮动与相对定位

```js
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
```

- 浮动与绝对定位

```js
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>浮动与定位</title>

    <style>

        .box {

            /* 相对定位 */

            position: relative;

            /* 绝对定位 */

            position: absolute;

            /* 固定定位 */

            position: fixed;

        }

    </style>

    <style>

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        li {

            float: left;

            cursor: pointer;

            border-bottom: 2px solid orange;

            /*padding: 0 5px;*/

            margin: 0 5px;

        }

        li:first-child {

            /*1.浮动与相对定位结合使用*/

            /*盒子采用的是浮动布局为主,

            相对定位可以辅助其子级绝对定位布局,

            也可以在浮动布局基础上微调

            */

            /*position: relative;*/

            /*采用相对定位布局, 在浮动布局基础上微调, 不影响兄弟盒子的布局*/

            /*left: 10px;*/

            /*采用盒模型布局, 在浮动布局基础上微调, 影响兄弟盒子的布局*/

            /*margin-left: 10px;*/

        }

        li {

            /*1.浮动与绝对定位结合使用*/

            /*盒子采用绝对定位布局,

            浮动布局失效

            */

            /*为什么: 因为两者都是脱离文档流, 绝对定位为完全脱离文档流*/

            position: absolute;

        }

        li:last-child {

            left: 100px;

        }

        /*脱离文档流: 盒子的宽度可以由内容撑开*/

        .ele {

            /*width: 100px;*/

            height: 100px;

            background-color: pink;

            /*float: right;*/

            position: absolute;

            right: 0;

        }

    </style>

</head>

<body>

    <!--布局: 1.盒模型布局 | 2.浮动布局 | 3.定位布局-->

    <ul>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

    </ul>

    <div class="ele">12345 67890</div>

</body>

</html>

二、小米菜单案例

- 默认活跃状态

```js
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
```

- 更改活跃状态

```js
let active_index = 0; // 活跃状态的索引
for (let i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
        // 清除之前活跃的
        lis[active_index].className = "";
        // 设置自身为活跃
        this.className = "active";
        // 更新活跃索引
        active_index = i;
    }
}
```

- 作用域(不同的js逻辑代码块)

```js
// 不要去使用全局变量, 不同的js逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
```

- 根据数据与页面结构,动态渲染数据

```html
<ul class="main">
    <li>
        <a href="javascript:void(0)">
            <h2>小米音响</h2>
            <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
            <p>这是小米音响, 稍微解释一下</p>
        </a>
    </li>
    ...
</ul>
```

```js
let data = [
        [
            {
                title: "热门1",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
                info: "这是热门"
            },
            ...还有三个{}
        ],
    ...还有三个[]
    ];
```

```js
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
    let dataArr = data[index];
    for (let i = 0; i < dataArr.length; i++) {
        let h2 = main_lis[i].querySelector('h2');
        h2.innerText = dataArr[i].title;
        let img = main_lis[i].querySelector('img');
        img.setAttribute('src', dataArr[i].img_url);
        let p = main_lis[i].querySelector('p');
        p.innerText = dataArr[i].info;
    }
}
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>小米菜单案例</title>

    <style>

        body, h2, ul {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        a {

            color: black;

            text-decoration: none;

        }

        .title {

            background-color: #ddd;

            overflow: hidden;

            line-height: 60px;

        }

        .title h2 {

            float: left;

        }

        .title ul {

            float: right;

        }

        .title li {

            float: left;

            margin: 0 5px;

            line-height: 23px;

            margin-top: 20px;

            cursor: pointer;

        }

        .title li.active {

            color: #FF6700;

            border-bottom: 2px solid #FF6700;

            transition: .2s;

        }

    </style>

    <style>

        .main {

            overflow: hidden;

        }

        .main a {

            display: block;

            width: 300px;

            height: 400px;

            text-align: center;

        }

        .main li {

            float: left;

            width: 300px;

            height: 400px;

            background-color: orange;

            margin-right: 14px;

        }

        .main img {

            width: 260px;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="title">

            <h2>搭配</h2>

            <ul>

                <li class="active">热门</li>

                <li>耳机音响</li>

                <li>电源</li>

                <li>电池与储蓄卡</li>

            </ul>

        </div>

        <ul class="main">

            <li>

                <a href="javascript:void(0)">

                    <h2>小米音响</h2>

                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">

                    <p>这是小米音响, 稍微解释一下</p>

                </a>

            </li>

            <li>

                <a href="javascript:void(0)">

                    <h2>小米音响</h2>

                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">

                    <p>这是小米音响, 稍微解释一下</p>

                </a>

            </li>

            <li>

                <a href="javascript:void(0)">

                    <h2>小米音响</h2>

                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">

                    <p>这是小米音响, 稍微解释一下</p>

                </a>

            </li>

            <li>

                <a href="javascript:void(0)">

                    <h2>小米音响</h2>

                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">

                    <p>这是小米音响, 稍微解释一下</p>

                </a>

            </li>

        </ul>

    </div>

</body>

<!--设置导航-->

<script>

(function () {

    // 制造数据(模拟后台请求得到的)

    let data = [

        [

            {

                title: "热门1",

                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",

                info: "这是热门"

            },

            {

                title: "热门2",

                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",

                info: "这是热门"

            },

            {

                title: "热门3",

                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg1e99a342",

                info: "这是热门"

            },

            {

                title: "热门4",

                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",

                info: "这是热门"

            }

        ], [

            {

                title: "耳机1",

                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",

                info: "这是耳机"

            },

            {

                title: "耳机2",

                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",

                info: "这是耳机"

            },

            {

                title: "耳机3",

                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",

                info: "这是耳机"

            },

            {

                title: "耳机4",

                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",

                info: "这是耳机"

            }

        ], [], []

    ];

    let lis = document.querySelectorAll('.title li');

    // 设置一个记录活跃li索引的状态变量

    let active_index = 0;

    for (let i = 0; i < lis.length; i++) {

        lis[i].onmouseover = function () {

            // 清除之前活跃的

            lis[active_index].className = "";

            // 设置自身为活跃

            this.className = "active";

            // 更新活跃索引

            active_index = i;

            // 更新数据

            updateData(i);

        }

    }

    // 更新数据

    let main_lis = document.querySelectorAll('.main li');

    // 分析数据结构与页面结构,将指定数据渲染到指定位置

    function updateData(index) {

        let dataArr = data[index];

        // let count = 0;

        // for (dataObj of dataArr) {

        //     // console.log(dataObj.title);

        //     let h2 = main_lis[count].querySelector('h2');

        //     h2.innerText = dataObj.title;

        //     let img = main_lis[count].querySelector('img');

        //     img.setAttribute('src', dataObj.img_url);

        //     let p = main_lis[count].querySelector('p');

        //     p.innerText = dataObj.info;

        //     count++;

        // }

        for (let i = 0; i < dataArr.length; i++) {

            let h2 = main_lis[i].querySelector('h2');

            h2.innerText = dataArr[i].title;

            let img = main_lis[i].querySelector('img');

            img.setAttribute('src', dataArr[i].img_url);

            let p = main_lis[i].querySelector('p');

            p.innerText = dataArr[i].info;

        }

    }

})()

</script>

<!--完成数据更新-->

<script>

(function () {

    let lis = document.querySelectorAll('.main li');

})()

</script>

<!--

<script>

    var lis = document.querySelectorAll('.title li');

    for (let i = 0; i < lis.length; i++) {

        lis[i].onmouseover = function () {

            // 悬浮的li变成活跃状态, 之前活跃的li取消活跃状态

            // 移除所有的

            clearAllClassName()

            // 添加自己的

            this.className = "active"

        }

    }

    function clearAllClassName() {

        for (li of lis) {

            li.className = "";

        }

    }

</script>

-->

</html>

三、轮播图

```js
// 下一张
right_btn.onclick = function () {
    // 清除之前活跃的图片和tag
    img_lis[active_index].className = "";
    tag_lis[active_index].className = "";

    // 索引切换(更新活跃索引)
    // 安全性: 最后一张的下一张应该是第一张
    if (active_index == 4) active_index = -1;
    active_index++;

    // 设置将要活跃的图片和tag
    img_lis[active_index].className = "active";
    tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style >

        * {

            /*不允许选择文本, 网页文本不能负责*/

            user-select: none;

        }

        body, ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .scroll {

            width: 1226px;

            height: 460px;

            margin: 0 auto;

            background-color: orange;

            position: relative;

            cursor: pointer;

        }

        .scroll_view {

            width: 100%;

            height: 100%;

            position: relative;

        }

        .scroll_view li {

            background: red;

            width: 100%;

            height: 100%;

            font: normal 100px/460px 'STSong';

            text-align: center;

            position: absolute;

            top: 0;

            left: 0;

            opacity: 0;

        }

        .scroll_view li.active {

            opacity: 1;

            transition: .5s;

        }

        .left {

            position: absolute;

            top: 170px;

            left: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .left:hover, .right:hover {

            cursor: pointer;

            background-color: #333;

        }

        .right {

            position: absolute;

            top: 170px;

            right: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .scroll_tag {

            position: absolute;

            right: 10px;

            bottom: 10px;

        }

        .scroll_tag li {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #333;

            border: 3px solid #ddd;

            float: left;

            margin: 0 10px;

        }

        .scroll_tag li.active {

            background-color: #ccc;

            border: 3px solid #333;

        }

    </style>

</head>

<body>

<div class="scroll">

    <ul class="scroll_view">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <ul class="scroll_toggle">

        <li class="left">&lt;</li>

        <li class="right">&gt;</li>

    </ul>

    <ul class="scroll_tag">

        <li class="active"></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

<script>

(function () {

    let left_btn = document.querySelector('.left');

    let right_btn = document.querySelector('.right');

    let img_lis = document.querySelectorAll('.scroll_view li');

    let tag_lis = document.querySelectorAll('.scroll_tag li');

    let scroll = document.querySelector('.scroll');

    // 定时器

    let timer = 0;

    // 记录活跃状态的索引变量

    let active_index = 0;

    // 下一张

    right_btn.onclick = function () {

        // 清除之前活跃的图片和tag

        img_lis[active_index].className = "";

        tag_lis[active_index].className = "";

        // 索引切换(更新活跃索引)

        // 安全性: 最后一张的下一张应该是第一张

        if (active_index == 4) active_index = -1;

        active_index++;

        // 设置将要活跃的图片和tag

        img_lis[active_index].className = "active";

        tag_lis[active_index].className = "active";

    };

    // 上一张

    left_btn.onclick = function () {

        // 清除之前活跃的图片和tag

        img_lis[active_index].className = "";

        tag_lis[active_index].className = "";

        // 索引切换(更新活跃索引)

        // 安全性: 第一张的前一张应该是最后一张

        if (active_index == 0) active_index = 5;

        active_index--;

        // 设置将要活跃的图片和tag

        img_lis[active_index].className = "active";

        tag_lis[active_index].className = "active";

    };

    // 自动轮播

    function autoScroll() {

        timer = setInterval(function () {

            // 清除之前活跃的图片和tag

            img_lis[active_index].className = "";

            tag_lis[active_index].className = "";

            // 索引切换(更新活跃索引)

            // 安全性: 最后一张的下一张应该是第一张

            if (active_index == 4) active_index = -1;

            active_index++;

            // 设置将要活跃的图片和tag

            img_lis[active_index].className = "active";

            tag_lis[active_index].className = "active";

        }, 1500);

    }

    // 加载页面就只执行一次,打开自动轮播

    autoScroll();

    // 鼠标悬浮轮播图停止自动轮播

    scroll.onmouseenter = function () {

        clearInterval(timer)

    };

    // 鼠标移开重新开启自动轮播

    scroll.onmouseleave = function () {

        autoScroll();

    };

    // tag点击对应的图片切换

    for (let i = 0; i < tag_lis.length; i++) {

        tag_lis[i].onclick = function () {

            // console.log(i);

            // 清除之前活跃的图片和tag

            img_lis[active_index].className = "";

            tag_lis[active_index].className = "";

            // 更新活跃索引

            active_index = i;

            // 设置将要活跃的图片和tag

            img_lis[active_index].className = "active";

            tag_lis[active_index].className = "active";

        }

    }

})()

</script>

</html>

四、滚动轮播

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>滚动轮播</title>

    <style>

        body, ul {

            margin: 0;

            padding: 0;

            list-style: none;

            user-select: none;

        }

        .wrapper {

            width: 400px;

            height: 240px;

            background-color: orange;

            margin: 50px auto;

            position: relative;

            overflow: hidden;

        }

        /* 滚得的标签是ul, 带动着4个li同步运动 */

        .scroll_view {

            width: 1600px;

            /*利用绝对定位完成运动*/

            position: absolute;

            top: 0;

            /*left: -400px;*/

            left: 0;

            /*transition: 1s;*/

        }

        .scroll_view li {

            width: 400px;

            height: 240px;

            font: normal 80px/240px 'STSong';

            text-align: center;

            float: left;

        }

        .li1 { background-color: pink }

        .li2 { background-color: deeppink }

        .li3 { background-color: lightpink }

        .li4 { background-color: hotpink}

        .left {

            position: absolute;

            top: 100px;

            left: 0;

            background-color: #eee;

            font-size: 30px;

        }

        .left:hover, .right:hover {

            cursor: pointer;

            background-color: #333;

        }

        .right {

            position: absolute;

            top: 100px;

            right: 0;

            background-color: #eee;

            font-size: 30px;

        }

        .scroll_tag {

            position: absolute;

            right: 10px;

            bottom: 10px;

        }

        .scroll_tag li {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #333;

            border: 3px solid #ddd;

            float: left;

            margin: 0 10px;

        }

        .scroll_tag li.active {

            background-color: #ccc;

            border: 3px solid #333;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="scroll_view">

            <li class="li1">1</li>

            <li class="li2">2</li>

            <li class="li3">3</li>

            <li class="li4">4</li>

        </ul>

        <ul class="scroll_toggle">

            <li class="left">&lt;</li>

            <li class="right">&gt;</li>

        </ul>

        <ul class="scroll_tag">

            <li class="active"></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

<script>

(function () {

    let scroll_view = document.querySelector('.scroll_view');

    let left_btn = document.querySelector('.left');

    let right_btn = document.querySelector('.right');

    let tag_lis = document.querySelectorAll('.scroll_tag li');

    right_btn.onclick = function () {

        let total_lenth = 400;

        let count = 0;

        let step = 8;

        let timer = setInterval(function () {

            // 通过滚动的距离映射出所在的图片索引

            let index = parseInt(-scroll_view.offsetLeft / total_lenth);

            index += 1;

            console.log(index);

            // 临界点, 往右4

            if (index == 4) {

                clearInterval(timer);

                return;

            }

            // 0+1 ==> 1

            // 1+1 ==> 2

            // 2+1 ==> 3

            tag_lis[index - 1].className = "";

            tag_lis[index].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft - step + 'px';

            count++;

            if (count >= total_lenth / step) {

                clearInterval(timer)

            }

        }, 10);

    };

    left_btn.onclick = function () {

        let total_lenth = 400;

        let count = 0;

        let step = 8;

        let timer = setInterval(function () {

            // 要偏移坐标系, 要加上一个宽度400 total_lenth

            // 要处理第一次偏移bug, 少加上8 step

            let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);

            console.log(index);

            // 处理第一次偏移bug

            // 3 => 2

            // 2 => 1

            // 1 => 0

            // 临界点, 往左0

            if (index == 0) {

                clearInterval(timer);

                return;

            }

            // if (index == 4) index = 3;

            tag_lis[index].className = "";

            tag_lis[index - 1].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft + step + 'px';

            count++;

            if (count >= total_lenth / step) {

                clearInterval(timer)

            }

        }, 10);

    }

})()

</script>

</html>

web开发：javascript案例的更多相关文章

2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
Java Web 开发进阶案例之人事管理系统的完整实现
技术:Java+ jsp + servlet+ javabeans +sql+tomcat 概述本系统的主要任务是实现人事管理系统的系统化和自动化管理, 主要包括招聘入职.到期离职和员工调动信 ...
静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...
Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
我用jquery只实现了文本框的移动(暂时上下移动等同于左右移动) $(function () { var cols = 1;//按一下跳几个控件 var obj = $("input[id ...
了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编赵静译 ISBN 978-7-121-21769-2 2 ...
Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...

随机推荐

Core Data概述（转）
Core Data是一个模型层的技术.Core Data帮助你建立代表程序状态的模型层.Core Data也是一种持久化技术,它能将模型对象的状态持久化到磁盘,但它最重要的特点是:Core Data不 ...
MySQL之LEFT JOIN中使用ON和WHRERE对表数据
背景 left join在我们使用mysql查询的过程中可谓非常常见,比如博客里一篇文章有多少条评论.商城里一个货物有多少评论.一条评论有多少个赞等等.但是由于对join.on.where等关键字的不 ...
AWS物联网解决方案之：如何将设备安全地接入AWS IoT
1 简介 AWS IoT解决方案是一个全托管的云平台,使互联设备可以轻松安全地与云应用程序及其他设备交互.AWS IoT可以支持数十亿太设备和数万亿条消息,并且可以对这些消息进行处理并将其安全可靠地路 ...
Reactor系列(三)创建Flux,Mono(续)
创建Mono 视频讲解:https://www.bilibili.com/video/av78944069/ FluxMonoTestCase.java package com.example.rea ...
[转帖]关于USB3.0以及type-C
忘记来源页面了.. 但是昨天晚上 usb 4.0 发布了跟雷电C 安全一样的标准双向40gb 的带宽. 而且以后只有usb type-C的接口了. 我们办公机器上面的 typeC 同事用 ngf ...
[转]Mybatis之TypeHandler使用教程
Mybatis之TypeHandler使用教程 https://blog.csdn.net/jokemqc/article/details/81326109 深入浅出Mybatis系列(五)---Ty ...
【AtCoder】ARC058
ARC058 C - こだわり者いろはちゃん / Iroha's Obsession 暴力一个个枚举是最简单的方式 #include <bits/stdc++.h> #define fi ...
搜索（BFS、DFS、回溯）
这类题是最简单的了都是一个套路,不像动态规划一类题一个套路,没做过就是不会也极难想出来. 一.BFS 解决的问题:用来初始点解决到指定点的最短路径问题,因为图的每一层上的点到初始点的距离相同.(注意是 ...
ide的debug
webstom 新建立一个配置项找到webpack.config.js,最后一行加上 devtool: "source-map" 然后点击debug
Python字符串常用的方法——真心觉得比java，c好用
# Strings have many methods wo can use rand_string=" life is a beautiful struggle " print( ...

web开发：javascript案例

web开发：javascript案例的更多相关文章

随机推荐

热门专题