`
webcode
  • 浏览: 6110367 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Jquery的each函数--轻松实现一个页面中的多个进度条

 
阅读更多

做了一个限时任务领取的页面,如图:

一、功能:

A:一个页面中有几个不同任务。

B:任务完成多少,彩色图片就显示多少。

C:当完成75%时,锁头消失。

D:当任务为0时,按钮变灰。

二、核心代码

var main_width = 450;
	$(document).ready(function(){
		$("table").each(function(){
            var td1w = main_width*$(this).attr('per');
			var td2w = main_width-td1w;
            $(this).find("td.td1").width(td1w);
			$(this).find("td.td2").width(td2w);
			if(td1w<340){
				$(this).find(".suo").css("left",td2w/2-14);
				if(td1w==0){
					$(this).find(".td2").css("background","none");
				}
			}else{
				$(this).find(".suo").hide();
			}
		});
});


分享到:
评论

相关推荐

    jquery 实现的进度条插件

    本篇文章将详细讲解如何利用jQuery实现一个进度条插件,以及其在程序进度显示和AJAX文件上传中的应用。 首先,进度条插件的核心功能是动态展示一个过程的完成度,它可以是一个下载、上传、渲染或其他耗时操作的状态...

    文件上传插件(jQuery-File-Upload)

    **jQuery-File-Upload** 是一个广泛使用的前端文件上传插件,它提供了丰富的功能和优秀的用户体验。这个插件是基于JavaScript库jQuery构建的,旨在简化文件上传操作,尤其是在需要批量上传、进度显示以及跨域上传的...

    jQuery-File-Upload asp.net MVC3 Demo

    "jQuery-File-Upload" 是一个著名的前端文件上传插件,尤其在Web开发领域中广泛应用。这个插件基于JavaScript库jQuery,提供了强大的功能,如多文件选择、文件预览、进度条显示、取消上传以及大文件分块上传等。在这...

    jQuery+HTML5 SVG饼状图形进度条动画特效

    jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在本项目中,jQuery将用于控制SVG元素的显示、更新和动画效果。 **三、饼状图形的创建** 1. **HTML结构**:首先,在HTML文件中创建...

    jQuery带进度条日期时间轴自动播放代码.zip

    本资源"jQuery带进度条日期时间轴自动播放代码.zip"提供了一个实用的jQuery代码示例,旨在帮助开发者实现一个带有进度条的日期时间轴自动播放功能。这一特性广泛应用于展示历史事件、项目进度或新闻更新等场景,为...

    jquery fileupload带进度条的文件上传

    jQuery File Upload是一个强大的插件,它提供了丰富的功能,包括多文件选择、文件预览、进度条显示、取消上传等,极大地提升了用户体验。本项目将重点介绍如何使用jQuery File Upload实现带进度条的文件上传,并结合...

    jQuery-MP3播放器实现

    在本文中,我们将深入探讨如何使用jQuery来实现一个MP3播放器。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得创建交互式的网页应用变得更加容易。结合HTML5的Audio API,我们可以...

    Jquery插件实现用户注册

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。在本文中,我们将深入探讨如何利用jQuery来创建一个用户注册插件,以实现高效且用户友好的注册功能。 首先,...

    flask-simple-file-uploader:简单地将 jQuery-File-Upload 与 Flask 微框架一起使用

    4. **编写视图函数**:在 Flask 应用中添加一个视图函数来处理文件上传请求: ```python @app.route('/upload', methods=['POST']) def upload(): files = request.files.getlist('files') for file in files: ...

    jquery上传插件的使用

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。对于文件上传功能,jQuery提供了各种插件来增强用户体验,让上传过程更加友好和高效。本文将详细介绍如何使用jQuery...

    jquery多个图片上传和回显

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本文将深入探讨如何使用jQuery实现多个图片的上传和回显功能,同时支持图片的删除与回显。 首先,让我们了解...

    JQuery基础入门

    - `$(elements)`:将一个或多个DOM元素转换成JQuery对象。例如:`$(document.body).css("background", "red")`,用于设置整个页面的背景颜色。 - `$(callback)`:当DOM文档加载完成时执行指定的函数。例如:`$...

    jquery带播放进度条的时间轴样式代码

    2. 动态更新进度条:假设有一个`playProgress`函数,每次调用时传入当前播放的秒数。 ```javascript function playProgress(currentTime) { $('.timeline li .progress-bar').each(function() { var timeAtPoint =...

    jQuery带进度条幻灯片循环周期特效特效代码

    本篇将详细讲解如何利用jQuery实现一个带有进度条的幻灯片循环周期特效。 首先,我们需要理解jQuery的核心概念。jQuery简化了DOM操作、事件处理、动画和Ajax交互,使得开发者可以更快速、更简洁地编写代码。在这个...

    php + jquery 批量图片上传

    每选中一个文件,就将其添加到FormData中,键值对形式为`'files[]': file`。 4. **AJAX异步上传**: - 使用jQuery的`$.ajax`或`$.post`方法发送POST请求,将FormData对象作为数据参数。 - 设置请求头`Content-...

    jQuery手机移动端多张图片上传插件.zip

    这个“jQuery手机移动端多张图片上传插件”提供了一个便捷的解决方案,允许用户轻松地上传多张图片。下面将详细探讨jQuery、其代码实现以及如何在移动端应用中实现图片上传功能。 ### jQuery 简介 jQuery 是一个轻...

    jQuery教程(Cnblogs)

    本文作为《jQuery教程》的第一章,旨在为读者提供一个清晰且全面的起点,帮助大家快速掌握jQuery的基础知识并学会如何搭建开发环境。无论是对于初学者还是有一定经验的开发者来说,都能从中获得有价值的信息。 **...

    ajax文件异步上传工具

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的API设计使得开发者能够快速、高效地编写跨浏览器的JavaScript代码。 ### 3. Ajax基础 Ajax(Asynchronous ...

    jQuery实现带播放列表的音乐播放器功能特效源码.zip

    该资源是一个基于jQuery实现的音乐播放器功能特效的源代码,它包含了一个播放列表,能够为用户提供方便的音乐切换和播放体验。在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画...

Global site tag (gtag.js) - Google Analytics