Javascript实现简单进度条

水深无声 2022-06-05 08:17 362阅读 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 条评论，362人围观）

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

相关阅读

相关实现简单的进度条效果

封装一个简单的jquery插件，实现简单的可滑动进度条。可能一些情况没有考虑到，仅供参考。另外我还写了一篇原生实现滑动进度条的文章，仅仅需要修改样式即可。文章链接如下：[h

淡淡的烟草味﹌/ 2023年07月18日 04:59/ 0 赞/ 38 阅读

相关 js简单进度条

js的简单进度条样式 <style> .sliderBar-wrap { display: inline-bloc

傷城~/ 2023年06月21日 08:51/ 0 赞/ 28 阅读

相关 JavaScript CSS 线性进度条

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

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

相关 android简单进度条

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

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

相关 13、JavaScript进度条的实现

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

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

相关 Linux下实现简单进度条

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

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

相关 Javascript实现简单进度条

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

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

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

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

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

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

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

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

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

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

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