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)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
随机推荐
- EF6(CodeFirst)+MySql开发遇到的坑
最近一不小心偷个懒就已经过了好几个月了,真是惭愧惭愧,出来混终究是要还的,我还是把”脱坑指南“写完吧,-＿-~~.点我打开上篇博客 0x001.架构名”dbo”の殇 坑之首也,当提架构名,在mssql ...
- Linux 对比两个文本的交集和差集（comm）
200 ? "200px" : this.width)!important;} --> 介绍 comm命令可以对两个已排序好的文本的内容进行交集和差集的对比,记住必须是已排序 ...
- 关于Windows高DPI的一些简单总结
我们知道,关于高DPI的支持, Windows XP时代就开始有了, 那时关于高DPI的支持比较简单, 但是从Vista/Win7 到现在Win8 /Win8.1, Windows关于高DPI的支持已 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程（七）：解决用户上下文（Session）问题
从这篇文章中我们已经了解了微信公众平台消息传递的方式,这种方式有一个先天的缺陷:不同用户的请求都来自同一个微信服务器,这使得常规的Session无法使用(始终面对同一个请求对象,况且还有对方服务器Co ...
- 【重要更新】Senparc.Weixin SDK v4.4 升级说明
本次更新同时影响以下所有Senparc.Weixin相关版本的dll: Senparc.Weixin.dll 升级到 v4.4.2(重要) Senparc.Weixin.MP.dll 升级到 v13. ...
- flex Vector
Error: 找不到类型,或者它不是编译时常数: Vector. 或者Type was not found or was not a compile-time constant: Vector. ...
- 基础才是重中之重~C#中标准的IDispose模式
回到目录 IDispose模式在C++中用的很多,用来清理资源,而在C#里,资源分为托管和非托管两种,托管资源是由C#的CLR帮助我们清理的,它是通过调用对象的析构函数完成的对象释放工作,而对于非托管 ...
- 谷歌大牛 Rob Pike 的 5 个编程原则
谷歌大牛 Rob Pike 的 5 个编程原则 简介: Rob Pike,目前谷歌公司最著名的软件工程师之一,曾是贝尔实验室Unix开发团队成员,Plan9操作系统开发的主要领导人,Inferno操作 ...
- 批处理集锦——(4)2>nul和1>nul是什么意思？
>nul 是屏蔽操作成功显示的信息,但是出错还是会显示(即1>nul) 2>nul 是屏蔽操作失败显示的信息,如果成功依旧显示. >nul 2>nul 就是正确的错误的一 ...
- SAP Business One系统功能介绍
SAP Business One(简称SAP B One)是一套价格合理.易于实施的综合业务管理解决方案.该解决方案专为中小型企业量身打造,可确保实现公司发展.提高可盈利性和控制力度以及实现业务流程的 ...