Day11-JavaScript

已于 2023-12-02 15:11:06 修改
阅读量118 收藏
点赞数 4
文章标签： javascript 前端 css
于 2023-11-30 16:50:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134716345
版权

一.焦点轮播

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .content {
            width: 600px;
            height: 315px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }
        
        .content .view {
            width: 2400px;
            height: 315px;
            position: absolute;
        }
        
        .content .view div {
            width: 600px;
            height: 315px;
            float: left;
        }
        
        .content .view div img {
            width: 100%;
            height: 100%;
        }
        
        .content .doc {
            width: 105px;
            height: 15px;
            position: absolute;
            left: 50%;
            margin-left: -52px;
            bottom: 20px;
        }
        
        .content .doc li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin-right: 15px;
        }
        
        .content .doc li:last-child {
            margin-right: 0px;
        }
        
        .content .doc .active {
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="view">
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01cmWoxh1S6H07yrmcM_!!6000000002197-0-tps-846-472.jpg" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg" alt="">
            </div>
        </div>
        <ul class="doc">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>
    <script src="./112-animation.js"></script>

    <script>

        // 1.获取元素
        var view = document.getElementsByClassName("view")[0];
        var items = document.getElementsByClassName("item");


        // 封装排他函数
        function siblings(ele) {
            for (var k = 0; k < ele.length; k++) {
                ele[k].className = "item";
            }
        }

        var timerId;

        // 2.给所有的小圆点都绑定事件
        for (var i = 0; i < items.length; i++) {
            items[i].index = i;
            items[i].addEventListener('mouseenter', function() {
                // 调用排他函数 修改所有小圆点的样式为默认
                siblings(items)
                    // 修改当前小圆点的样式为选中状态
                this.className = "item active";

                // 计算一个目标值 用来控制view 元素每次的移动距离
                // console.log(this.index);
                var target = this.index * view.children[0].offsetWidth;
                console.log(-target);
                // 调用函数 让他动
                slowMove(view, -target);
                // constantMove(view, -target)
            })
        }

    </script>

</body>

</html>

二.自动轮播

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .content {
            width: 600px;
            height: 315px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }
        
        .content .view {
            width: 2400px;
            height: 315px;
            position: absolute;
        }
        
        .content .view div {
            width: 600px;
            height: 315px;
            float: left;
        }
        
        .content .view div img {
            width: 100%;
            height: 100%;
        }
        
        .content .doc {
            width: 105px;
            height: 15px;
            position: absolute;
            left: 50%;
            margin-left: -52px;
            bottom: 20px;
        }
        
        .content .doc li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin-right: 15px;
        }
        
        .content .doc li:last-child {
            margin-right: 0px;
        }
        
        .content .doc .active {
            background-color: red;
        }
        
        .content .next,
        .content .prev {
            width: 40px;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            text-align: center;
            line-height: 70px;
            font-size: 24px;
            position: absolute;
            z-index: 2;
            top: 50%;
            margin-top: -35px;
            display: none;
        }
        
        .content .next {
            right: 0px;
        }
        
        .content .prev {
            left: 0px;
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="view">
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01cmWoxh1S6H07yrmcM_!!6000000002197-0-tps-846-472.jpg" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg" alt="">
            </div>
        </div>
        <ul class="doc">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <div class="next"> &gt; </div>
        <div class="prev"> &lt; </div>
    </div>
    <script src="./112-animation.js"></script>

    <script>

        // 1.获取元素
        var view = document.getElementsByClassName("view")[0];
        var items = document.getElementsByClassName("item");
        var content = document.getElementsByClassName("content")[0];
        var next = document.getElementsByClassName("next")[0];
        var prev = document.getElementsByClassName("prev")[0];

        var timerId;
        var timerId2;

        // 封装排他函数
        function siblings(ele) {
            for (var k = 0; k < ele.length; k++) {
                ele[k].className = "item";
            }
        }

        // 计数器
        var count = 0;

        function autoPlay() {
            clearInterval(timerId2);
            timerId2 = setInterval(function() {
                // 排他
                siblings(items);
                // 让计数器自增
                count++;
                // 为了限制小圆点的数量
                if (count >= 4) {
                    count = 0;
                }

                // console.log(count);
                // 改变当前小圆点的样式
                items[count].className = "item active";
                // 计算出目标值距离
                var target = count * view.children[0].offsetWidth;

                // 调用函数
                slowMove(view, -target);
            }, 2000)
        }

        // 自动轮播开始
        autoPlay();

        content.onmouseenter = function() {
            clearInterval(timerId2);
            next.style.display = "block";
            prev.style.display = "block";
        }
        content.onmouseleave = function() {
            autoPlay();
            next.style.display = "none";
            prev.style.display = "none";
        }

        next.onclick = function() {
            // 排他
            siblings(items);

            count++;
            // 为了限制小圆点的数量
            if (count >= 4) {
                count = 0;
            }

            // console.log(count);
            // 改变当前小圆点的样式
            items[count].className = "item active";
            // 计算出目标值距离
            var target = count * view.children[0].offsetWidth;

            // 调用函数
            slowMove(view, -target);
        };

        prev.onclick = function() {
            // 排他
            siblings(items);

            count--;
            // 为了限制小圆点的数量
            if (count < 0) {
                count = 3;
            }

            // 改变当前小圆点的样式
            // console.log(count);
            items[count].className = "item active";
            // 计算出目标值距离
            var target = count * view.children[0].offsetWidth;

            // 调用函数
            slowMove(view, -target);
        };

    </script>

</body>

</html>

三.无缝轮播

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .content {
            width: 600px;
            height: 315px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }
        
        .content .view {
            width: 3000px;
            height: 315px;
            position: absolute;
        }
        
        .content .view div {
            width: 600px;
            height: 315px;
            float: left;
        }
        
        .content .view div img {
            width: 100%;
            height: 100%;
        }
        
        .content .doc {
            width: 105px;
            height: 15px;
            position: absolute;
            left: 50%;
            margin-left: -52px;
            bottom: 20px;
        }
        
        .content .doc li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin-right: 15px;
        }
        
        .content .doc li:last-child {
            margin-right: 0px;
        }
        
        .content .doc .active {
            background-color: red;
        }
        
        .content .next,
        .content .prev {
            width: 40px;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            text-align: center;
            line-height: 70px;
            font-size: 24px;
            position: absolute;
            z-index: 2;
            top: 50%;
            margin-top: -35px;
            display: none;
        }
        
        .content .next {
            right: 0px;
        }
        
        .content .prev {
            left: 0px;
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="view">
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01cmWoxh1S6H07yrmcM_!!6000000002197-0-tps-846-472.jpg" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg" alt="">
            </div>
            <div>
                <img src="https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png" alt="">
            </div>
        </div>
        <ul class="doc">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <div class="next"> &gt; </div>
        <div class="prev"> &lt; </div>
    </div>
    <script src="./112-animation.js"></script>

    <script>

        // 1.获取元素
        var view = document.getElementsByClassName("view")[0];
        var items = document.getElementsByClassName("item");
        var content = document.getElementsByClassName("content")[0];
        var next = document.getElementsByClassName("next")[0];
        var prev = document.getElementsByClassName("prev")[0];

        var timerId;
        var timerId2;

        // 1.鼠标进入盒子 让 左右按钮显示 离开消失
        // 2.给左边按钮绑定事件 点击向左 走
        // 3.给右边按钮绑定事件 点击向右走
        // 4.自动轮播调用第二步就可以了
        // 5.焦点轮播

        // 封装排他函数
        function siblings(ele) {
            for (var k = 0; k < ele.length; k++) {
                ele[k].className = "item";
            }
        }

        // 3.给右边按钮绑定事件 点击向右走
        // 用来控制小圆点
        var circlCount = 0;
        // 用来计算view每次移动的目标值
        var viewCount = 0;
        next.onclick = function() {
            // 让计数器自增
            circlCount++;
            viewCount++;
            // 小圆点最大到3
            if (circlCount > 3) {
                circlCount = 0;
            }
            // 移动目标值  最大是 2400
            // viewCount  最大是4
            if (viewCount > 4) {
                viewCount = 1;
                view.style.left = 0 + "px";
            }
            siblings(items)
            items[circlCount].className = "item active";

            var target = viewCount * view.children[0].offsetWidth;
            slowMove(view, -target);
        }


        // 2.给左边按钮绑定事件 点击向左 走
        prev.onclick = function() {
                circlCount--;
                viewCount--;
                // 判断是否是第一张图片
                // console.log(circlCount);
                if (circlCount < 0) {
                    circlCount = items.length - 1;
                }
                if (viewCount < 0) {
                    viewCount = view.children.length - 2;
                    view.style.left = -(view.children.length - 1) * view.children[0].offsetWidth + "px";
                }

                siblings(items)
                items[circlCount].className = "item active";

                var target = viewCount * view.children[0].offsetWidth;
                slowMove(view, -target);
            }
            // 4.自动轮播调用第二步就可以了
        function autoPlay() {
            timerId2 = setInterval(function() {
                next.onclick();
            }, 2000);
        }
        autoPlay();

        // 1.鼠标进入盒子 让 左右按钮显示 离开消失
        content.onmouseenter = function() {
            next.style.display = "block";
            prev.style.display = "block";

            clearInterval(timerId2);
        }
        content.onmouseleave = function() {
            next.style.display = "none";
            prev.style.display = "none";
            autoPlay()
        }


        // 5.焦点轮播
        for (var i = 0; i < items.length; i++) {
            items[i].index = i;
            items[i].addEventListener('mouseenter', function() {
                // 调用排他函数 修改所有小圆点的样式为默认
                siblings(items)
                    // 修改当前小圆点的样式为选中状态
                this.className = "item active";
                circlCount = this.index;
                viewCount = this.index;

                // 计算一个目标值 用来控制view 元素每次的移动距离
                // console.log(this.index);
                var target = viewCount * view.children[0].offsetWidth;
                console.log(-target);
                // 调用函数 让他动
                slowMove(view, -target);
                // constantMove(view, -target)
            })
        }

    </script>

</body>

</html>

四.回到顶部

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: pink;
        }

        .banner {
            width: 1200px;
            height: 600px;
            background-color: skyblue;
            margin: 100px auto;
        }

        .main {
            width: 1200px;
            height: 2000px;
            background-color: purple;
            margin: 100px auto;
        }

        .footer {
            width: 100%;
            height: 400px;
            background-color: black;
        }

        .sidbar {
            width: 60px;
            height: 240px;
            position: fixed;
            left: 0px;
            top: 50%;
            margin-top: -120px;
            border: 1px solid red;
            display: none;
        }

        .sidbar div {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 12px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .sidbar div:last-child {
            line-height: 30px;
        }
    </style>
</head>

<body>

    <div class="header"></div>
    <div class="banner"></div>
    <div class="main"></div>
    <div class="footer"></div>
    <div class="sidbar">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div class="backTop">回到 <br> 顶部</div>
    </div>
    <script src="./animation.js"></script>

    <script>

        var main = document.getElementsByClassName("main")[0];
        var sidbar = document.getElementsByClassName("sidbar")[0];
        var backTop = document.getElementsByClassName("backTop")[0];
        var timerId = null;
        document.onscroll = function () {
            if (window.pageYOffset >= main.offsetTop) {
                sidbar.style.display = "block";
            } else {
                sidbar.style.display = "none";
            }
        }
        // 用来获取 页面 滚动条被圈去的 上侧距离
        console.log(document.documentElement.scrollTop);

        backTop.onclick = function () {
            timerId = setInterval(function () {
                // 目标值 - 当前位置 /10
                // 缓慢
                var speed = (0 - document.documentElement.scrollTop) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                document.documentElement.scrollTop += speed;
                
                // 匀速
                // document.documentElement.scrollTop -= 20;

                if (document.documentElement.scrollTop == 0) {
                    clearInterval(timerId);
                }
            }, 20)
        }

    </script>

</body>

</html>

五.旋转小球

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid red;
            position: relative;
        }

        .content .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="btn">点击运动</div>
    <div class="content">
        <div class="box"></div>
    </div>

    <script>

        var content = document.getElementsByClassName("content")[0];
        var box = document.getElementsByClassName("box")[0];
        var btn = document.getElementsByClassName("btn")[0];
        var timerid;
        btn.onclick = function () {
            var maxLeft = content.offsetWidth - (content.clientLeft * 2) - box.offsetWidth;
            var maxTop = content.offsetHeight - (content.clientTop * 2) - box.offsetHeight;
            timerid = setInterval(function () {
                if (box.offsetLeft < maxLeft && box.offsetTop == 0) {
                    box.style.left = box.offsetLeft + 10 + "px";
                } else if (box.offsetTop < maxTop && box.offsetLeft == maxLeft) {
                    box.style.top = box.offsetTop + 10 + "px";
                } else if (box.offsetTop == maxTop && box.offsetLeft > 0) {
                    box.style.left = box.offsetLeft - 10 + "px";
                } else if (box.offsetLeft == 0 && box.offsetTop > 0) {
                    box.style.top = box.offsetTop - 10 + "px";
                }
            }, 20)
        }

    </script>

