<html>

<style type="text/css">

#bar{width:0px; height:20px;

     background:#ee00ff;}//定义进度条的前景色

</style>

<script>

   var act;

   function over(){

     var w=document.getElementById("bar").style.pixelWidth;

     if (w<400){

                 document.getElementById("bar").style.pixelWidth=w+2;

                 document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";

                 clearTimeout(act);

                 act=setTimeout(over,10);

     }  else{document.getElementById("txt").innerText="载入完成100%";

     };

   };

   function out(){

     var w=document.getElementById("bar").style.pixelWidth;

     if (w>0){

                 document.getElementById("bar").style.pixelWidth=w-2;

                 document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";

                 clearTimeout(act);

                 act=setTimeout(out,10);

     }  else{document.getElementById("txt").innerText="载入完成0%";

     };

   };

   function Apouse(){

                 clearTimeout(act);

   };

</script>

<button onclick="over()">开始转入</button><br>

<button onclick="out()">开始卸载</button><br><br>

<button onclick="Apouse()">暂停</button><br><br>

<h4  id="txt">等待载入</h4>

<div id="bar"></div>

</html>

　　

HTML/CSS/JS 在线工具

仅在IE浏览器有用

JavaScript入门学习(2)--进度条的更多相关文章

  1. 混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

    混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...

  2. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  3. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  4. JavaScript入门-学习笔记(一)

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  5. iOS学习-圆形进度条

    效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...

  6. JAVA GUI学习 - JProgressBar进度条组件摘录

    public class JProgressBarTest extends JFrame{ public JProgressBarTest() { super(); setTitle("表格 ...

  7. Python学习笔记-进度条

    该功能用以输出任务百分比 #conding=utf-8 import sys #进度条函数,输入当前任务以及总任务数 def ProgressBar(Current,Total): processpe ...

  8. JavaScript入门学习书籍的阶段选择

    对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...

  9. Javascript入门学习

    编程之道,程序员不仅仅要精通一门语言,而是要多学习几门. 本学习之源出自柠檬学院http://www.bjlemon.com/,特此声明. 第一课1:javascript的主要特点解释型:不需要编译, ...

随机推荐

  1. 伪数组 arguments

    arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用. (1)返回函数实参的个数:arguments.length 例子: fn(2,4); fn(2,4,6); fn( ...

  2. 将csv导出json格式

    将csv导出json格式 import os,csv,json cf = open('D:\OneDrive\\Tech\\Script\\Powershell_Script\\Uxin_work\\ ...

  3. oracle 查询当前正在执行的事务

    SELECT s.sid, s.serial#, s.event, a.sql_text, a.sql_fulltext, s.username, s.status, s.machine, s.ter ...

  4. 沉淀再出发：关于java中的AQS理解

    沉淀再出发:关于java中的AQS理解 一.前言 在java中有很多锁结构都继承自AQS(AbstractQueuedSynchronizer)这个抽象类如果我们仔细了解可以发现AQS的作用是非常大的 ...

  5. PHP根据图片制作缩略图

    php中制作缩略图的方法也很简单,是用imagecopyresampled方法根据源图制作一个小一点的图片,来看代码check_image_addthumbs.php <?php //修改图片效 ...

  6. Chapter 4 Left Outer Join in MapReduce

    4.1 Introdution Consider a company such as Amazon, which has over 200 millions of users and possibly ...

  7. U-Mail邮件营销可视化编辑设计邮件模板so easy

    相信每位看过军事演习的朋友都知道,现代战争越来越就像一场沙盘演练,真正做到了“运筹帷幄之中决战千里之外”,后方坐镇指挥战斗的能够将前线战场变得透明,这就叫“可视化战争”,做到了<孙子兵法> ...

  8. 10、Node.js模块系统

    ##################################################################################介绍Node.js模块系统为了让No ...

  9. Apache Jemeter 开发插件

    为什么选择使用JMeter 当被问到这个问题的时候,也许你会在脑海里产生很多的理由,比如: Apache基金会下的开源项目,没有版权问题: 为数不多的还在持续更新的开源性能自动化测试工具: 支持协议丰 ...

  10. 利用TLE数据确定卫星轨道（2）－SGP4模型实现

    1.TLE轨道报: 接上一篇,TLE轨道报各项内容所代表的意义如下: 2.SGP4模型: TLE轨道报计算卫星轨道需要用到 NORAD 开 发 的 SGP4/SDP4 模 型 ,SGP4模型是由 Ke ...