Javascript实现一个进度条

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <script type="text/javascript">
        function showProgressBar(){
            //预定义颜色
            var colors = ["#5B00AE","#28FF28","#FF8000","#00DB00","#408080","#79FF79"];
            //背景层，平铺，灰色，0.33透明度
            var divBackground = document.createElement("div");
            divBackground.style.position = "absolute";
            divBackground.style.top = "0";
            divBackground.style.left = "0";
            divBackground.style.width = "100%";
            divBackground.style.height = "100%";
            divBackground.style[‘background-color‘] = "gray";
            divBackground.style.opacity = "0.33";
            document.body.appendChild(divBackground);

            //进度条浮动层，居中
            var divFloat = document.createElement("div");
            divFloat.style.position = "absolute";
            divFloat.style.top = "30%";
            divFloat.style.left = "30%";
            divFloat.style.width = "40%";
            divFloat.innerHTML = ‘处理中...<div style="background-color: gray;width:100%;height:10px;"><div id="progressBar" style="background-color:firebrick;height:10px;"></div></div>‘;
            document.body.appendChild(divFloat);

            //进度条div dom对象
            var progressBar = document.getElementById("progressBar");

            var percent = 1;//控制进度条百分比
            var count = 0;//控制颜色切换

            setInterval(function(){
                //如果满了，重新开始并改变颜色
                if(percent >=100){
                    percent = 1;
                    count++;
                    progressBar.style[‘background-color‘] = colors[count % colors.length];
                }
                progressBar.style.width = percent + "%";
                percent += 2;
            },200);//200毫秒刷新一次
        }

    </script>
</head>
<body>
    <input type="button" value="Click Me" onclick="showProgressBar()"/>
</body>
</html>

效果图：

时间： 2024-11-08 20:26:33

Javascript实现一个进度条的相关文章

ftk学习记录（一个进度条文章）

[ 声明:版权全部,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 首先.在開始今天的文章之前.我们还是给朋友们展示一下前面一段代码的执行效果.效果例如以下, watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVpeGlhb3hpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" /> 有兴趣的朋友能

Android 基于帧布局实现一个进度条 FrameLayout+ProgressBar

在FrameLayout中添加一个ProgressBar居中 <ProgressBar android:layout_gravity="center" android:id="@+id/progressBar1" style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height=&qu

JavaScript 以及 css3进度条

JavaScript css3进度条使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1{ /*background-color: red;*/ border: solid 1px red; height: 30px;

python3-打印一个进度条

# Auther: Aaron Fan import sys,time for i in range(30): #打印一个#号,这种方法打印不会自动换行 sys.stdout.write('#') #实时刷新一下,否则上面这一条语句,会等#号全部写入到缓存中后才一次性打印出来 sys.stdout.flush() #每个#号等待0.1秒的时间打印 time.sleep(0.1)

JavaScript之Loading进度条

<title>网页loading</title> <script language="javascript"> function setSB(v, el) { var ie5 = (document.all && document.getElementsByTagName); if (ie5 || document.readyState == "complete") { filterEl = el.children

Linux下实现一个进度条

1.建立目录Process 2.建立process.h 代码如下: 3.建立process.c 代码如下: 4.建立main.c 代码如下: 5.建立Makefile文件运行process后的效果:

用shell实现一个进度条

#!/bin/bash i=0 str='#' ch=('|' '\' '-' '/') index=0 while [ $i -le 25 ] do printf "[%-25s][%d%%][%c]\r" $str $(($i*4)) ${ch[$index]} str+='#' let i++ let index=i%4 sleep 0.1 done printf "\n"

用sys模块创建一个进度条

import sys import time def view_bar(num, total): rate = num / total rate_num = int(rate * 100) r = "\r%s>%d%%" % ("=" * num, rate_num,) # \r:回到当前行的第一个位置 sys.stdout.write(r) #这里不能用print,因为print会自动换行 sys.stdout.flush() # 用新的数清空旧的数 if

javascript 进度条的几种方法

我们先看看最终效果: [url=169]169[/url] 第一步,基本构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g