<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ 400px; height:50px; border:1px #CCCCCC solid; margin: 40px auto; text-align:center; line-height:50px; } .hide{ display:none !important; } .show{ display:block !important; } </style> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById('wrap'); var oa = odiv.getElementsByTagName('a'); var oimg = odiv.getElementsByTagName('img'); var ocontent = odiv.getElementsByTagName('span')[1]; var arrimg = ['img/nst.gif','img/nsg.gif','img/sth.gif','img/st.gif']; var lastarrimg = []; var lastcontent = ' '; var num = 0; function rating(index,imgsrc) { for(var i = 0; i <= index; i++) { oa[i].getElementsByTagName('img')[0].src =imgsrc; } switch(index) { case 0: ocontent.innerHTML = '极差';break; case 1: ocontent.innerHTML = '很差';break; case 2: ocontent.innerHTML = '还行';break; case 3: ocontent.innerHTML = '不错';break; case 4: ocontent.innerHTML = '真棒';break; } }; for( var i = 0; i < oa.length; i++ ) { oa[i].index = i; oa[i].onmouseover = function () { num = this.index; for( var i = 0; i < oa.length; i++ ) { lastarrimg[i] = oa[i].getElementsByTagName('img')[0].src; } rating(oa.length-1,arrimg[0]); if( num < 2 ) { rating(num,arrimg[1]); } else if( num == 4) { rating(num,arrimg[3]); } else { rating(num,arrimg[2]); } }; oa[i].onmouseout = function () { for( var i = 0; i < oa.length; i++) { oa[i].getElementsByTagName('img')[0].src = lastarrimg[i]; } ocontent.innerHTML = lastcontent; }; oa[i].onclick = function () { num = this.index; rating(oa.length-1,arrimg[0]) if( num < 2 ) { rating(num,arrimg[1]); } else { rating(num,arrimg[3]); } for(var i = 0;i < oa.length; i++) { lastarrimg[i] = oa[i].getElementsByTagName('img')[0].src; } lastcontent = ocontent.innerHTML; }; } }; </script> </head> <body> <p id="wrap"> 文章评价: <span> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> </span> <span id="content"> </span> </p> </body> </html>
这个是教程给的
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ 400px; height:50px; border:1px #CCCCCC solid; margin: 40px auto; text-align:center; line-height:50px; } </style> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById('wrap'); var oa = odiv.getElementsByTagName('a'); var oimg = odiv.getElementsByTagName('img'); var ocontent = odiv.getElementsByTagName('span')[1]; function fntab(num) { switch(num) { case 0: ocontent.innerHTML = '极差';break; case 1: ocontent.innerHTML = '很差';break; case 2: ocontent.innerHTML = '还行';break; case 3: ocontent.innerHTML = '不错';break; case 4: ocontent.innerHTML = '真棒';break; } }; for( var i = 0; i < oa.length; i++ ) { oa[i].index = i; oa[i].onmouseover = function () { for(var i = 0; i < oa.length; i++) { oimg[i].src = "img/nst.gif"; } if( this.index == 0 || this.index == 1 ) { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/nsg.gif"; fntab(this.index); } } else if (this.index == oa.length-1) { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/st.gif"; fntab(this.index); } } else { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/sth.gif"; fntab(this.index); } } } oa[i].onclick = function () { for(var i = 0; i < oa.length; i++) { oimg[i].src = "img/nst.gif"; } if( this.index == 0 || this.index == 1 ) { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/nsg.gif"; fntab(this.index); } } else if (this.index == oa.length-1) { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/st.gif"; fntab(this.index); } } else { for( var i = 0; i < this.index+1; i++) { oimg[i].src = "img/sth.gif"; fntab(this.index); } } } oa[i].onmouseout = function () { for( var i = this.index + 1; i < oa.length; i++) { oimg[i].src = "img/nst.gif"; fntab(this.index); } } } }; </script> </head> <body> <p id="wrap"> 文章评价: <span> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> <a href="javascript:"><img src="img/nst.gif"></a> </span> <span id="content"> </span> </p> </body> </html>
自己写的！感觉自己写的更加简单点！如果用函数包起来更好点！