<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. SVN的正确提交方式

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Rundy_Deng/article/details/80338093 也会让我们百思不得其解,甚至耽 ...

  2. Ubuntu-18.04下安装mysql

    安装mysql服务器 1. sudo apt-get install mysql-server 2. sudo apt-get install mysql-client 登录问题 安装成功后,我们会发 ...

  3. 词法分析器Lexer

    词法分析 In computer science, lexical analysis, lexing or tokenization is the process of converting a se ...

  4. Linux 下Shell的学习2

    0. 查看帮助(比如内置功能)    man bash    -->变量处理大全 1.-计算变量长度的不同方法及不同方法的耗时对比    尽可能的用内置的命令处理,速度快        time ...

  5. 沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同

    沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同 一.前言 想必大家都有这样的困惑,接触的东西越多却越来越混乱了,这个时候就要进行对比和深入的探讨了,抓住每一个概念背后 ...

  6. hmac 算法模块

    Hmac算法:Keyed-Hashing for Message Authentication.它通过一个标准算法,在计算哈希的过程中,把key混入计算过程中 Python自带的hmac模块实现了标准 ...

  7. xsd文件记录

    <MESSAGE Version="1.0"> <CV_HEADER MsgType=" /> <QUERY_PROFILE> < ...

  8. FTP(文件传输协议)工作原理

    目前在网络上,如果你想把文件和其他人共享.最方便的办法莫过于将文件放FTP服务器上,然后其他人通过FTP客户端程序来下载所需要的文件. 1.FTP架构 如同其他的很多通讯协议,FTP通讯协议也采用客户 ...

  9. ZT自老罗的博客 Android系统的智能指针（轻量级指针、强指针和弱指针）的实现原理分析

    Android系统的智能指针(轻量级指针.强指针和弱指针)的实现原理分析 分类: Android 2011-09-23 00:59 31568人阅读 评论(42) 收藏 举报 androidclass ...

  10. 可以在命令行直接使用密码来进行远程连接和远程拉取文件的命令：sshpass

      应用范围:可以在命令行直接使用密码来进行远程连接和远程拉取文件. 使用前提:对于未连接过的主机.而又不输入yes进行确认,需要进行sshd服务的优化: # vim /etc/ssh/ssh_con ...