<!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. transition 滑动动画

    html: <!-- 组件会在 `currentTabComponent` 改变时改变 --> <transition name="slide" mode=&qu ...

  2. 使用hwclock读取rtc中的时间时报错"hwclock: ioctl(RTC_RD_TIME) to /dev/rtc0 to read the time failed: No such device or address"如何处理?

    1. No such device or address 这一句表明当前的板子上没有这样的外设,检查设备树和硬件连接情况 2. 笔者是这样解决的 由于设备树中为rtc所指定的总线与硬件上的连接rtc的 ...

  3. Flutter Wrap 组件实现流布局

    Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表 现几乎一致.但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,main ...

  4. netty5服务端检测心跳超时断连

    客户端每5秒发送一次心跳给服务端,服务端记录最后一次心跳时间,通过定时任务每10秒检测一下,如果当前时间与最后一次收到的心跳时间之差超过某个阈值,断开与客户端的连接.基于之前的例子(netty5心跳与 ...

  5. mybatis查询mysql数据库tinyint(1)变为boolean类型

    mybatis查询mysql数据库对象转化为Map,tinyint(1)被转化为boolean类型,可以t通过避免使用tinyint(1)来解决.

  6. Windows自动计划任务与ParamStr详解

    ParamStr函数: ParamStr(1),..ParamStr(N) ParamStr(1)代表程序入口的第一个参数,同理,ParamStr(N)代表第N个参数.可通过如下操作进行参数的赋值. ...

  7. HTTPS小结 、TSL、SSL

    https://segmentfault.com/a/1190000009020635

  8. oracle归档空间

    select GROUP_NUMBER, NAME, STATE, TOTAL_MB-FREE_MB as USED_MB, FREE_MB, USABLE_FILE_MB from v$asm_di ...

  9. php面相对象基本概念，基本形式，传值

    面向对象基本概念 面向对象三大特性:封装  继承  多态 类与对象 类:是用于描述“某一些具有共同特征”的物体的概念,是某一类物体的总称. 通常,一个类所具有的共同特征包括2大方面的信息: 外观,形状 ...

  10. AndFix Bug 热修复框架原理及源码解析

    作为阿里巴巴开源的 Android 应用热修复工具——AndFix,帮助 Anroid 开发者修复应用的线上问题.Andfix 是 “Android hot-fix” 的缩写. 1.什么是AndFix ...