<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. androidcookie存储sqllite

    /**声明一些数据库操作的常量*/  private static SQLiteDatabase mDatabase = null;  private static final String DATA ...

  2. TPS和事务响应时间的关系、计算公式 （转）

    例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车1.请问1秒钟最多能进几辆车?   TPS=102.每辆车需要多长时间进行响应?   reponse time = 13.改成20辆车,每秒能进 ...

  3. N点虚拟主机管理系统如何使用？

    有朋友问起N点虚拟主机管理系统怎么用呢?下面大概整理下他的使用方法,咱们来看看吧.          在讲如何使用N点虚拟主机管理系统之前,我们先来了解一下N点虚拟主机管理系统的介绍. ​     N ...

  4. models的单表操作

    orm创建数据库 from django.db import models # Create your models here. class Book(models.Model): name = mo ...

  5. 【Leetcode】【Easy】Isomorphic Strings

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  6. gitlab自动备份恢复与卸载

    一.gitlab数据备份gitlab-rake gitlab:backup:create命令会在/var/opt/gitlab/backups目录下创建一个名称类似为1393513186_gitlab ...

  7. Java Web项目部署

    打包 使用Eclipse打包JAVA Web项目 如下 在项目上单击右键选择Export-选择JavaEE文件夹-选择WAR file(MyEclipse),单击Next>如图所示,选择存放打包 ...

  8. 沉淀再出发：使用python进行机器学习

    沉淀再出发:使用python进行机器学习 一.前言 使用python进行学习运算和机器学习是非常方便的,因为其中有很多的库函数可以使用,同样的python自身语言的特点也非常利于程序的编写和使用. 二 ...

  9. Python3基本数据类型（二、字符串）

    Python3字符串 ①字符串比较 1.比较字符串是否相同: ==:使用==来比较两个字符串内的value值是否相同 is:比较两个字符串的id值. 2.字符串的长度比较 len():显示字符串的长度 ...

  10. Tuple元组 、 ValueTuple 值元组详解

    Tuple元组 Tuple是C# 4.0时出的新特性,.Net Framework 4.0以上版本可用. 元组是一种数据结构,具有特定数量和元素序列,与数组不同,元祖中的元素可以不同的数据类型.比如设 ...