<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. Servlet映射规范和隐式映射

    问题描述: web.xml中配置了缺省路径"/"后,原先在webapp下的静态页面(html)无法通过URL访问了,为什么? 过程尝试: 1. 将html后缀改为.jsp后可以正常 ...

  2. c# 操作临时数据---XML操作

    class Config { static string path; /// <summary> /// 配置文件的路径 /// </summary> public stati ...

  3. C#的抽象类和接口的区别，在什么时候使用才合适？

    理解抽象类  abstract class和interface在c#语言中都是用来进行抽象类(本文 中的抽象类并非从abstract class翻译而来,它表示的是一个抽象体,而abstract cl ...

  4. Android开发（7）数据库和Content Provider

    问题聚焦: 思想:应用程序数据的共享 对数据库的访问仅限于创建它的应用程序,但是事情不是绝对的 Content Provider提供了一个标准的接口,可供其他应用程序访问和使用其他程序的数据 下面我们 ...

  5. 乘风破浪：LeetCode真题_013_Roman to Integer

    乘风破浪:LeetCode真题_013_Roman to Integer 一.前言 上一节我们讨论了如何把阿拉伯数字转换成罗马数字,现在我们需要思考一下如何把罗马数字转换成阿拉伯数字,其实我们仔细观擦 ...

  6. vue组件详解（一）——组件与复用

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种 ...

  7. 13、Node.js 全局对象

    主要用于调试,显示信息,重点看例子在浏览器 JavaScript 中,通常 window 是全局对象, Node.js 中的全局对象是 global ####__filename__filename ...

  8. iOS UI（绘图）的几张原理图

    Core Animation是对OpenGL ES的Objective-C封装,具有与OpenGL ES几乎等价的高性能,却隐藏了OpenGL ES的复杂性. https://www.cnblogs. ...

  9. BZOJ1089:[SCOI2003]严格n元树(DP,高精度)

    Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...

  10. Counting swaps

    Counting swaps 给你一个1-n的排列,问用最少的交换次数使之变为递增排列的方案数\(mod\ 10^9+7\),1 ≤ n ≤ 10^5. 解 显然最少的交换次数不定,还得需要找到最小交 ...