<!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. macOS: mac下配置charles来抓取http请求

    1. 准备charles 下载链接:https://www.charlesproxy.com/download/ 2. 配置charles 2.1)配置http代理.打开Charles软件,配置htt ...

  2. macos下如何解决无法写ntfs格式的u盘或硬盘？

    答:macos原生支持,可以通过脚本卸载再重新挂载为可读写即可,脚本在此

  3. RestSharp - Ignore SSL errors

    项目启动时,添加下面代码: 项目启动时,添加 public App() { ServicePointManager.ServerCertificateValidationCallback += (se ...

  4. 软件定义网络基础---SDN的主流构架

    一:基于不同标准的主流构架 二: ONF定义的SDN基本构架 (一) 四个平面.两大接口 三:四个平面 (一)数据平面 数据平面是由若干网元(Netword Element)构成,每个网元包括一个或多 ...

  5. ORA-02287: sequence number not allowed here问题的解决

    当插入值需要从另外一张表中检索得到的时候,如下语法的sql语句已经不能完成该功能:insert into my_table(id, name) values ((select seq_my_table ...

  6. Linux系统调优——磁盘I/O（三）

    (1).查看I/O运行状态相关工具 1)查看文件系统块大小 对于ext4文件系统,查看文件系统块大小 [root@CentOS6 ~]# tune2fs -l /dev/sda1 | grep siz ...

  7. [ kvm ] 嵌套虚拟化

    1. 前言 在学习 kvm 的过程中,需要在虚拟机中再次开启虚拟机,这里就需要使用到嵌套虚拟化,做个记录吧. 2. 配置嵌套虚拟化 2.1 查看物理机是否支持嵌套虚拟化 cat /sys/module ...

  8. CSS3 《3D骰子 压大小》

    游戏在线预览地址:http://dtdxrk.github.io/game/3d-dice/index.html js判断一个随机数大小的游戏. 本来想用canvas做的,平面的生产一个点数,感觉没啥 ...

  9. 切实解决socket连接掉线检测

    原文:切实解决socket连接掉线检测 版权声明:欢迎转载,但是请保留出处说明 https://blog.csdn.net/lanwilliam/article/details/51698807 新公 ...

  10. springboot的mapper.xml在src下问题

    在pom.xml里面的build标签加上resources说明 <resources> <!-- mapper.xml文件在java目录下 --> <resource&g ...