<!doctype html>#wrap {width: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 () { varOdiv = document.getElementById (' Wrap '); varOA = Odiv.getelementsbytagname (' A '); varoimg = Odiv.getelementsbytagname (' img '); varOcontent = Odiv.getelementsbytagname (' span ') [1]; vararrimg = [' img/nst.gif ', ' img/nsg.gif ', ' img/sth.gif ', ' img/st.gif ']; varLastarrimg = []; varlastcontent = ' '; varnum = 0; functionRating (INDEX,IMGSRC) { for(vari = 0; I <= index; i++) {Oa[i].getelementsbytagname (' img ') [0].SRC =imgsrc; } Switch(index) { Case0: ocontent.innerhtml= ' very poor '; Break; Case1: ocontent.innerhtml= ' very poor '; Break; Case2: ocontent.innerhtml= ' OK '; Break; Case3: ocontent.innerhtml= ' good '; Break; Case4: ocontent.innerhtml= ' awesome '; Break; } }; for(vari = 0; i < oa.length; i++) {Oa[i].index=i; Oa[i].onmouseover=function() {num= This. Index; for(vari = 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(vari = 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(vari = 0;i < oa.length; i++) {Lastarrimg[i]= Oa[i].getelementsbytagname (' img ') [0].src; } lastcontent=ocontent.innerhtml; }; } };</script>Article rating:<span> <a href= "javascript:" ></a> <a href= "javascript:" ><im G src= "Img/nst.gif" ></a> <a href= "javascript:" ></a> <a href= "ja Vascript: "></a> <a href=" javascript: "> </a> </span> <span id= "content" > </span> </p> ;</body>This is for the tutorial
<!doctype html>#wrap {width:400px; height:50px; border:1px #CCCCCC Solid; margin:40px Auto; Text-Align:center; Line-height:50px; } </style><script type= "Text/javascript" >window.onload=function () { varOdiv = document.getElementById (' Wrap '); varOA = Odiv.getelementsbytagname (' A '); varoimg = Odiv.getelementsbytagname (' img '); varOcontent = Odiv.getelementsbytagname (' span ') [1]; functionfntab (num) {Switch(num) { Case0: ocontent.innerhtml= ' very poor '; Break; Case1: ocontent.innerhtml= ' very poor '; Break; Case2: ocontent.innerhtml= ' OK '; Break; Case3: ocontent.innerhtml= ' good '; Break; Case4: ocontent.innerhtml= ' awesome '; Break; } }; for(vari = 0; i < oa.length; i++) {Oa[i].index=i; Oa[i].onmouseover=function () { for(vari = 0; i < oa.length; i++) {oimg[i].src= "Img/nst.gif"; } if( This. index = = 0 | | This. index = = 1 ) { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/nsg.gif"; Fntab ( This. Index); } } Else if( This. index = = Oa.length-1) { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/st.gif"; Fntab ( This. Index); } } Else { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/sth.gif"; Fntab ( This. Index); } }} Oa[i].onclick=function () { for(vari = 0; i < oa.length; i++) {oimg[i].src= "Img/nst.gif"; } if( This. index = = 0 | | This. index = = 1 ) { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/nsg.gif"; Fntab ( This. Index); } } Else if( This. index = = Oa.length-1) { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/st.gif"; Fntab ( This. Index); } } Else { for(vari = 0; I < This. index+1; i++) {oimg[i].src= "Img/sth.gif"; Fntab ( This. Index); } }} oa[i].onmouseout=function () { for(vari = This. index + 1; i < oa.length; i++) {oimg[i].src= "Img/nst.gif"; Fntab ( This. Index); } } } };</script>Article rating:<span> <a href= "javascript:" ></a> <a href= "javascript:" ><im G src= "Img/nst.gif" ></a> <a href= "javascript:" ></a> <a href= "ja Vascript: "></a> <a href=" javascript: "> </a> </span> <span id= "content" > </span> </p> ;</body>Write it by yourself! Feel more simple to write! If you use a function to wrap it up better!
Baidu Library score two code notation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
