实现一个条形进度条

港控/mmm° 2022-12-07 12:03 184阅读 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 条评论，184人围观）

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

相关阅读

相关实现简易进度条

法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

傷城~/ 2022年12月13日 04:54/ 0 赞/ 211 阅读

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

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

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

相关实现一个条形进度条

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

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

相关 Python使用一个进度条

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

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

相关实现一个进度条效果

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

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

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

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

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

相关 python实现进度条

import sys import time def view\_bar(num, total): rate = num / total r

怼烎@/ 2022年06月09日 07:19/ 0 赞/ 358 阅读

相关 JS实现进度条

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

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

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

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

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

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

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

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