demo1

<html>

<head>

<title>进度条</title>

<style type="text/css">

.container{

   width:450px;

   border:1px solid #6C9C2C;

   height:25px;

 }

#bar{

   background:#95CA0D;

   float:left;

   height:%;

   text-align:center;

   line-height:%;

 }

</style>

<script type="text/javascript">

  function run(){

        var bar = document.getElementById("bar");

        var total = document.getElementById("total");

    bar.style.width=parseInt(bar.style.width) +  + "%";

    total.innerHTML = bar.style.width;

    if(bar.style.width == "100%"){

      window.clearTimeout(timeout);

      return;

    }

    var timeout=window.setTimeout("run()",);

  }

    window.onload = function(){

       run();

    }

</script> 

</head>

<body>

  <div class="container">

   <div id="bar" style="width:0%;"></div>

  </div>

  <span id="total"></span>

</body>

</html>

demo2

<html>

<head>

<title>进度条</title>

<style type="text/css">

.processcontainer{

   width:450px;

   border:1px solid #6C9C2C;

   height:25px;

 }

#processbar{

   background:#95CA0D;

   float:left;

   height:%;

   text-align:center;

   line-height:%;

 }

</style>

<script type="text/javascript">

 function setProcess(){

  var processbar = document.getElementById("processbar");

  processbar.style.width = parseInt(processbar.style.width) +  + "%";

  processbar.innerHTML = processbar.style.width;

  if(processbar.style.width == "100%"){

     window.clearInterval(bartimer);

  }

 }

var bartimer = window.setInterval(function(){setProcess();},);

window.onload = function(){

   bartimer;

}

</script>

</head>

<body>

  <div class="processcontainer">

   <div id="processbar" style="width:0%;"></div>

  </div>

</body>

</html>

JS实现 进度条 不用控件的更多相关文章

  1. wpf研究之道-ProgressBar（进度条）控件

    ProgressBar控件,非常有用.它在什么情况下有用呢?如何使用?带着这两个问题,我们探讨下. 如果程序需要很长时间来运行,用户在不知道的情况下,以为程序已经"卡死"了,没有响 ...

  2. wpf 水波进度条 用户控件

    之前看公司web前端做了个 圆形的水波纹 进度条,就想用wpf 做一个,奈何自己太菜 一直做不出来,在看过 “普通的地球人” 的 “ WPF实现三星手机充电界面 博客之后 我也来照葫芦画个瓢. 废话不 ...

  3. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  4. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  5. tbl.js div实现的表格控件,完全免费,no jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...

  6. tbl.js div实现的表格控件,完全免费,不依赖jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...

  7. JS脚本动态给元素/控件添加事件

    最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

  8. angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件

    最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...

  9. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

随机推荐

  1. webpack 创建vue项目过程中遇到的问题和解决方法

    目录 1 webpack简介 2 webpack实现多个输入输出多个html 3  webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...

  2. javaweb笔记—02

    1.compatible:adj. 兼容的:能共处的:可并立的2.web所有的请求都是http请求,http请求默认的编码是ISO-8859-1,不支持utf-8,要统一设置前台和后台一样,才不会乱码 ...

  3. nginx+php+memcache实现hash一致性memcache 集群

    我们工作中可能会遇到key-value数据库,如果我们面对的不止一台memcache服务器,而是很多台.那么现在就回出现一个问题: 当我们访问nginx服务器的时候,我们会判断memcache中是否有 ...

  4. linux+apache+nginx实现，反向代理动静分离

    在我们开发的过程中,一定会遇到,负载均衡方面的问题.下面我们,做一个小例子:使用nginx+apache实现反向代理,动静分离. 这里apache.php.nginx的安装就不做赘述了,不懂的朋友可以 ...

  5. ELK学习笔记之F5 DNS可视化让DNS运维更安全更高效-F5 ELK可视化方案系列(3)

    0x00 概述 此文力求比较详细的解释DNS可视化所能带来的场景意义,无论是运维.还是DNS安全.建议仔细看完下图之后的大篇文字段落,希望能引发您的一些思考. 在“F5利用Elastic stack( ...

  6. 值得收藏的8个Web端组件库

    值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...

  7. win7 powershell配色方案

    首先我是参考微软的word的, look~ Windows PowerShell 配置文件 要配置powershell很简单, 就几步 1.显示 Windows PowerShell 配置文件的路径 ...

  8. Linux使用退格键时出现^H + Tab键命令补全失效/方向键失效 + ls文件夹和文件没有颜色

    删除问题 安装kalilinux使用普通用户的的时候按退格键无法实现删除功能 解决的办法有两个 一改变快捷键: 使用Ctrl+Backspace组合键可以实现删除功能 ctrl + backspace ...

  9. 学习MFC的建议

    1.继续深入学习C++的内容,打好面向对象的程序综合设计与编程基础,参考书籍<C++Primer>. 2.打好Windows编程基础(参考书<Windows程序设计>(第五版) ...

  10. CXF整合spring，在tomcat中发布webService

    服务端 1.首先下载CXF的jar包 http://pan.baidu.com/s/1dFBwSRf 密码: qyax.里面自带了需要用到的spring的jar包. 或者使用maven,如下配置.不论 ...