<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>pregressbar03</title>

</head>

<body>

      <style type="text/css">

            #progress {

            height: 20px;

            border: 1px solid pink;

            }

           #bar_span{

            display:block;

             width: 0%;

             height:20px;

             background: green;

             }

        </style>

        <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

        <script type="text/javascript">

            function SetProgress(ress) {

                if (ress){

                    $("#bar_span").css("width", String(ress) + "%");

                }

            }

            var i = 0;

            function doProgress() {

                if (i <= 100) {

                    setTimeout("doProgress()", 100);

                    SetProgress(i);

                    $("#percent").text(i+"%");

                    i++;

                }

            }

            $(document).ready(function() {

                doProgress();

            });

        </script>

     <h1>Javascript 进度条 Demo</h1>

    <p>原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式）</p>

    <div id="progress"><span  id="bar_span"> </span>

                       <span id="percent">0%</span>

    </div>

</body>

</html>

简易js进度条的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  3. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  4. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...

  5. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  6. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  7. js 进度条，可实现结束和重新开始

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. js进度条插件pace.js

    主要用到themes文件夹和pace.js文件

  9. iOS 简易环形进度条

    demo下载地址:https://github.com/haozheMa/LoopProgressDemo/tree/master ViewController中的代码 #import "V ...

随机推荐

  1. Mego开发文档 - 处理并发冲突

    处理并发冲突 数据库并发是指多个进程或用户同时访问或更改数据库中的相同数据的情况.并发控制是指用于确保存在并发更改时数据一致性的特定机制. Mego实现了乐观并发控制,这意味着它可以让多个进程或用户独 ...

  2. 你考虑清楚了吗就决定用 Bootstrap ？

    近年来,在前端项目中, Bootstrap 已经成为了一个非常受欢迎的工具. Bootstrap 的确有很多优点,然而,如果你的团队中恰好有一个专职的前端工程师.那我推荐你们不要使用 Bootstra ...

  3. OAuth2.0学习（1-13）oauth2.0 的概念：资源、权限（角色）和scope

    mkk 关于资源的解释 : https://andaily.com/blog/?cat=19 resource用于将系统提供的各类资源进行分组管理, 每一个resource对应一个resource-i ...

  4. C#制作ActiveX插件

    首先新建项目--->类库,取名:ActiveXDemo 右键项目属性:应用属性==>程序集信息=>使程序集Com可见, 生成==>输出==>为com互操作注册 新建接口类 ...

  5. [洛谷P2234][HNOI2002] 营业额统计 - Treap

    Description Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额. ...

  6. python——常用模块2

    python--常用模块2 1 logging模块 1.1 函数式简单配置 import logging logging.debug("debug message") loggin ...

  7. Python第三方库的安装方法总结

    源码安装 很多第三方库都是开源的,几乎都可以在github 或者 pypi上找到源码.找到源码格式大概都是 zip . tar.zip. tar.bz2格式的压缩包.解压这些包,进入解压好的文件夹,通 ...

  8. linux添加硬盘分区挂载教程

    基本步骤:分区--格式化--挂载--写入文件 1.首先用fdisk -l命令查看添加的硬盘名称,可以看到sdb为新增的硬盘 [root@oracle ~]# fdisk -l Disk /dev/sd ...

  9. ansible批量加用户

    ansible批量加用户 1.生成密码 pip install passlib python -c "from passlib.hash import sha512_crypt; print ...

  10. sublime高亮代码导出

    何在word/博客中使用SublimeText风格的代码高亮样式 原文链接:http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext ...