<!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. OpenJudge 计算概论1007:点评赛车

    总时间限制: 1000ms 内存限制: 65536kB描述4名专家对4款赛车进行评论1)A说:2号赛车是最好的:2)B说:4号赛车是最好的:3)C说:3号赛车不是最好的:4)D说: B说错了.事实上只 ...

  2. 搭建Nuxt项目（搭配Element UI、axios）

    使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...

  3. Tomcat7/8/8.5三种版本的redis-session-manager的jar和xml配置均不同

    chexagon/redis-session-manager: A tomcat8 session manager providing session replication via persiste ...

  4. javaselenium遇到的问题和解决方法(还没试，遇到问题可以先看这里)

    Firefox路径问题 firefox火狐浏览器去完成自动化测试时,代码报了如下错误: Cannot find firefox binary in PATH. mark sure firefox is ...

  5. Spring MVC 验证表单

      在实际工作中,得到数据后的第一步就是检验数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于一些逻辑上的错误,比如购买金额=购买数量×单价,这样的规则就很难使用注 ...

  6. mysql遇见Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre的问题

    问题出现的原因: MySQL 5.7.5及以上功能依赖检测功能.如果启用了ONLY_FULL_GROUP_BY SQL模式(默认情况下),MySQL将拒绝选择列表,HAVING条件或ORDER BY列 ...

  7. LODOP指定window默认打印机和临时默认打印机

    通过以下语句,可指定windows默认打印机LODOP.SET_PRINT_MODE("WINDOW_DEFPRINTER",某打印机名或序号);这种默认打印机是指的windows ...

  8. google浏览器插件fq教程

    google插件fq教程 思路 谷歌浏览器的应用市场 上有很多vp恩插件,不过要能访问谷歌浏览器的应用市场就得fq出去才行,而有一个很棒的插件就可以访问谷歌的旗下的一些东西,例如邮箱,Google搜索 ...

  9. 高级UI-事件传递

    事件传递在Android中有着举足轻重的作用,那么事件的传递在Android中又是怎么样实现的呢,在这里我们将进一步探讨Android的事件传递机制 从一个例子入手 首先是一个简单的onTouch和o ...

  10. XML字符串和JAVA对象之间的转化

     1.JAXB中相关的注解.类和接口说明 JAXB 中主要的一些注解 - shenyunsese 的专栏 - CSDN 博客 注:教程很全面很详细.但是仅供参考. 主要疑问区分和说明:  1.1 @X ...