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)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
随机推荐
- angular ng-model类型格式转化
在angular开发中我们经常会遇见输入框中的string的值,却想在scope上的model表现为整型.浮点.货币,或者在radio的value是一个true,false的Boolean类型,一组c ...
- 用Nim语言开发windows GUI图形界面程序
前言 本文得到了“樂師”的大力支持, 我们一起调试程序到深夜,要是没有他的帮忙, 我不知道要多久才能迈过这道坎, 另外“归心”还有其他人也提供了帮助, 他们都来自于QQ群:“Nim开发集中营”4693 ...
- DOM+CSS3实现小游戏SwingCopters
前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...
- 搭建hadoop1.2集群
环境准备 我使用的是vmware workstation,首先安装ubuntu 12.04,安装完成后通过vmware的clone,clone出两个虚机,设置的IP分别是: 192.168.74.13 ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- javascript日常总结
如何去除掉inline-block元素之间的默认间距 前几天写一个页面 1 2 3 4 div{width:900px;} div li{ display:inline-block; width:30 ...
- Java-数组练习5
5．从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行.请采用循环控制语句来实现. (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和.) 1 1 1 ...
- PHP面向对象07_PDO
oop007复习 2014-9-4 9:42:28 摘要: 1.pdo的作用 2.pdo的安装 3.pdo连接属性设置 4.pdo对象和PDOStatement对象 5.pdo预处理 6.pdo事务机 ...
- [转载] fail-fast总结(通过ArrayList来说明fail-fast的原理、解决办法)
说明: 转载自http://www.cnblogs.com/skywang12345/p/3308762.html概要 前面,我们已经学习了ArrayList.接下来,我们以ArrayList为例,对 ...
- tool list
http://www.pairwise.org/tools.asp 用例设计工具 组合测试工具pict 代码调试 Findbugs 介绍及使用方法 接口测试工具 webservices studi ...