Javascript实现简单进度条

水深无声 2022-06-05 08:17 237阅读 0赞

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="JSjindutiao.css">
        <script src="JS%E8%BF%9B%E5%BA%A6%E6%9D%A1.js"> </script>
    </head>
    <body>
        <h1>Javascript进度条实现</h1>
        <div id="c1">
            <div id="c2" >10%</div>
        </div>
    
        <br>
        <button onclick="move()">加载</button>
    </body>
    </html>
    CSS代码：
    #c1{
        width: 100%;
        background-color: darkgray;
    }
    #c2{
        width: 10%;
        background-color:darkcyan;
        text-align: center;
        color: white;
        line-height:30px;
    }
    Js代码：
            function move(){
                var id = document.getElementById("c2");  //返回对拥有指定 ID 的第一个对象的引用。
                var width = 10;
                var temp = setInterval(go, 100);   //每0.1秒执行一次go函数
                function go(){
                    if(width >= 100)
                        clearInterval(temp);     //停止setInterval
                    else{ 
                        adasda++;
                        width++;
                        id.style.width = width+'%';    //使进度条百分比增长
                        id.innerHTML = width+'%';      
                    }
    
                }
            }

发表评论取消回复

表情：

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

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

相关阅读

相关 javascript进度条（js实例）

利用javascript模拟下载进度条，可以防止重复点击。 > 思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到1

Myth丶恋晨/ 2023年01月17日 03:23/ 0 赞/ 138 阅读

相关 JavaScript CSS 线性进度条

JS CSS 进度条 html <div id="show" class="show"> <div class="box">

谁借莪１个温暖的怀抱￠/ 2022年12月30日 14:57/ 0 赞/ 181 阅读

相关 android简单进度条

效果： ![Center][] 一：布局文件 ![Center 1][] activity\_main.xml文件： <LinearLay

冷不防/ 2022年09月29日 06:14/ 0 赞/ 215 阅读

相关 13、JavaScript进度条的实现

1、JavaScript进度条的实现 1.1 html代码 <body> <div id="main"> <div id="pro

「爱情、让人受尽委屈。」/ 2022年08月22日 00:02/ 0 赞/ 217 阅读

相关 Linux下实现简单进度条

我们在使用计算机不免有拷贝文件或者下载文件的时候，总会看到行行色色的进度条，如下图的两种：下载文件： ![这里写图片描述][SouthEast] 拷贝文件： ![

悠悠/ 2022年07月13日 07:56/ 0 赞/ 205 阅读

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

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

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

相关 Javascript实现简单进度条

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type

水深无声/ 2022年06月05日 08:17/ 0 赞/ 238 阅读

相关 python 简单文本进度条程序进度条加载进度条单行刷新

利用time库来替代某个程序的进行过程，做实例，思路是，简单打印出来程序进度单行刷新关键是\\r， python默认是print后换行，所以加一个\\r是光标

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:50/ 0 赞/ 444 阅读

相关 python 实现简单的进度条功能。

import time import sys n = 100 输出，0% sys.stdout.write("0%" +

阳光穿透心脏的1/2处/ 2022年02月04日 12:39/ 0 赞/ 302 阅读

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

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

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