<!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. https://software.intel.com/sites/landingpage/pintool/docs/97998/Pin/html/

    https://software.intel.com/sites/landingpage/pintool/docs/97998/Pin/html/   http://www.brendangregg. ...

  2. SynchronizedStack -- tomcat8同步栈

    同步栈(安全栈): org.apache.tomcat.util.collections.SynchronizedStack通过stack栈锁来控制栈中获取的类T.通过push.pop和clear方法 ...

  3. net.ipv4.tcp_fin_timeout的错误理解

        按照文档的说法,貌似长久以来我对于tcp_fin_timeout的理解都是错误的 先备份在这里,再验证 提高Linux应对短连接的负载能力 在存在大量短连接的情况下,Linux的TCP栈一般都 ...

  4. JAVA 或与非运算符 与（&）、或（|）、异或（^）

    运算步骤: 第一步:.转成二进制,即01表示的数字,如5的二进制为 0000  0101,我用八位表示. 第二步:比较二者位数上的数字 1．与运算符 与运算符用符号“&”表示,其使用规律如下: ...

  5. 【Linux】宝塔上 GitLab数据迁移修改配置后nginx无法启动

    背景: 服务器A 向 服务器B 迁移数据,修改配置重启.发现gitlab的 nginx 无法启动. 查找原因 gitlab-ctl tail 错误信息: 网上查了查,似乎是宝塔的问题, 原因应该是为了 ...

  6. LeetCode_342. Power of Four

    342. Power of Four Easy Given an integer (signed 32 bits), write a function to check whether it is a ...

  7. attribute__关键字举例之visibility

    /** @file visibilityT.c * @note * @brief * @author * @date 2019-6-20 * @note v1.0.0 Created * @histo ...

  8. 使用sql语句创建和删除约束示例代码

    使用sql语句创建和删除约束  约束类型 主键约束(Primary Key constraint) --:要求主键列数据唯一,并且不允许为空.  唯一约束(Unique constraint) --: ...

  9. Docker之使用Docker-compose搭建LNMP环境

    之前有随笔介绍使用Docker-compose搭建LNMP环境(centos6 php5.6) https://www.cnblogs.com/minseo/p/10146982.html 本文介绍D ...

  10. python 线程队列LifoQueue-LIFO（36）

    在 python线程队列Queue-FIFO  文章中已经介绍了 先进先出队列Queue,而今天给大家介绍的是第二种:线程队列LifoQueue-LIFO,数据先进后出类型,两者有什么区别呢? 一.队 ...