<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. Spring MVC基本配置和实践(一)

    一.Spring MVC介绍 1. Spring MVC是什么? The Spring Web MVC framework和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从S ...

  2. eclipse4.5(mars)环境

    官网下载页面: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/2/ ...

  3. SQL查询一个表中类别字段中Max()最大值对应的记录

      SQL查询一个表中类别字段中Max()最大值对应的记录 SELECT A.id, A.name, A.version FROM   DOC A, (SELECT id, MAX(version)  ...

  4. mysql 的增删改查

    数据库的基本流程就是先看你的数据库中的库都是哪些:show databases; 然后再进入相应的库进行操作  :  use+进入的库/表 切换路径 查看这个库内的所有的表: show tabales ...

  5. oracle 找回DROP掉的表

    select * from pan ;   --有数据 drop table pan;        --删除表 select * from pan ;   --表或视图不存在 flashback t ...

  6. 关于动态门户WEB博雅互动的源代码（HTML+CSS+javascript）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. homebrew命令

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  8. TCP/IP 协议图--传输层中的 TCP 和 UDP

    TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP. TCP 是面向连接的.可靠的流协议.流就是指不间断的数据结构,当应用程序采用 TCP 发送消息时,虽然可以保证发送的顺序,但 ...

  9. 把bootstrap4 dropdown 的导航下拉菜单触发方式改为鼠标浮动触发

    方法1: 原文: https://zzll.org/article/bootstrap4-xialacaidan 很简单,css中加入如下代码 .dropdown:hover>.dropdown ...

  10. C语言基础笔试题一

    1.下面的代码输出什么?为什么? void foo(void) { unsigned int a = 6; int b = -20; (a+b > 6)?puts(">6&quo ...