<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>测试进度条</title>

         <style>

             div#loadbar {

                 width: 300px;

                 background-color: lavender;

                 #border: 1px solid fuchsia;

                 text-align: center;

                 border-radius: 5px;

             }

             #bar {

                 display: block;

                 font-family: arial;

                 font-size: 12px;

                 background-color: red;

                 text-align: center;

                 padding: 5px 0px;

                 border-radius: 5px;

             }

         </style>

         <script type="text/javascript">

             var i = 0;

             function startbar() {

                 var showbar = setInterval("setbar()", 1000);

             }

             function setbar() {

                 console.log("setbar");

                 i += 20;

                 if(i > 100) {

                     clearInterval(showbar);

                 }

                 document.getElementById("bar").style.width = i + "%";

                 document.getElementById("bar").innerHTML = i + "%";

             }

             startbar();

         </script>

     </head>

     <body>

         <div id="loadbar">

             <span id="bar" style="width: 0%;">20%</span>

         </div>

     </body>

 </html>

javascript进度条实现的更多相关文章

  1. JavaScript 进度条重复加载

    <!DOCTYPE HTML> <html> <head> <meta charset ="utf-8"> <title> ...

  2. Javascript进度条

    一个简单的进度条演示. <!doctype html> <html> <head> <meta charset="utf8"> &l ...

  3. JavaScript进度条（datalist/repeater等多个进度条）

    JS代码: function SingleProgressBar() { var iload = document.getElementById("iLoading"); var ...

  4. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  8. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  9. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

  1. Qt--core模块概述

    QtCore模块是所有其它Qt模块的基础,包含以下核心功能: Qt Data Types:数据类型Qt Object Model:对象模型(包括元对象模型.属性系统.信号与槽机制.对象树)Input/ ...

  2. http://stblog.baidu-tech.com/?p=1684) coredump调试记录 - PHP篇 原创： 扶墙 贝壳产品技术 今天

    http://stblog.baidu-tech.com/?p=1684) coredump调试记录 - PHP篇 原创: 扶墙 贝壳产品技术 今天

  3. 我大概知道他在说什么了，是对内存单元的竞争访问吧。Python有GIL，在执行伪码时是原子的。但是伪码之间不保证原子性。 UDP丢包，你是不是做了盲发？没有拥塞控制的情况下，确实会出现丢包严重的情况。你先看看发送速率，还有是否带有拥塞控制。

    我大概知道他在说什么了,是对内存单元的竞争访问吧.Python有GIL,在执行伪码时是原子的.但是伪码之间不保证原子性.   UDP丢包,你是不是做了盲发?没有拥塞控制的情况下,确实会出现丢包严重的情 ...

  4. TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.org

    TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.o ...

  5. Acunetix Web Vulnerability Scanner abbr. AWVS

    awvs 中文手册详细版 - 木讷 - 博客园https://www.cnblogs.com/iamver/p/7124718.html Download Acunetix Trialhttps:// ...

  6. Python3基础 complex 声明复数

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  7. QML注意color小写

    1.用的时候大小写一样的 如: color="#3D3D3D" 和 color="#3d3d3d"都是同一个颜色 2.判断的时候,QML默认是小写 如:if(c ...

  8. word封面背景及水印背景

    word封面背景及水印背景 觉得有用的话,欢迎一起讨论相互学习~Follow Me 制作封面 在制作商业项目申报书的时候我们想要封面尽可能美观,常用的方法是使用插入一张很大的图片作为背景. 标题等文本 ...

  9. （十）进度条媒体对象和 Well 组件

    一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...

  10. 【grpc proto】python使用proto文件生成简易的服务端和客户端

    1.安装python-grpc(注意,是grpcio包,不是grpc包!) pip install grpcio 2.编写.proto文件 grpc教程:http://doc.oschina.net/ ...