jq demo 点击评分组件
<!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>无标题文档</title>
<style>
li{ float:left; width:50px; height:50px; background:red; margin:5px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$("li").click(function(){
//console.log($(this).index());
var $this=$(this).index();
var $length=$('li').length;
for(var i=0;i<$length;i++){
if(i<=$this){
$('li').eq(i).css('background','blue');
}else{
$('li').eq(i).css('background','red');
}
}
})
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
jq demo 点击评分组件的更多相关文章
- jq demo 点击弹窗，居中，可滚动，可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 点击选中元素左右移动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- 干货之运用CALayer创建星级评分组件（五角星）
本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的 ...
- Full-featured Vue 评分组件
分享一下最近写的 vue 的评分组件 Features: 支持半星.可清除.文案展示.只读.自定义颜色.自定义字符及图片等.支持 hover 的时候改变 value.内置三种样式,以及非常好看 DEM ...
- vue 星星评分组件
显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...
- 【CSS】329- 非常强！3行核心css代码的rate评分组件
像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行? 01 效果图 02 原理 主要是借助radio单选框,梳理如下: 去 ...
- 原生JS结合cookie实现商品评分组件
开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...
- Angular 星级评分组件
一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需 ...
随机推荐
- 在 Tomcat 中自定义 404 页面（简单配置）
打开 Tomcat 中的 web.xml,(tomcat/conf/web.xml) 添加如下代码: <error-page> <error-code>404</e ...
- springmvc sessionfilter 登录过滤器
1.在web.xml中配置 <!-- sessionfilter --> <filter> <filter-name>sessionFilter</filte ...
- np.meshgrid(）用法+ np.stack()用法
A,B,C,D,E,F是6个网格点,坐标如图,如何用矩阵形式(坐标矩阵)来批量描述这些点的坐标呢?答案如下 这就是坐标矩阵——横坐标矩阵X XX中的每个元素,与纵坐标矩阵Y YY中对应位置元素,共同构 ...
- web服务器集群（多台web服务器）后session如何同步和共享
在访问量上去以后,很多人会采用web集群的方式在满足逐渐增长的用户量.这时候就不得不面对一个问题,那就是在多个服务器下,每次请求都会因为负载均衡而分配到不同的服务器上.用户在登录服务器后,下一次请求被 ...
- 剑指offer（44）单词翻转序列
题目描述 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...
- maven 执行testng.xml文件失败解决问题
在pom.xml中配置了testng的依赖后,在surefire-plugin中又配置了suitexmlfiles指向testng.xml文件,但是使用mvn test运行时,没有运行testng.x ...
- tp剩余未验证内容-8
模型类的自动验证? 分为自动验证, 和 动态验证(手工验证), 前者的验证规则是定义在模型类中的, 所以要自己创建 扩展的/继承的模型类, 同时用 D方法实例化模型类 而动态验证是 先调用 valid ...
- Linux常用命令——压缩解压命令
Linux常用命令——压缩解压命令 Linux gzip 描述:压缩文件 语法:gzip [文件名] 压缩后文件格式:.gz gunzip 描述:解压后缀为.gz的文件 语法:gunzip [文件名 ...
- 使用python+hadoop-streaming编写hadoop处理程序
Hadoop Streaming提供了一个便于进行MapReduce编程的工具包,使用它可以基于一些可执行命令.脚本语言或其他编程语言来实现Mapper和 Reducer,从而充分利用Hadoop并行 ...
- vue实现简单的购物车功能
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...