<!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. 006 认识BeanNameAware

    在看Spring的生命周期,就要注意到Spring Aware,Aware是什么,在这篇文章中,主要是说明三个部分,Spring的生命周期[这个在后面会继续说明,这里这是一个大纲],然后说明Sprin ...

  2. DataSource接口 Connection pooling（连接池

    一.DataSource接口是一个更好的连接数据源的方法:  JDBC1.0是原来是用DriverManager类来产生一个对数据源的连接.JDBC2.0用一种替代的方法,使用DataSource的实 ...

  3. IDEA使用tomcat插件

    在实际项目开发中,特别是分布式项目,往往有N多个子项目需要同时启动测试. 这一切靠本地安装的tomcat是远远不够的,而且繁琐. 这里就需要用到tomca插件. 在pom.xml中引入: <bu ...

  4. ES6深入浅出-5 新版对象-2.属性修饰符

    对象语法增强 已经有了个对象的新增语法 还需要一个api来做呢?. 因为有的时候,你需要在旧的对象上添加get.set. 读的时候就走get 写的时候就走set 假设很早之前在项目里写了一个old对象 ...

  5. Laya的场景以及场景的加载

    参考: Laya项目发布详解 Laya2.0 内嵌模式.加载模式.分离模式.文件模式的场景加载创建和场景打开关闭 版本2.1.1.1 白鹭中的场景是exml制作,发布后exml代码都会打包到defau ...

  6. Apache调优（一）

    (1).Apache和Tomcat的关系 Apache HTTPD Server与Apache Tomcat同属于Apache的开源项目.两个都可以单独作为web server使用,但是又都有各自的特 ...

  7. bootstrap模态框怎么传递参数

    bootstrap参数传递可以用 data-参数名 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...

  8. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...

  9. 三、部署DNS

    通常情况下配置好域后,DNS会默认安装好,但有时候这个DNS只能解析域控的域名,不能解析其他域名,比如baidu.com之类的.此时需要配置转发器,把不能解析的域名转到其他DNS配置如下: 打开DNS ...

  10. 乐字节Java继承|方法重写、super和final关键字

    大家好,乐字节的小乐又来了,上一篇是:乐字节Java|JavaBean.继承与权限修饰,也是属于Java继承的,今天继续Java继承. 一. 方法的重写 父类不满足子类的要求,按需改写.注意 方法签名 ...