<!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. PHP类的自动加载

    spl_autoload_register(function ($className) { require str_replace('\\', '/', $className '.php'); }) ...

  2. LAMP 搭建

    p { margin-bottom: 0.25cm; line-height: 120% } LAMP 搭建 承 Ubuntu 17.10.1安装, 定制. 参考 电子工业出版社, Ubuntu完美应 ...

  3. Android开发——发布第三方库到JitPack上

    前言: 看到大神们的写的第三方控件,比较好用,我们使用的时候直接是在gradle上加上代码就可以使用了,现在到我们写了一个第三方控件,想要别人使用的时候也是直接在gradle加上相关的代码就可以用了, ...

  4. java将一个正整数分解质因数。例如：输入90,打印出90=2*3*3*5。

    首先我们的算法是:例如 输入的是 90 1.找到90的最小公约数(1除外)是 2 2.然后把公约数 2 输出 3.接着用 90 / 2 = 45 (如果这里是素数,就结束,否则继续找最小公约数) 4. ...

  5. 记java应用linux服务单个CPU使用率100%分析

    之前在做项目的过程中,项目完成后在linux服务器上做性能测试,当服务跑起来的时候发现cpu使用率很奇怪,java应用把单个cpu跑满了,其他cpu利用率0%. 刚开始遇到这问题的时候我第一时间反应使 ...

  6. vue2.0项目引入element-ui

    在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架.安装流程也是我从失败中摸索到的,希望能帮助大家. ...

  7. 老男孩python学习之作业二---三级菜单

    因为之前花力气完成了购物小程序的作业 现在做这个三级菜单简直是so easy!! 1.显示省级菜单 2.交互,提示用户输入要查看的省份(退出e) 2.1.用户正确输入列表中的省份 3.显示市级菜单 3 ...

  8. ArUco----一个微型现实增强库的介绍及视觉应用（二）

    ArUco----一个微型现实增强库的介绍及视觉应用(二) 一.第一个ArUco的视觉应用 首先介绍第一个视觉应用的Demo,这个应用场景比较简单,下面具体介绍: 1. 应用场景 主线程:通过摄像头检 ...

  9. 在VS2017中安装OpenGL

    由于VS2017支持直接下载有关openGL的库文件,因此给我们带来了很多方便之处,不需要单独下载了. 1.打开VS2017,并新建一个C++控制台项目 2.然后点击 项目-管理Nuget程序包, 点 ...

  10. 有没有想过css定位与xpath的区别

    我是这样理解的, css选择如同你尽可能具体的描述一个元素的形态, 包括他的: 标签, 类, id 以及这些的组合, 目标是尽可能确定元素的唯一坐标 , 以方便选择. 而xpath是根据元素的路径去确 ...