js this用法 进度条

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量117 收藏
点赞数
分类专栏： 新手 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42507764/article/details/128013899
版权
本文展示了JavaScript如何与HTML元素交互，包括计算、事件处理、样式修改等。通过点击事件改变元素内容，动态计算加减乘除及百分比，并实现进度条效果。此外，还涉及this关键字的理解及其在不同上下文中的应用。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        input{
            vertical-align: middle;
            height: 30px;
            padding: 0;
        }
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px dashed yellowgreen;
            vertical-align: middle;
            font: 20px/30px "";
            text-align: center;
        }
        p{
            width: 200px;
            height: 30px;
            border: 2px solid orange;
            vertical-align: middle;
            display: inline-block;
            background: #8df;
        }
        div{
            display: inline-block;
            width: 30px;
            height: 30px;
            font: 20px/30px "";
            text-align: center;
            border: 1px solid #000;
            background: #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入数字">
    <span></span>
    <input type="text" placeholder="输入数字">
    <span style="cursor: pointer;">=</span>
    <p></p>
    <br>
    <div>+</div>
    <div>-</div>
    <div>*</div>
    <div>/</div>
    <div>%</div>


    <script>
        // 获取元素节点
        var aInput = document.querySelectorAll('input');
        console.log(aInput);
        var aSpan = document.querySelectorAll('span');
        console.log(aSpan);
        var oP = document.querySelector('p');
        console.log(oP);
        var aDiv = document.querySelectorAll('div');
        console.log(aDiv);


        // 选择 运算符
            // aDiv[0].onclick = function(){
            //     aSpan[0].innerHTML = aDiv[0].innerHTML;
            // }

            // aDiv[1].onclick = function(){
            //     aSpan[0].innerHTML = aDiv[1].innerHTML;
            // }

            // aDiv[2].onclick = function(){
            //     aSpan[0].innerHTML = aDiv[2].innerHTML;
            // }

            // aDiv[3].onclick = function(){
            //     aSpan[0].innerHTML = aDiv[3].innerHTML;
            // }

            // aDiv[4].onclick = function(){
            //     aSpan[0].innerHTML = aDiv[4].innerHTML;
            // }


                       // 5
        // for(var i=0;i<aDiv.length;i++){
        //     console.log(aDiv[i]);

        //     aDiv[i].onclick = function(){
        //         // console.log(aSpan[0])
        //         // console.log(aDiv[i]);
        //         // console.log(i);  // 5
        //         aSpan[0].innerHTML = aDiv[i].innerHTML;
        //     }
        // }
        // console.log(i);  // 5


        for(var i=0;i<aDiv.length;i++){
            console.log(aDiv[i]);

            aDiv[i].onclick = function(){
                // console.log(this);
                aSpan[0].innerHTML = this.innerHTML;
            }
        }
      
        // 计算结果
        aSpan[1].onclick = function(){
            
            // 获取 两个输入框的值
            var num1 = aInput[0].value;
            console.log(num1);
            var num2 = aInput[1].value;
            console.log(num2);

            var ysf = aSpan[0].innerHTML;
            console.log(ysf);

            if(num1==="" || num2===""){
                alert('没有输入数字，请输入后计算')
            }else if(ysf === ''){
                alert('请选择运算符后计算')
            }else if(ysf === '+'){
                oP.innerHTML =  +num1 + +num2;
            }else if(ysf === '-'){
                oP.innerHTML =  num1 - num2;
            }else if(ysf === '*'){
                oP.innerHTML =  num1 * num2;
            }else if(ysf === '/'){
                oP.innerHTML =  num1 / num2;
            }else if(ysf === '%'){
                oP.innerHTML =  num1 % num2;
            }


            aInput[0].value = '';
            aInput[1].value = '';
            aSpan[0].innerHTML = '';
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        // this
            // this是js中的一个关键字，表示 这个
            // 这个 是谁呢？
            // 我们可以在任何this 访问 this
                // 全局中 访问 this，表示的是 window对象
                // 函数中 访问 this, 表示的是 函数的调用者--对象
            // 所以 this在 不同情况下 表示的是 不同的对象 --- this指向


        // this指向 ---- this到底是谁
            // 全局中的 this 指向 window对象
            // 普通函数中的 this 指向 window对象
            // 事件处理函数中的 this 指向 事件源
            // 定时器中的this 指向 window对象
            // 对象方法中的this 指向 对象本身

        // 全局的this
        console.log(this);   // window对象


        // 普通函数中的this
        function fn1(){
            console.log(this);  // window对象
        }

            fn1();
            // window.fn1();
            // this.fn1();


        // 事件处理函数中的this
        document.querySelector('#box').onclick = function(){
            console.log(this);  // 事件源
            // this.style.border = '20px double blue';
        }


        //  定时器中的this
        setInterval(function(){
            console.log(this);  // window对象
        },3000);



        // 对象方法中的this
        var obj = {
            name: 'haha',
            age: 18,
            hello: function(){
                console.log(this);  // 方法所属的对象--对象本身
                console.log(this.age);  // 18
            }
        }

        obj.hello();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 30px;
            border: 5px groove orange;
            border-radius: 20px;
            position: relative;
        }
        #box p{
            margin: 0;
            width: 0;
            height: 30px;
            background: pink;
            border-radius: 15px;
        }
        #box span{
            width: 100px;
            height: 30px;
            background: rgba(0,0,0,.3);
            text-align: center;
            font: 20px/30px "楷体";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 800px;">
        <p></p>
        <span>0%</span>
    </div>

    <script src="./../../../public.js"></script>
    <script>
        // 获取元素节点
        var oBox = document.querySelector('#box');
        console.log(oBox);
        var oChild = document.querySelector('#box>p');
        console.log(oChild);
        var oBili = document.querySelector('#box>span');
        console.log(oBili);

        // 得到 父元素的宽度  并 去掉px单位
        // var oBoxWidth = parseInt(oBox.style.width);
        var oBoxWidth = +oBox.style.width.slice(0,-2);
        console.log(oBoxWidth);

        // 定义 宽度的 初始值
        var num = 0;

        // 定义定时器
        var timer = setInterval(function(){
            // 更改 宽度 初始值
            num += randomNum(1,5);

            // 给 子元素p 设置宽度
            oChild.style.width = num+'px';

            // 设置 显示百分比
            oBili.innerHTML = (num/oBoxWidth*100).toFixed(2) + '%';

            // 判断 子元素p的宽度 是否 父元素一样了或者超过了
            if(num>=oBoxWidth){
                // 停止定时器
                clearInterval(timer);

                // 强行 设置 宽度初始值为 和 父元素一样的值
                num = oBoxWidth;

                // 因为 有可能 子元素p的宽度 超过 父元素，强制拉回来
                oChild.style.width = num+'px';
                // 因为 有可能 子元素p的宽度 超过 父元素 所以 通过 num参与计算的值就可能超100%，强行设置百分百
                oBili.innerHTML = num/oBoxWidth*100 + '%';
            }

        },50)
        
        





    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 30px;
            border: 5px groove orange;
            border-radius: 20px;
            position: relative;
        }
        #box p{
            margin: 0;
            width: 0;
            height: 30px;
            background: pink;
            border-radius: 15px;
        }
        #box span{
            width: 100px;
            height: 30px;
            background: rgba(0,0,0,.3);
            text-align: center;
            font: 20px/30px "楷体";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 800px;">
        <p></p>
        <span>0%</span>
    </div>
    <button id="start">开始</button>

    <script src="./../../../public.js"></script>
    <script>
        // 获取元素节点
        var oBox = document.querySelector('#box');
        console.log(oBox);
        var oChild = document.querySelector('#box>p');
        console.log(oChild);
        var oBili = document.querySelector('#box>span');
        console.log(oBili);
        var oStart = document.querySelector('#start');
        console.log(oStart);

        // 得到 父元素的宽度  并 去掉px单位
        // var oBoxWidth = parseInt(oBox.style.width);
        var oBoxWidth = +oBox.style.width.slice(0,-2);
        console.log(oBoxWidth);

        // 定义 宽度的 初始值
        var num = 0;

        // 接收 定时器的返回值
        var timer = null;


        // 给 开始按钮 绑定 单击事件
        oStart.onclick = function(){
            
            // 停止定时器 --- 停止 上一个定时器  ---- 防抖
            clearInterval(timer);

            // 开启定时器
            timer = setInterval(function(){
                // 更改 宽度 初始值
                num += randomNum(1,5);

                // 给 子元素p 设置宽度
                oChild.style.width = num+'px';

                // 设置 显示百分比
                oBili.innerHTML = (num/oBoxWidth*100).toFixed(2) + '%';

                // 判断 子元素p的宽度 是否 父元素一样了或者超过了
                if(num>=oBoxWidth){
                    // 停止定时器
                    clearInterval(timer);

                    // 强行 设置 宽度初始值为 和 父元素一样的值
                    num = oBoxWidth;

                    // 因为 有可能 子元素p的宽度 超过 父元素，强制拉回来
                    oChild.style.width = num+'px';
                    // 因为 有可能 子元素p的宽度 超过 父元素 所以 通过 num参与计算的值就可能超100%，强行设置百分百
                    oBili.innerHTML = num/oBoxWidth*100 + '%';
                }
            },50)
        }

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 30px;
            border: 5px groove orange;
            border-radius: 20px;
            position: relative;
        }
        #box p{
            margin: 0;
            width: 0;
            height: 30px;
            background: pink;
            border-radius: 15px;
        }
        #box span{
            width: 100px;
            height: 30px;
            background: rgba(0,0,0,.3);
            text-align: center;
            font: 20px/30px "楷体";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 800px;">
        <p></p>
        <span>0%</span>
    </div>
    <button id="start">开始</button>
    <button id="stop">暂停</button>

    <script src="./../../../public.js"></script>
    <script>
        // 获取元素节点
        var oBox = document.querySelector('#box');
        console.log(oBox);
        var oChild = document.querySelector('#box>p');
        console.log(oChild);
        var oBili = document.querySelector('#box>span');
        console.log(oBili);
        var oStart = document.querySelector('#start');
        console.log(oStart);
        var oStop = document.querySelector('#stop');
        console.log(oStop);

        // 得到 父元素的宽度  并 去掉px单位
        // var oBoxWidth = parseInt(oBox.style.width);
        var oBoxWidth = +oBox.style.width.slice(0,-2);
        console.log(oBoxWidth);

        // 定义 宽度的 初始值
        var num = 0;

        // 接收 定时器的返回值
        var timer = null;

        // 设置 暂停按钮 禁用
            // 元素节点.disabled = true/false
                // true 禁用
                // false 不禁用
        oStop.disabled = true;

        // 给 开始按钮 绑定 单击事件
        oStart.onclick = function(){
            // 停止定时器 --- 停止 上一个定时器  ---- 防抖
            clearInterval(timer);

            // 解除 暂停按钮的 禁用  ---- 不禁用
            oStop.disabled = false;

            // 设置 开始按钮被禁用
            this.disabled = true;

            // 开启定时器
            timer = setInterval(function(){
                // 更改 宽度 初始值
                num += randomNum(1,5);

                // 给 子元素p 设置宽度
                oChild.style.width = num+'px';

                // 设置 显示百分比
                oBili.innerHTML = (num/oBoxWidth*100).toFixed(2) + '%';

                // 判断 子元素p的宽度 是否 父元素一样了或者超过了
                if(num>=oBoxWidth){
                    // 停止定时器
                    clearInterval(timer);

                    // 强行 设置 宽度初始值为 和 父元素一样的值
                    num = oBoxWidth;

                    // 因为 有可能 子元素p的宽度 超过 父元素，强制拉回来
                    oChild.style.width = num+'px';
                    // 因为 有可能 子元素p的宽度 超过 父元素 所以 通过 num参与计算的值就可能超100%，强行设置百分百
                    oBili.innerHTML = num/oBoxWidth*100 + '%';

                    // 设置 暂停按钮被禁用 
                    oStop.disabled = true;
                }
            },50)
        }


        // 给 暂定按钮 绑定 单击事件
        oStop.onclick = function(){
            // 停止定时器
            clearInterval(timer);

            // 设置 暂停按钮被禁用 
            this.disabled = true;

            // 解除 开始按钮的禁用 ---- 不禁用
            oStart.disabled = false;
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 30px;
            border: 5px groove orange;
            border-radius: 20px;
            position: relative;
        }
        #box p{
            margin: 0;
            width: 0;
            height: 30px;
            background: pink;
            border-radius: 15px;
        }
        #box span{
            width: 100px;
            height: 30px;
            background: rgba(0,0,0,.3);
            text-align: center;
            font: 20px/30px "楷体";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 800px;">
        <p></p>
        <span>0%</span>
    </div>
    <button id="start">开始</button>
    <button id="stop">暂停</button>
    <button id="reset">重置</button>

    <script src="./../../../public.js"></script>
    <script>
        // 获取元素节点
        var oBox = document.querySelector('#box');
        console.log(oBox);
        var oChild = document.querySelector('#box>p');
        console.log(oChild);
        var oBili = document.querySelector('#box>span');
        console.log(oBili);
        var oStart = document.querySelector('#start');
        console.log(oStart);
        var oStop = document.querySelector('#stop');
        console.log(oStop);
        var oReset = document.querySelector('#reset');
        console.log(oReset);

        // 得到 父元素的宽度  并 去掉px单位
        // var oBoxWidth = parseInt(oBox.style.width);
        var oBoxWidth = +oBox.style.width.slice(0,-2);
        console.log(oBoxWidth);

        // 定义 宽度的 初始值
        var num = 0;

        // 接收 定时器的返回值
        var timer = null;

        // 设置 暂停 和 重置 按钮 禁用
            // 元素节点.disabled = true/false
                // true 禁用
                // false 不禁用
        oStop.disabled = true;
        oReset.disabled = true;

        // 给 开始按钮 绑定 单击事件
        oStart.onclick = function(){
            // 停止定时器 --- 停止 上一个定时器  ---- 防抖
            clearInterval(timer);

            // 解除 暂停 和 重置 按钮的 禁用  ---- 不禁用
            oStop.disabled = false;
            oReset.disabled = false;

            // 设置 开始按钮被禁用
            this.disabled = true;
            

            // 开启定时器
            timer = setInterval(function(){
                // 更改 宽度 初始值
                num += randomNum(1,5);

                // 给 子元素p 设置宽度
                oChild.style.width = num+'px';

                // 设置 显示百分比
                oBili.innerHTML = (num/oBoxWidth*100).toFixed(2) + '%';

                // 判断 子元素p的宽度 是否 父元素一样了或者超过了
                if(num>=oBoxWidth){
                    // 停止定时器
                    clearInterval(timer);

                    // 强行 设置 宽度初始值为 和 父元素一样的值
                    num = oBoxWidth;

                    // 因为 有可能 子元素p的宽度 超过 父元素，强制拉回来
                    oChild.style.width = num+'px';
                    // 因为 有可能 子元素p的宽度 超过 父元素 所以 通过 num参与计算的值就可能超100%，强行设置百分百
                    oBili.innerHTML = num/oBoxWidth*100 + '%';

                    // 设置 暂停按钮被禁用 
                    oStop.disabled = true;
                }
            },50)
        }


        // 给 暂定按钮 绑定 单击事件
        oStop.onclick = function(){
            // 停止定时器
            clearInterval(timer);

            // 设置 暂停按钮被禁用 
            this.disabled = true;

            // 解除 开始按钮的禁用 ---- 不禁用
            oStart.disabled = false;
        }


        // 给 重置按钮 绑定 单击事件
        oReset.onclick = function(){
            // 刷新网页，但是这个对逻辑没有锻炼，我们就不用这个了
            // location.reload();

            // 设置 重置 和 暂停 按钮  禁用
            this.disabled = true;
            oStop.disabled = true;
            // 设置 开始 按钮 不禁用
            oStart.disabled = false;

            // 停止定时器
            clearInterval(timer);

            // 设置 初始宽度的值为 0
            num = 0;

            // 设置 子元素p 的 宽度为 0px
            oChild.style.width = '0px';

            // 设置 子元素span 的 内容为 0%
            oBili.innerHTML = '0%';
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            border: 10px double pink;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        hello world!!!
        <p>pbox</p>
        <em>hahah</em>
        <span>lala</span>
        <nav>navbox</nav>
    </div>

    <header style="height: 50px;background: yellow">header</header>



    <script>
        // 获取元素节点
        var obox = document.querySelector('.box');
        console.log(obox);
        var oem = document.querySelector('.box em');
        console.log(oem);
        var ospan = document.querySelector('.box span');
        console.log(ospan);
        var onav = document.querySelector('.box nav');
        console.log(onav);


        console.log('-----------------华丽的分割线--------------');


        // 创建元素节点
            // document.createElement()
        var oh3 = document.createElement('h3')
        console.log(oh3);  // 
        oh3.innerHTML = '这是一个h3标签'

        var ostrong = document.createElement('strong');
        console.log(ostrong);  // 
        ostrong.innerHTML = '这是一个strong标签'

        var ofooter = document.createElement('footer');
        console.log(ofooter);  // 
        ofooter.innerHTML = '这是一个footer标签'


        console.log('-----------------华丽的分割线--------------');


        // 添加(插入) 元素节点
            // ele.appendChild(node)
                // 将 node 插入到 ele 内部的最后
            obox.appendChild(oh3);


            // ele.insertBefore(newnode,node);
                //  将 newnode 插入到 ele 内部的node 之前
            obox.insertBefore(ostrong,oem);

        
        console.log('-----------------华丽的分割线--------------');


        // 删除 元素节点
            // ele.removeChild(node)
                // 删除 ele 中的 node
        obox.removeChild(ospan);


        console.log('-----------------华丽的分割线--------------');

        
        // 克隆 元素节点
            // ele.cloneNode();
                // 如果 不传参 只会 克隆 这个元素自身
                // 如果 传参为true 就会 将这个元素及其内部的所有全部 克隆
        let o1 = obox.cloneNode();
        console.log(o1);

        let o2 = obox.cloneNode(true);
        console.log(o2);


        document.body.appendChild(o1);
        document.body.appendChild(o2);


        // 替换 元素节点
            // ele.replaceChild(newnode,node);
                // 将 ele 中的 node 替换成 newnode
        obox.replaceChild(ofooter,onav);

        



        // var s = document.createTextNode('1123haha');
        // console.log(s);
    </script>
</body>
</html>
javascript高级程序员
关注
专栏目录
</JavaScript>纯JS环形进度条生成插件
daveswong的博客
08-07 352
就是用来生成这样的效果先PO上代码，回头再详细解释吧，其实注释里面已经很详细了// CircleBarBuilder.js // 环形进度条生成插件 ; (function (global, undefined) { "use strict" //使用js严格模式检查，使语法更规范 var _global; //定义一些默认参数 var _options = { ...
JavaScript使用setInterval()实现真实进度条
Lance的博客
12-17 3303
参考博客：https://blog.csdn.net/q1w2e3r4470/article/details/72702406 1.为什么要使用真实进度条： 最近做到的一项业务数据量大，单次操作执行时间很长，所以需要前端看到真实进度条（根据前端上传的Excel表格处理其中的数据） 2.编码过程 我的项目前后端不分离，前端是jsp，后台是java 2.1前端： 为了方便理解，我把代码尽量精简 <style> button { width: 100%; .
实现JavaScript通用进度条
ZPan的博客
06-19 1677
JavaScript通用进度条，可作为音频、视频的控制进度条，用作普通的进度条。点击功能，拖拽功能，配合提供的函数可以实现更多功能...
js实现进度条组件（Progress）
weixin_45946494的博客
06-02 3172
js实现进度条组件（Progress） 1. 使用方式 配置参数 pNode: '' // 进度条放置容器 可以是选择器，也可以直接传入dom对象 width: '100%' // 进度条宽度 百分比为相对于父容器的宽度 height: 10 // 进度条的高度 min: 0 // 最小值 max: 100 // 最大值 value: 50 // 当前值 radius: '4px' // 边框圆角 若为空值则默认50% // 颜色 color: '#9d9dda' // track颜色 barColo
js ajax进度条,js 异步处理进度条
weixin_31980019的博客
08-06 301
1.先上图，效果如下：2.使用方法复制代码 代码如下:var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50});loader.Show();3.代码列出：复制代码 代码如下:/*处理进度条，异步加载器*/var Ajaxloader=new Class();Ajaxloader.prototype={Text:...
JavaScript实现音频进度条
热门推荐
不丢_hugh的博客
01-15 1万+
前言：刚学着使用HTML5和CSS和JavaScript做点东西比如作业emmmm但由于自己仅仅是速成的水平所以还是遇到了不少问题，所以决定把网络上比较难搜到或者难理解的用法记录下来，留做以后参考，也希望能给遇到相同问题的人一点点参考哈。 这一篇博客主要说的是用JS实现audio的自制简单进度条以及播放的跳转和播放时间的改变。起因是我感觉浏览器（我用的是火狐）自带的controls控件不太.........
js刻度形进度条控件实现
u012282382的博客
11-03 2394
1.效果如下: 2.首先此控件采用了vue框架(懒得写原生js)和svg实现。不bb，上代码。使用方法如下。 &lt;EnvProgress :radius="radius" :value="currentShowItem.value" ...
c js html页面进度条,利用js编写网页进度条效果
weixin_39844481的博客
06-04 144
一、基本思路为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定义执行完成后回调函数。该构造函数内部，遍历图片数组加载图片，每加载完一张图片，修改进度条进度，直至全部加载完成，进度条进度为100%。二、实现步骤(1)先搭建...
c js html页面进度条,js实现进度条的方法
weixin_30661579的博客
06-04 103
本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下：1.setTimeout和clearTimeout进度条.container{width:450px;border:1px solid #6C9C2C;height:25px;}#bar{background:#95CA0D;float:left;height:100%;text-align:center;line-hei...
js 异步处理进度条
10-29
本文将详细介绍js异步处理进度条的实现代码和使用方法。 一、异步处理进度条的实现 异步处理进度条的实现主要通过JavaScript和HTML/CSS来实现。首先，我们需要创建一个Ajaxloader类，用于管理进度条的显示和隐藏。...
利用js编写网页进度条效果
10-19
使用JavaScript（js）创建进度条可以增强用户体验，让等待过程变得不那么枯燥。下面将详细介绍利用js编写网页进度条效果的方法和步骤。 ### 一、基本思路 编写网页进度条的核心思想在于动态地更新进度条的显示状态...
vue.js+ElementUI实现进度条提示密码强度效果
10-15
校验规则中包括了对字符串长度的要求，以及一个自定义的`validatePassword`方法，该方法会计算密码中符合强度要求的元素个数，从而确定进度条的填充百分比。此外，还有一个`validateConfirmPassword`方法用于校验两...
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 441
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 899
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 592
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 238
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 563
【代码】JavaScript --数字Number的常用方法。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 238
【代码】Ant design vue中的提示框（a-tooltip）
环形加载进度条封装：Vue插件与原生js实现
3. **使用方法** - **安装Vue插件** 可以通过npm安装名为`loading-vue-component`的Vue插件： ``` npm install loading-vue-component ``` 然后在`main.js`中引入并使用： ```javascript import Loading ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值