<!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. Gson序列化对象如何忽略字段

    Gson序列化对象如何忽略字段 Gson版本 2.8.2 梗概 用注解@Expose(serialize = false, deserialize = false)在类的成员上以告诉Gson 跳过本字 ...

  2. AngularJS1.X学习笔记11-服务

    如果我没记错的话,spring里边有个service层.什么是服务呢?个人理解就是很多地方要用的,可以跨越控制器甚至是跨越模块的工具.AngularJS也为我们提供了服务这种机制,这让我们可以将一些不 ...

  3. MySQL 避免重复数据的批量插入与批量更新

    [转发] 导读 我们在向数据库里批量插入数据的时候,会遇到要将原有主键或者unique索引所在记录更新的情况,而如果没有主键或者unique索引冲突的时候,直接执行插入操作. 这种情况下,有三种方式执 ...

  4. Python-模块使用-Day6

    Python 之路 Day6 - 常用模块学习 本节大纲: 模块介绍time &datetime模块randomossysshutiljson & picleshelvexml处理ya ...

  5. 安装 go 语言环境

    操作系统: CentOS 6.9_x64 go语言版本: 1.8.3 安装go 这里直接安装二进制,其它方式请自行搜索. 1.下载并安装go 命令如下: ? 1 2 3 wget https://st ...

  6. api-gateway实践（09）支持rest服务注册

    一.GET-GET 1.前端定义 2.后端定义 2.1.基础定义 2.2.path参数.head参数.query参数 2.3.常量参数 2.4.系统参数 2.5.结果定义 二.POST-POST 1. ...

  7. Python基础数据类型之集合以及其他和深浅copy

    一.基础数据类型汇总补充 list  在循环一个列表时,最好不要删除列表中的元素,这样会使索引发生改变,从而报错(可以从后向前循环删除,这样不会改变未删元素的索引). 错误示范: lis = [,,, ...

  8. POJ-3295 Tautology---栈+表达式求值

    题目链接: https://vjudge.net/problem/POJ-3295 题目大意: 输入由p.q.r.s.t.K.A.N.C.E共10个字母组成的逻辑表达式WFF      其中      ...

  9. java Thread 接口学习

    对于程序员来说 Thread应该都不会陌生,具体的接口调用不是本篇的重点.Thread的基本概念及接口的使用:java多线程 下面将更多的从底层实现角度讲一下Thread. Thread的声明如下: ...

  10. Django REST framework+Vue 打造生鲜超市（六）

    七.用户登录与手机注册 7.1.drf的token (1)INSTALL_APP中添加 INSTALLED_APPS = ( ... 'rest_framework.authtoken' ) toke ...