<!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. keycloak管理用户权限

    一.在keycloak中定义基础数据 1.realm 如果多个模块使用不同的用户权限,就分realm 如果多个模块共用一套用户权限,就顶一个一个realm 2.每个模块是一个client-app 3. ...

  2. Jetty入门（1-1）Jetty入门教程

    一.Jetty是什么? 1.Jetty 是一个Java语言编写的,开源的Servlet容器和应用服务器. Jetty 极度轻量级.高便携性.功能强大.灵活和扩展性好,而且支持各种技术如SPDY.Web ...

  3. Opencv出现“_pFirstBlock == pHead”错误的解决方法

    先说结论: opencv链接库使用错误. 1,确认VS工程属性中,opencv的链接库路径和版本正确. VS2013应该使用vc12目录,VS2012对应vc11目录.debug版和release版要 ...

  4. 清除session信息

    session.removeAttribute("sessionname")是清除SESSION里的某个属性.     session.invalidate()是让SESSION失 ...

  5. Hive函数：rank()、dense_rank()

    数据准备: G1,KING, G1,BING, G2,FING, G1,FORD, G2,SCOTT, G1,JONES, G2,BLAKE, G1,CLARK, G1,ALLEN, G1,CELL1 ...

  6. hdu-2602&&POJ-3624---01背包裸题

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2602 https://vjudge.net/problem/POJ-3624 都是01背包的裸题 这 ...

  7. pandas（七）数据规整化：清理、转换、合并、重塑之合并数据集

    pandas对象中的数据可以通过一些内置的方式进行合并: pandas.merge 可根据一个或多个键将不同的DataFrame中的行连接起来. pandas.concat可以沿着一条轴将多个对象堆叠 ...

  8. [翻译] TensorFlow Programmer's Guide之Frequently Asked Questions（问得频率最多的几个问题）

    目录: 特点和兼容性(Features and Compatibility) 建立一个TensorFlow图(Building a TensorFlow graph) 运行一个TensorFlow计算 ...

  9. Java知识体系纲要

    最近一段时间,把Java主要涉及到的大概念都大致学习了一遍,为了让自己能够更好地形成对Java知识体系的整体把握,先把学过的知识点添加到自己画的思维导图上. 整个Java知识体系的划分,我自己主要将它 ...

  10. win10下 github+hexo搭建个人博客.md

    我的博客地址 https://chenxianfu.github.io/ 遇到的坑 hexo 问题 4000端口打不开,可能端口占用,请输入一下命令 hexo server -p 4001 针对很多人 ...