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)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
随机推荐
- [异常解决] 安卓6.0权限问题导致老蓝牙程序出现异常解决办法：Need ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission...
一.问题: 之前写的一款安卓4.4的应用程序,用来连接蓝牙BLE,而现在拿出来用新的AS编译(此时SDK为6.0,手机也是6.0)应用程序并不能搜索到蓝牙,查看log总是报权限错误: Need ACC ...
- Mac配置Qt环境——Could not resolve SDK path for 'macosx10.8'
前言:解决在Mac端安装Qt后,出现的Could not resolve SDK path for 'macosx10.8'的配置信息. 首先,发现问题之前,先搜索一下.但是搜索的结果都是说,找到配置 ...
- Docker容器入门
为什么要看docker 从去年起就或多或少的接受了docker的熏陶,主要还是Infoq在去年有很多关于docker的实践视频讲座,记得有一篇是<Docker在雪球的技术实践>,当时听的也 ...
- maven install 读取jar包时出错；error in opening zip file
错误信息: [INFO] ------------------------------------------------------------------------ [ERROR] Failed ...
- 转载：Spring AOP (下)
昨天记录了Spring AOP学习的一部分(http://www.cnblogs.com/yanbincn/archive/2012/08/13/2635413.html),本来是想一口气梳理完的.但 ...
- 动手搭个wordpress
看到很多人都是自己搭建博客服务器,然后一切都在自己的掌控之下,这样就不存在什么迁移,数据安全之类的问题,当然需要自己搞个空间了,不过现在都便宜的不行,$15/year,也是醉了.我不怎么写博客,但是个 ...
- C# 围棋盘的画法
C#绘图不是那么美,不过对于简单的图形,不注重美感的图质,用C#还是很方便的. 背景颜色.绘制图表线色.纵横列大小可按照个人喜好调节. 不提供AI代码,我自己设计的AI不是很完美,就不拿出来献丑了,算 ...
- Python中的魔法方法
1.什么是魔法方法? 魔法方法就是可以给你的类增加魔力的特殊方法,如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用,你可以定义自己想要的行为,而这一 ...
- 第五章 运输层（UDP和TCP三次握手，四次挥手分析）
序言 通过这章,可以知道其实三次握手和四次挥手其实真的好简单,通过这章的学习,我相信你也会同样的认为,以后在也不需要听到别人问三次握手的过程而自己一脸懵逼了,觉得人家好屌,其实也就是他懂你不懂,仅 ...
- Bootstrap排版中地址与引用详解
地址元素address 我们的地址在HTML5中增加了一个address标签,可以把我们的地址写在address标签里面,address里面强调换行等等都是可以的. 实例: <address&g ...