jQuery进度条的使用方法

最新推荐文章于 2021-09-09 20:12:57 发布
最新推荐文章于 2021-09-09 20:12:57 发布
阅读量153 收藏
点赞数
文章标签： jQuery JavaScript CSS HTML ViewUI

下载jqueryprogressbar.js

源码如下：

(function($) {   
    //Main Method
    $.fn.reportprogress = function(val,maxVal) {           
        var max=100;
        if(maxVal)
            max=maxVal;
        return this.each(
            function(){       
                var div=$(this);
                var innerdiv=div.find(".progress");
               
                if(innerdiv.length!=1){                       
                    innerdiv=$("<div class='progress'></div>");                   
                    div.append("<div class='text'>&nbsp;</div>");
                    $("<span class='text'>&nbsp;</span>").css("width",div.width()).appendTo(innerdiv);                   
                    div.append(innerdiv);                   
                }
                var width=Math.round(val/max*100);
                innerdiv.css("width",width+"%");   
                div.find(".text").html(width+" %");
            }
        );
    };
})(jQuery);

 

页面代码：

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="jquery.js" type="text/javascript"></script>
<SCRIPT src="jqueryprogressbar.js" type="text/javascript"></SCRIPT>

<SCRIPT type=text/javascript>
    var pct=0;
    var handle=0;
    function update(){
            $("#progressbar").reportprogress(++pct);
            if(pct==100){                                                //设定总长度值
                clearInterval(handle);
                $("#run").val("start");
                pct=0;
            }
    }
    jQuery(function($){
        $("#run").click(
            function(){
                if(this.value=="start"){
                    handle=setInterval("update()",100);               //设定增长的时间
                    this.value="stop";
                }else{
                    clearInterval(handle);
                    this.value="start";
                }
            }
        );
        $("#reset").click(function(){
            pct=0;
            $("#progressbar").reportprogress(0);
        });
    });
</SCRIPT>

<STYLE>
    #progressbar {
        BORDER-RIGHT: black 1px solid;
        BORDER-TOP: black 1px solid;
        BORDER-LEFT: black 1px solid;
        WIDTH: 200px;
        COLOR: black;
        BORDER-BOTTOM: black 1px solid;
        POSITION: relative; HEIGHT: 20px
    }
    #progressbar DIV.progress {
        OVERFLOW: hidden;
        WIDTH: 0px;
        POSITION: absolute;
        HEIGHT: 100%;
        BACKGROUND-COLOR: blue;
    }
    #progressbar DIV.progress .text {
        COLOR: white;
        POSITION: absolute;
        TEXT-ALIGN: center; FONT-SIZE:larger;
    }
    #progressbar DIV.text {
        WIDTH: 100%;
        POSITION: absolute;
        HEIGHT: 100%;
        TEXT-ALIGN: center;
        FONT-SIZE:larger;
    }
</STYLE>
</HEAD>
    <BODY>
    <DIV id="progressbar">
       
    </DIV>
    <INPUT id="run" type="button" value="start"> <INPUT id="reset" type="button" value="reset">
    </DIV>
    </DIV>
    </DIV>
    </BODY>
</HTML>

