JavaScript星形评分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
//存储被点击的图片的index.
var imgIndexClicked;
var imgs;
//设置图片的方法.参数i:从0到i为黄色,之后为空.
function setImgByIndex(i) {
for (var emp = 0; emp <= i; emp++) {
imgs[emp].src = "img/starYellow.png";
}
for (var emp = Number(i) + 1; emp < imgs.length; emp++) {
imgs[emp].src = "img/starEmpty.png";
}
} //鼠标移动上去,根据此图片的Index,设置5个图片的src.
function setMouseover(i) {
return function () {
setImgByIndex(i);
};
} //点击某张图片时存储该图片的index.
function setClick(i) {
return function () {
imgIndexClicked = i;
//alert("从0开始计数...第 "+i+" 个被点了.");
};
} //鼠标离开这个图片,根据保存的被点击的图片号imgIndexClicked,设置5个图片的src.
function setMouseleave() {
setImgByIndex(imgIndexClicked);
} onload = function () {
imgs = document.getElementsByTagName("img");
for (var i in imgs) {
imgs[i].onmouseover = setMouseover(i);
imgs[i].onclick = setClick(i);
imgs[i].onmouseleave = setMouseleave;//给的是方法,不是方法的调用.故setMouseleave();是错误的.
}
};
</script>
</head>
<body>
<img src="img/starYellow.png" />
<img src="img/starYellow.png" />
<img src="img/starYellow.png" />
<img src="img/starYellow.png" />
<img src="img/starYellow.png" />
</body>
</html>
JavaScript星形评分的更多相关文章
- javascript星级评分（多个）
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JavaScript星级评分，仿百度，增强版
JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- 原生JavaScript实现评分效果
一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- [JavaScript] js 迅雷评分效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- javascript实现模仿迅雷电影评分
效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 基于规则评分的密码强度检测算法分析及实现(JavaScript)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
随机推荐
- Sqlserver 如何获取每组中的第一条记录
在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属于不同的方面.功能下面,从数据库的术语来说,就是查找出每组中的一条数据. 例子 我们要从上面获得的有效 ...
- 值得使用的Spring Boot
2013年12月12日,Spring发布了4.0版本.这个本来只是作为Java平台上的控制反转容器的库,经过将近10年的发展已经成为了一个巨无霸产品.不过其依靠良好的分层设计,每个功能模块都能保持较好 ...
- querySelector和querySelectorAll
jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中 ...
- Springlake-02 权限&文档设置&Role设置&Folder设置&登录
1. 权限 有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...
- SDN跟网络虚拟化的完美结合
SDN跟网络虚拟化的完美结合 之前说过,所谓的“SDN最适合的领域是数据中心”的说法,笔者认为更准确的说法应该是SDN最适合的领域是数据中心中的网络虚拟化应用.为什么说SDN 非常适合用在网络虚拟化中 ...
- flow.ci Beta 上线，将开发工作流自动化
说起未来,我们会想到自动.智能.机器人...,希望可以从眼前重复繁琐的事情中解放出来,让"机器人"自动智能地帮我们做更多的事情:希望开发可以更自动化.智能化.社会化,更少的资源浪费 ...
- bootstrap实现嵌入的button
bootstrap实现嵌入的button 如下的效果: <div class="form-inline"> <div class="input-grou ...
- IIS集成模式下，URL重写后获取不到Session值
近期给公司网站添加了伪静态功能,但是今天发现了在伪静态的页面中,Session值是获取不到的. 原因是在伪静态请求的时候,Session请求被“过滤”掉了. 开始是把web.config文件中的mod ...
- Liferay7 BPM门户开发之39: Form表单提交的ProcessAction处理
在v6.2开始后,需要设置<requires-namespaced-parameters>false</requires-namespaced-parameters> 来避免 ...
- linker command failed with exit code 1 (use -v to see invocation)
背景:用U盘从另一台电脑考过来后,出现错误 linker command failed with exit code 1 (use -v to see invocation) 出现这种情况很可能是,项 ...