<!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>