本文实例为大家分享了jquery实现彩色投票进度条的具体代码,供大家参考,具体内容如下
一、需求
如下图
重点是要实现进度条。
二、分析
html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用,所以要模拟实现。
原理:动态设置
的子元素的宽度值。
1、简单的雏形
假设只有一个进度条,如下,我们只需要知道p元素的宽度,span元素的百分比,相乘即得到span的宽度,浏览器加载时动态设置span的宽度即可实现进度条的效果。
2、投票进度条实现过程
第一步:结构如下
A:
79(2%)
B:
1986(61%)
C:
1153(36%)
D:
415(13%)
E:
89(3%)
给span增加一个width和背景色,就可以出现进度条的效果。这一步用js实现。
第二步、js设置span的宽度
第三步,js设置span的背景色
第二步中的背景色都是如下设置为一样。
$(spanArr[i]).css({'background-color':"#c2f263"}); 现在随机生成背景色,做一个彩色的进度条。以上就是彩色的进度条特效,特别适合用于投票,效果很明显,希望对大家的学习有所帮助,会喜欢上这个彩色进度条。
写下你的评论吧 !推荐阅读
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]蜡笔小新 2023-12-11 09:19:45 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]蜡笔小新 2023-12-14 14:37:52 本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]蜡笔小新 2023-12-13 20:01:16 本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]蜡笔小新 2023-12-13 13:58:25 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]蜡笔小新 2023-12-13 10:50:43 本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]蜡笔小新 2023-12-13 06:02:20 Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]蜡笔小新 2023-12-12 15:59:36 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]蜡笔小新 2023-12-12 12:45:59 例如控件ID为user.id使用$(#user.id)不能得到正确的结果必须使用\\转义即$(#user\\.id)转载于:https:www.cnblogs.comrch ... [详细]蜡笔小新 2023-12-12 12:22:11 本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]蜡笔小新 2023-12-11 12:06:41 本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]蜡笔小新 2023-12-14 17:06:58 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]蜡笔小新 2023-12-14 16:31:48 春_来_茶_馆5这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1MATLAB 串口通信
- 2Java实现PDF转为线性PDF详解
- 3基于php个人博客文献综述,个人博客网站的设计与实现—.NET(开题报告+源代码+论文+文献综述+答辩PPT)...
- 4java swing实现简单的五子棋游戏_java
- 5对I2C总线协议的一些理解
- 6iOS CALayer的transform属性(QuartzCore框架)和view的transform属性(CoreGraphics框架)
- 7Spring IOC整理
- 8【数据结构(一)】这些你不掌握找不到工作!!!
- 9oracle使索引不可见,关于oracle的不可见索引探究
- 10Python+Selenium中级篇之9-把截图类方法封装到前面的BasePage.py
- 11如何解决Launching New_configuration问题
- 12iOS逆向工程(三):利用Cycript调试App
- 13.netFramework4.5框架下运行4.0站点程序的问题
- 14派生类中参数不同的同名函数可否声明为虚函数
- 15开发笔记:JDK各个版本的新特性
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有