关键词:
【中文标题】如何用jquery制作进度条?【英文标题】:how to make a progress bar with jquery? 【发布时间】:2012-02-07 13:34:48 【问题描述】:我想知道如何将其制作为简单的代码。我在一个网站上找到了一些我想用于我正在开发的网站的东西。问题是我试图把它放在我的网站中(一个非常简单的),但我无法让它工作。 有谁知道我怎样才能使它成为一个简单的代码?
This is what I found.
<!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>eBay PayPal</title>
<style type="text/css">
*margin:0; padding:0;
bodybackground:#FFFFFF url(images/1.jpg) top left no-repeat; width:1099px; height:1050px;
</style>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.7.2/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
var p=0;
$("#myProgressBar").progressbar(value:0);
var timer = setInterval(function()
//This animates the bar
$("#myProgressBar .ui-progressbar-value").animate(width: p+"%",500);
//This does static sets of the value
//$("#myProgressBar").progressbar("option","value",p);
p = p +33.33;
if(p>33.33)
$("#myProgressBar .ui-progressbar-value").animate(width: "33.33%", 500);
//$("#myProgressBar").progressbar("option","value",100);
clearInterval(timer);
,500);
);
</script>
</head>
<body>
<a href="2.html" style="width:185px; height:31px;position:absolute; left: 198px; top: 516px;"></a>
<div id='myProgressBar' style="position:absolute; border:1px red solid; height:41px; width:950px; left: 69px; top: 608px;"></div>
</body>
</html>`
我想知道是否有人可以帮助我,基本上我只想要一个带有进度条的页面。卡
【问题讨论】:
【参考方案1】:这可能会有所帮助:
http://docs.jquery.com/UI/Progressbar
那里有代码示例,应该可以让您轻松制作进度条。
【讨论】:
非常感谢您的帮助,您知道如何制作动画吗? 没问题,我想这个答案会对你有所帮助:***.com/questions/5047498/…. 你知道为什么我的代码现在可以工作了吗? jsfiddle.net/gPfBC 当我试图让它在我的 html 文件中工作时,它就是不工作! 嘿,对不起,我今天早上才回来。我觉得你有点太复杂了,看看这个并告诉我它是否有效:jsfiddle.net/gPfBC。它似乎对我有用。【参考方案2】:我对已经开发的progressbar 概念进行了改进,该概念仅基于 jquery 和 CSS。 查看以下链接了解其详细信息:
http://progressbar-simple.blogspot.com/
希望对您有所帮助。
【讨论】:
我在我的项目中集成了相同的进度条,但在 IE 10+ 中我面临进度条更新延迟。我添加了以下语句以改善进度条 uploadProgess.find('div').animate( width: progressBarWidth , queue: false, duration: 100 ).html(this.uploadPercentage + "% ") 的滞后;但它仍然有点滞后。任何其他提高性能的想法。【参考方案3】:想要使用Bootstrap 4的朋友可以使用:
var delay = 500;
$(".progress-bar").each(function(i)
$(this).delay(delay * i).animate(
width: $(this).attr('aria-valuenow') + '%'
, delay);
$(this).prop('Counter', 0).animate(
Counter: $(this).text()
,
duration: delay,
// easing: 'swing',
step: function(now)
$(this).text(Math.ceil(now) + '%');
);
);
.progress
margin-bottom: 20px;
.progress-bar
width: 0;
.progress .progress-bar
transition: unset;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Bootstrap 4 Progress Bars</h2>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
</div>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
</div>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
</div>
</div>
【讨论】:
【参考方案4】:必需的 JS/CSS
CSS:- 1.bootstrap.min.css 2.jquery-ui.min.css
JS:- 1.jquery-3.3.1.js 2.bootstrap.min.js 3.jquery-ui-1.12.1.min.js
下面是附加css和JS文件的顺序
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
CSS
.ui-progressbar .ui-progressbar-overlay
background: none !important;
.ui-widget.ui-widget-content
.ui-progressbar
position: relative;
color: #362878;
width: 100%;
height: 25px;
background-color: #778899;
margin-left: auto;
margin-right: auto;
.progress-label
color: white;
position: absolute;
left: 50%;
top: 0px;
/* font-weight: bold; */
/* text-shadow: 1px 1px 0 #fff; */
margin-left: -40px;
.ui-widget-header
border: 1px solid #E8D1CF;
font-weight: bold;
margin-left: -40px;
background-color: lightslategrey;
HTML
<div class="row">
<div class="form-group col-sm-6">
<label>Job Title</label>
<input type="text" class="form-control progInput" data-pbVal="25">
</div>
<div class="form-group col-sm-6">
<label>First Name</label>
<input type="text" class="form-control progInput" data-pbVal="25">
</div>
<div class="form-group col-sm-6">
<label>Last Name</label>
<input type="text" class="form-control progInput" data-pbVal="25">
</div>
<div class="form-group col-sm-6">
<label>Email</label>
<input type="text" class="form-control progInput" data-pbVal="25">
</div>
JavaScript/JQuery
<script>
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar(
value: false,
change: function ()
progressLabel.text(progressbar.progressbar("value") + "%");
,
complete: function ()
progressLabel.text("100%");
);
function progress(value)
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", parseInt(value));
switch (parseInt(value))
case 0:
$('.ui-widget-header').css('background-color', '#778899');
break;
case 25:
$('.ui-widget-header').css('background-color', 'red');
break;
case 50:
$('.ui-widget-header').css('background-color', 'orange');
break;
case 75:
$('.ui-widget-header').css('background-color', '#bfff80');
break;
case 100:
$('.ui-widget-header').css('background-color', '#408000');
break;
default:
$('.ui-widget-header').css('background-color', '#778899');
$(".progInput").change(function ()
var pbVal = 0;
$(".progInput").each(function (index)
if ($(this).val().length > 0)
pbVal += parseInt($(this).attr('data-pbVal'));
if (pbVal > 0)
progress(pbVal)
else
progress(0);
);
return false;
);
</script>
这是输出
【讨论】:
如何用excel制作施工进度计划表
参考技术A如何用EXCEL制作施工进度计划表 做施工管理方面工作,经常要对工程的进度做准确的统计,虽然网上也有各种专门的软件,不过,还是我们每天都在用的office系列用的最顺手,今天分享一下excel制作绚丽的施工进度... 查看详情
如何用纯css3制作进度条
参考技术A条纹进度条若要制作条纹进度条我应该.bar-fill重新命名.bar-fill-stripes我使用backgrou-image属性linear-gradient同声明颜色剩余CSS3画效述相同看面代码:.bar-fill-stripesheight:15px;display:block;background:#e74c3c;width:0;border-radius:8px;background-... 查看详情
如何用纯css3制作进度条
1、写一个样式为.containe的div用来包含进度条,其次是用样式为.title的div来包裹标题。 2、接下来,添加样式为.bar的di来包含填充和未填充的进度条样式。最后,在.bar里添加样式为.bar-unfill和.bar-fill的span标签。<div class="container... 查看详情
如何用jquery显示进度条?(代码片段)
只是告诉用户您的请求正在处理中。编辑:我发现自己是一个形象。(来源:maishudi.com)如何在整页的中心显示它?答案ProgressbarjQueryprogressbarProgressBars&Controls另一答案http://plugins.jquery.com/project/jQueryProgressBar$(document).ready(functio... 查看详情
c#winform加载子窗体很慢如何用进度条显示
窗体加载的时候很慢,有点卡的样子,要等很久才能显示整个页面,请问各位高手,这个问题应该怎样解决?怎样用进度条显示?参考技术A开线程用另外一个线程控制进度条,当前进程去加载子窗体难说。。要看你是怎么加载... 查看详情
如何用svg写一个环形进度条以及动画(代码片段)
本次案例主要使用了svg的三个元素,分别为circle、text、path,关于svg的介绍大家可以看MDN上的相关教程,传送门由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动画啦,这次案例以vue来做数据交互svg的viewBoxviewB... 查看详情
如何用js+jquery制作旋转动画?
就是一些图片旋绕着中心点的物体(图片)旋转参考技术A姐姐把装备和中国的小弟弟的德国工业规划与工艺及经济改革 查看详情
如何用php和jquery制作一个小图库
Thisisthecodetomakeasimplegalleryreallyfast,withphp,jqueryandadirfullofpictures.<? //---------------------------------------------//PhpFunctiontoreadtheimagesinadirfunctiongetJsArray($dir)$ou 查看详情
如何用mfc做一个进度条
第一种,用printf模拟输出百分比,在控制台输出,实现进度监控。#include<stdio.h>#defineN20voidmBar(floatfBar)inti,j,k,m;for(i=0;i<N+6;i++)printf("\\b");k=N*fBar;m=fBar*100;printf("[");for(i=0;i<k;i++)printf("=");for(j=0;j<N-k;j++)printf("");printf("]%3d%%",m);v... 查看详情
如何用 jquery I 制作 select2
】如何用jqueryI制作select2【英文标题】:howtomakeselect2withjqueryI【发布时间】:2018-07-2615:24:39【问题描述】:我正在使用kartik-v/yii2-widget-select2,如下所示:usekartik\\select2\\Select2;echo$form->field($model,\'state_1\')->widget(Select2::classna 查看详情
如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)
注:本人非常清楚这项任务使用pr会简单很多,此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下:(怕侵权就只放个动图)可以看到小姐姐的舞蹈非常... 查看详情
如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)
注:本人非常清楚这项任务使用pr会简单很多,此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下:(怕侵权就只放个动图)可以看到小姐姐的舞蹈非常... 查看详情
如何用bootstrap制作导航条
参考技术A工具/材料SublimeText01首先我们需要搭建一个html页面,如下图所示,在页面中导入需要的bootstrap文件02然后我们在body标签中写下nav元素,如下图所示,注意给nav元素添加导航条样式03接下来就给导航添加内容,如下图所示... 查看详情
如何用js获取audio标签的已播放时长并控制进度条的width
我在写一个网页MP3播放器,没有使用audio标签的控制条而是用css写了一个,但是在通过进度条显示并控制播放进度的时候出了点问题,我想通过修改CSS中的width值来控制进度条的进度,请问该如何写JS?图片中那个进度条的id是view... 查看详情
如何用c语言实现进度条
我学校课程设计用,在网上找了半天没有哪位哥哥能给做出来帮忙传下,只能用C做哦,C++都不可以最好是原代码,我对C不是很明白,麻烦了有高手没啊? 第一种,用printf模拟输出百分比,在控制台输出,实现进度监控。代码... 查看详情
前端页面加载进度条的制作
参考技术A我们在前端页面开发过程中,经常会遇到图片,音频,视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示,当加载完成的时候,再来显示内容。推荐一个制作... 查看详情
在linux操作系统的纯命令行界面,如rpm-ivh或者scp这些命令使用时会出现进度条和百分比,如何用shell实现
或者告诉我用C或者C++实现的方法和原理,一直很困惑我知道的是如何实现的纯命令行界面下,那种在原字符位置刷新成新字符的方式如top命令的运作模式参考技术Arpm不加v参数就不会进度条和百分比了 参考技术B所谓的控制台控... 查看详情
如何用 CSS 改变滚动条的位置?
】如何用CSS改变滚动条的位置?【英文标题】:HowtochangescrollbarpositionwithCSS?【发布时间】:2013-09-3014:53:20【问题描述】:有没有办法用CSS改变滚动条的位置从左到右或从下到上?【问题讨论】:浏览器的滚动条?试试这个插件jsc... 查看详情