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)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
随机推荐
- 有shi以来最详细的正则表达式入门教程
本篇文章文字内容较多,但是要学习正则就必须耐心读下去,正则表达式是正则表达式其实并没有想像中的那么困难,但是想要熟练的掌握它,还是需要下功夫勤加练习的.这里讲一些正则表达式的语法和学习方法,大家还要多 ...
- Silverlight中文本框添加回车事件后，换行无法清除的解决方法
在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...
- 分享一个U3D在Runtime显示碰撞盒的插件
有些时候,我们需要在Game视图显示碰撞盒,比如格斗游戏我要开发碰撞配置的工具,我经常需要看到碰撞盒,今天找了一下,没有发现合适的插件,我还花5美金买了一个插件,结果也只是在scene视图显示,这里我 ...
- multiOTP配置安装
https://code.google.com/p/google-authenticator/ 是google提供的OTP解决方案. http://www.multiotp.net/ 是一个开源otp ...
- javascript日常总结
如何去除掉inline-block元素之间的默认间距 前几天写一个页面 1 2 3 4 div{width:900px;} div li{ display:inline-block; width:30 ...
- 爱上MVC系列~带扩展名的路由失效问题
回到目录 对MVC中,对URL进行重写变得非常方便,你只要设置相应的路由规则即可完成,但进行MVC3后,发现设置了以下路由,系统具体不认 routes.MapRoute( name: "De ...
- iOS-----Xcode-Debug尝试
在Xcode中,Debug时,不能像eclipse ,或VS那些集成开发那样,能直接查看变量的值.那怎么在调试的时候查看XCode的变量呢? 有一些方法的. 1.新建一个Single View App ...
- WPF入门教程系列五——Window 介绍
一.窗体类基本概念 对于WPF应用程序,在Visual Studio和Expression Blend中,自定义的窗体均继承System.Windows.Window类.用户通过窗口与 Windows ...
- 安装和使用的django的debug_toolbar
安装和使用的django的debug_toolbar Django Debug Toolbar安装 安装Django Debug Toolbar pip install django-debug-to ...
- PopupWindow+ListView+OnItemClick点击无效
昨天踩了个大坑,从下午折腾到现在.实现以下功能: popupWindow显示listview,listView OnItemClick点击后获取值. 由于重写listview 是有两部分 列表正文和右 ...