<html>

<head>

<title>进度条</title>

<style type="text/css">

.container{

   width:500px;

   height:25px;

 }

#bar{

   background:#95CA0D;

   border:0px solid #6C9C2C;

   float:left;

   height:25px;

   width:%;

   line-height:%;

   margin:0px;

 }

 #total{

    width:%;

    height:27px;

 }

 #outer{

    border:1px solid #6C9C2C;

 }

 .ccc{

    display: inline-block;

 }

 #wid{

    width:547px;

    height:27px;

 }

 #tbox{

    height:27px;

    float:right;

    padding-top:.5px;

 }

</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 id="wid" class="container ccc">

  <div  id="outer" class="container ccc">

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

  </div>

  <div id="tbox" class="ccc">

  <div id="total"></div>

  </div>

  </div>

</body>

</html>

html 进度条的更多相关文章

  1. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  2. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  3. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  4. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  5. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  6. python实现一个控制台下的进度条

    今天写练习爬虫感觉很需要个进度条,就随手用函数实现了一个,到了晚上突然感觉到这个东西应该单独写出来以后肯定用用得着. 代码也很简单,我就不细讲了,直接上代码了. 测试代码: instance.py i ...

  7. 【Win 10 应用开发】通过数据绑定更新进度条

    实现 INotifyPropertyChanged 接口可以在属性更改后通知数据的使用者,这个相信大伙儿都知道.于是,有朋友会问:对于要实时显示进度的情况,比如更新进度条,能用这个实现吗? 当然是可以 ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  9. 【Android】 修复ijkPlayer进行m3u8 hls流播放时seek进度条拖动不准确的问题

    项目中使用的播放器是ijkPlayer,发现播放切片特点的hls流(m3u8格式的视频)拖动seekBar的时候会莫名的跳转或者seek不到准确的位置,发现网友也遇到了同样的问题,ijk的开发者也说明 ...

  10. 简单实用的进度条加载组件loader.js

    本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度.要实现这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的: 这个倒是比较简单,两 ...

随机推荐

  1. SQL8数据库定期自动备份

    我们知道,利用SQL Server 2008数据库可以实现数据库的定期自动备份.方法是用SQL SERVER 2008自带的维护计划创建一个计划对数据库进行备份, 下面我们将SQL SERVER 20 ...

  2. Caterpillar sis service information training and software

    Cat et sis caterpillar heavy duty truck diagnostics repair. Training demonstration allows.cat electr ...

  3. Django框架----模板继承和静态文件配置

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

  4. c# out ref parames的用法

    out ref parames的用法(将值传递转换成引用传递) Out 一般用于返回多个值,在方法体中会清空out变量,侧重于一个方法有多个返回值得时候使用 Ref有进有出,可以在方法体外必须赋初值, ...

  5. 打印一个浮点值%f和%g

    详见代码 后续或有更新 #include <stdio.h> #include <stdlib.h> int main(int argc, char *argv[]) { fl ...

  6. 过滤特殊字符(包括过滤emoji表情)

    /** * 过滤特殊字符 * @param $text * @return mixed */ public static function filterSpecialChars($text) { // ...

  7. 针对数据泵导出 (expdp) 和导入 (impdp)工具性能降低问题的检查表 (文档 ID 1549185.1)

    针对数据泵导出 (expdp) 和导入 (impdp)工具性能降低问题的检查表 (文档 ID 1549185.1) 文档内容 适用于: Oracle Database – Enterprise Edi ...

  8. NPM安装步骤

    一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...

  9. OSI7层模型（TCP4层）

    OSI7层模型(TCP4层) 第一层:物理层 在局部局域网络上传送帧,它负责管理电脑通信设备和网络媒体之间的互通.包括了针脚.电压.线缆规范.集线器.中继器.网卡.主机适配器等. 第二层:数据链路层 ...

  10. zynq基础-->linux下软件应用

    操作系统:Ubuntu 16.04 LTS 应用软件:Vivado 2016.2  + petalinux 2016.2 参考官方应用手册:ug1144-petalinux-tools-referen ...