实现一个条形进度条

港控/mmm° 2022-12-07 12:03 195阅读 0赞

<style> #c1 { width: 100%; background-color: darkgray; } #c2 { width: 10%; background-color: darkcyan; text-align: center; color: white; line-height: 30px; } </style>
    	
    	<h1>Javascript进度条实现</h1>
    	
    	<div id="c1">
    	    <div id="c2">10%</div>
    	</div>
    	
    	<br>
    	<button id='btn'>加载</button>

function move() { 
            var id = document.getElementById("c2");  //返回对拥有指定 ID 的第一个对象的引用。
            var btn = document.getElementById('btn');
            btn.setAttribute("disabled", true); // 点击之后就把按钮禁用
            var width = 10;
            var temp = setInterval(go, 100);   //每0.1秒执行一次go函数
            function go() { 
                if (width >= 100) { 
                    clearInterval(temp);     //停止setInterval
                    btn.removeAttribute("disabled"); // 到了100%之后按钮取消禁用
                }
                else { 
                    width++;
                    id.style.width = width + '%';    //使进度条百分比增长
                    id.innerHTML = width + '%';
                }
            }
        }
        
    	document.getElementById('btn').addEventListener('click', move);
    
    // 这里采用的方法是禁用按钮的方式来防止多次点击触发事件，当然还可以采用防抖的方式去实现；
        /* function debounce(fn, delay) { let timer = null return function () { let context = this; let args = [...arguments]; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args) }, delay) } } */

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 java 进度条中止_取消进度条的一个示例

执行下看看结果成功了第二次点击“Start ProgressBar”按钮，进度条又可以正常工作了 O了把最后的代码粘一份： package chapter4;

爱被打了一巴掌/ 2023年10月05日 21:26/ 0 赞/ 7 阅读

相关帆软生成进度条相关报表（普通进度条、条形图、甘特图）

场景近期做了几个帆软进度相关的报表，几经周折，总结如下： 1 普通进度条 1.1 下载安装帆软进度条插件参考连接：[https://help.finere

ゝ一世哀愁。/ 2023年07月20日 05:37/ 0 赞/ 12 阅读

相关实现一个圆形进度条（vue）

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创

淡淡的烟草味﹌/ 2022年12月07日 12:21/ 0 赞/ 454 阅读

相关实现一个条形进度条

<style> c1 { width: 100%; background-color: darkgray; } c2 { width: 10%; background-

港控/mmm°/ 2022年12月07日 12:03/ 0 赞/ 196 阅读

相关 Python使用一个进度条

由pyskydrive工程([http://code.google.com/p/pyskydrive/][http_code.google.com_p_pyskydrive])

淩亂°似流年/ 2022年09月30日 04:58/ 0 赞/ 207 阅读

相关实现一个进度条效果

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

左手的ㄟ右手/ 2022年09月24日 04:21/ 0 赞/ 237 阅读

相关 linux中实现一个简单的进度条

相信大家都用计算机或者手机下载过视屏或者游戏，那仫对于网速这个概念相信大家都不陌生，而我今天模拟实现的进度条就是来模拟实现类似加载或者拷贝文件时速度的显示。要了解进度条

本是古典何须时尚/ 2022年07月13日 07:55/ 0 赞/ 243 阅读

相关 JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。 <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年06月09日 03:24/ 0 赞/ 304 阅读

相关 Linux下实现进度条和彩色进度条

一、普通进度条 include <stdio.h> include <unistd.h> int main() {

雨点打透心脏的1/2处/ 2022年05月25日 03:44/ 0 赞/ 370 阅读

相关 JavaScript实现一个简单的进度条（有进度含百分比）

效果图： ![20201217201811429.png][] 代码： <!DOCTYPE html> <html> <hea

傷城~/ 2021年07月24日 11:14/ 0 赞/ 432 阅读