ness1981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery进度条
Shellin_F的博客
09-25 549
Jquery我基本不用的，只会基本API，我一般都是用原生的写。 var num=50; $(".content").css("width",num+"%"); 定位什么就不写了。就这样的直接改他的宽度。  我真不知道还能怎么写。 后台获取数据修改宽度。 AJAX简单实现： 由于可能会出现跨域的情况，所以使用了jsonp  但是  我也
jquery进度条
11-30
简单易懂的jquery进度条制作，方便学习和使用，启发思路。
jquery自带的进度条功能如何使用？
weixin_34228387的博客
04-08 181
弹出进度条：先做弹出的功能modal，再做进度条显示。在弹出的界面上增加进度条功能   1 $.ajax({ 2 xhr: function() 3 { 4 var xhr = new window.XMLHttpRequest(); 5 6 //Upload progress 7 xhr.upload.addEventListener("...
jQuery倒计时进度条
猫老板的豆
12-14 2345
效果如下图：代码如下：<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery倒计时进度条</title> <script src="js/jquery.min.js" type="text
jquery插件之进度条
热门推荐
王继超的专栏
03-29 1万+
以下是需要引入的一些文件，如果没有您可以通过给定的地址进行下载，谢谢： jquery-1.7.1.min.js                       http://jqueryui.com/ jquery-ui-1.8.18.custom.min.js      http://jqueryui.com/download jquery.ui.datepicker-zh-CN.
jQuery进度条插件彩色样式代码
06-24
"jQuery进度条插件彩色样式代码"是利用jQuery实现的一种动态显示进度效果的工具，通常用于展示任务完成度、数据加载状态或者任何需要可视化进度的情况。这款插件的特点是可以自定义百分比、颜色、高度、长度以及形状...
进度条 jquery
04-03
1. **jQuery基本概念**：首先，我们需要了解jQuery的基本用法，包括如何引入jQuery库，以及如何使用选择器、方法和事件来操作DOM元素。 2. **进度条插件**：jQuery社区有许多现成的进度条插件，如`jQuery UI ...
jquery模拟进度条实现方法
10-23
通过本篇的学习，读者不仅可以掌握进度条的实现方法，还可以了解使用jQuery进行页面元素动态样式控制的相关知识。这在前端开发工作中是非常实用的技能，可广泛应用于需要实时反馈进度信息的场景中。
jQuery 进度条插件 v1.2
05-12
(4) 使用jQuery选择器和方法初始化并控制进度条。对于初学者，这是一个很好的实践案例，可以了解如何将外部资源集成到项目中。 总结起来，jQuery 进度条插件 v1.2 是一款优秀的前端工具，它通过jQuery库实现了美观...
jQuery进度条插件设置百分比进度条样式代码
10-25
以上就是使用jQuery和jQuery UI进度条插件创建并设置百分比进度条样式的详细步骤。你可以根据项目需求调整样式、动画速度以及进度更新方式。这个过程中，`texiao2678_1560680848`可能是一个示例代码文件或资源包，其...
JS、JQuery、Servlet实现进度条
08-24
源代码中两个进度条的例子： 一是：js+Servlet实现。 一是：JQuery+Servlet实现。 进度条处理了各浏览器间差异，虽然在IE内核浏览器和非IE内核浏览器显示并不完全相同，但是都可以使用。
简单的jquery进度条插件LineProgressbar.js及demo
05-16
简单的jquery进度条插件LineProgressbar.js及demo，一个非常轻量级的插件，样式漂亮
jQuery响应式流程步骤进度条插件.zip
03-31
进度条demo可运行程序，亲测可用，无其他用途，用于个人备份 1 2
jQuery实现一个日期时间轴进度条播放代码
m0_46168848的博客
05-10 1003
jQuery实现一个日期时间轴进度条播放代码 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery日期时间轴进度条播放代码</title> <link rel="
jquery实现动态增长进度条，移动端和PC端皆可实现
QQ_1357581075,百无一用是书生
08-23 619
<<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="equser.aspx.cs" Inherits="Remote_UI.equser" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org...
js（jquery）网页进度条加载n中办法和原理（也有css3动画进度条）
小飞飞的博客
08-10 921
有时候网站内容比较多，或者网络不太好，客户刚打开url看到是空白，内容都在加载中，过一会才能看到网页内容，这样的体验特别糟糕，不耐烦的客户会直接关闭页面，假设能在等待的时候加一些初始动画或者加载进度条，会让客户体验好很多，今天小飞飞就带大家做一些进度条的那些事。 1.最常见的进度条制作，利用setInterval（）延迟显示主页面，但是只是一个障眼法，并不能检测页面内容是否真正加载完毕//上代码
js、jQuery实现进度条至100%，颜色渐变~
wocao2dai的博客
09-09 1211
js实现进度条至100%， 简单过程，可根据实际修改值，应用场景广。 style样式 <style> body>div{ width: 230px; border: 1px solid white; position: relative; } .ab{ width: 230px; height: 10px;
jQuery 进度条实现
L221545的博客
06-16 2793
jQuery 进度条实现 1、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <script src="./js/jquery-1.12.4.js"></script> <style> #box { width:
jquery实现进度条
qq_42918833的博客
03-31 8552
jquery实现进度条 最近看到一个网站的进度条很好看所以想写这篇有点不是很好的文章 我们先把我们网页的大致布局写好， 我用了个input标签和两个div标签。 如下图： 然后我在给我定义的类写CSS样式。如下图： 在这里，我还引用Bootstrap框架， 因为我只是实现一个进度条的功能，所以我把代码写在了个HTML文件中，如果你们自己想在自己的网站中实现进度条，不要像我这样写哦！ ...
使用jQuery CSS创建流程进度条
"使用jQuery和CSS实现流程进度条的示例代码" 在网页设计中，流程进度条是一种常用的UI元素，它能够清晰地向用户展示任务或流程的完成状态。本教程将详细介绍如何利用jQuery和CSS来创建一个自定义的流程进度条。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值