</body>

</html>

前端拓海
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
day02-JavaScript-Vue
qq_44428997的博客
03-02 1143
文章目录1 JavaScript1.1 介绍1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法1.5.1.2 String对象语法格式属性和方法1.5.1.3 JSON对象自定义对象json对象1.5.2 BOM对象1.5.2.1 Window对象1.5.2.2 Location对象1.5.3 D
cgb2106-day11
cgblpx的博客
08-09 5166
标题
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3977
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
03 day5--javascript笔记pink老师-提高篇之ES6+，重中之重
小女不才
08-31 1814
思维导图： 1. 严格模式 JavaScript 除了提供正常模式外，还提供了严格模式 ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码 严格模式在IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略 严格模式对正常的JavaScript语义做了一些更改： 消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为 消除代码运行的一些不安全之处，保证代码运行的安全 提高编译器效率，增加运行速度 禁用了在 ECMAScri
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3941
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
js_day11---初识javascript+基本语法
Gavin
11-26 1262
Day11 ●为什么要学习javascript        Javascript是实现网页动态效果的基石，在web开发中扮演重要的角色，被广泛应用到各个领域。        ①网页游戏        ②地图搜索（google，baidu）        ③股市信息查询        ④web聊天 在web开发中，js是必不可少的技术！同时js也是ajax/jque
day01-02前端基础
weixin_46164192的博客
06-04 1620
AJavaScriptAndXML，异步JavaScript和XML数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据异步交换：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等快速入门：访问官网、复制组件代码，调整。
Day03--前端项目构建
weixin_44077834的博客
05-29 3806
项目构建 在webstorm中打开终端，进入项目目录 输入 vue init webpack pytools-fe-ver1.0 初始化项目 项目名称为pytools-fe-ver1.0 添加项目描述，作者 runtime选择第一项’Runtime + Compiler’,按空格切换，按回车确认 Install vue-router 选择Y Use ESLint to lint your code? 选择Y Standard 选择’Stander’ Set up unit tests 选择N Set up
JavaScript-ECMAScript编程
qq_46096136的博客
09-30 8034
1、JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。2、JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。3、JavaScript和Java的区别?JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。Java运行在JVM当中。JavaScript和Java没有任何关系。
JavaScript-时区
MountGao的博客
08-13 3310
JavaScript-时区 简介 时区是地球上的区域使用同一个时间定义。以前，人们通过观察太阳的位置（时角）决定时间，这就使得不同经度的地方的时间有所不同（地方时）。1863年，首次使用时区的概念。时区通过设立一个区域的标准时间部分地解决了这个问题。 世界各国位于地球不同位置上，因此不同国家，特别是东西跨度大的国家日出、日落时间必定有所偏差。这些偏差就是所谓的时差。 历史 在农业社会，世界各地一般采用各自的地方时。十九世纪随着长途铁路运输的发展，1870年代加拿大铁路工程师弗莱明首次提出全世界按统一标准
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 385
npm。
2024前端面试题-js篇
FormAda的博客
08-22 907
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
layui栅格布局设置列间距不起作用
最新发布
gc_2299的博客
08-26 584
记录layui栅格布局设置列间距不起作用的解决办法
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 848
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
vue全局参数
qq_34631220的博客
08-24 207
其它页面如果想监听改变。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 915
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
Vue路由
程小白的博客
08-19 750
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
JavaScript 错误 - Throw 和 Try to Catch的使用
逆风优雅的博客
08-23 177
trycatchthrow上面的代码 因为 try中 没有adddlert这个方法，或者这个方法有误，这时，代码会执行catch部分。JavaScript 实际上会创建带有两个属性的Error 对象name和message。
JavaScript ECMAScript 6
歌舞阿瓜的博客
08-21 185
使用const关键字定义常量，限制的是给常量分配值的动作，但是不限制常量中的值。使用let声明的变量，只在块级作用域中有效，在块之外无法访问。键值一致的时候可以省略值，函数写法可以省略function。=可能得到的结果不理想，可以使用Object.is()无需实例化对象也可以直接使用static修饰的方法。设置对象的prototype和proto。需要注意，箭头函数没有this。构建类，获取和修改类的属性。使用继承，减少冗余代码。set集合中不允许重复。map集合中存储键值对。
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值