标签:
今天练习JS,写了个评价评分的代码,初学者,只当练手了.
1 ul { 2 border: 1px #0094ff solid; 3 text-align: center; 4 float: left; 5 list-style: none; 6 padding: 0px; 7 8 } 9 li { 10 border: #0094ff 1px solid; 11 width: 30px; 12 height: 30px; 13 line-height: 30px; 14 float: left; 15 }
1 <ul id="ult"> 2 <li>1</li> 3 <li>2</li> 4 <li>3</li> 5 <li>4</li> 6 <li>5</li> 7 </ul>
1 <script type="text/javascript"> 2 //取所有li标签元素 3 var liList = document.getElementsByTagName("li"); 4 //定义当前被点击元素的变量 5 var ifClick; 6 //定义当前鼠标所在位置的变量 7 var ifEnter; 8 //为li标签添加鼠标移入移出及点击事件 9 for (var i = 0; i < liList.length; i++) { 10 liList[i].xuHao = i; 11 liList[i].onmouseenter =function() { 12 objHuang(this); 13 } 14 liList[i].onmouseleave = leave; 15 liList[i].onclick = function () { 16 if (ifClick != undefined) { 17 if (ifClick == this.xuHao) { 18 objBai(); 19 ifClick = undefined; 20 } else { 21 objBai(); 22 objHuang(this); 23 ifClick = this.xuHao; 24 } 25 } else { 26 ifClick = this.xuHao; 27 objHuang(this); 28 } 29 30 31 } 32 } 33 34 //鼠标移出事件 35 function leave() { 36 if (ifClick!=undefined) { 37 if (this.xuHao > ifClick) { 38 for (var i = ifClick; i < liList.length; i++) { 39 if (i + 1 < liList.length) { 40 liList[i+1].style.backgroundColor = "#ffffff"; 41 } 42 } 43 } 44 } else { 45 objBai(); 46 } 47 } 48 49 //标签还原白色 50 function objBai() { 51 for (var i = 0; i < liList.length; i++) { 52 liList[i].style.backgroundColor = "#ffffff"; 53 } 54 } 55 56 //鼠标移入事件中,从当前标签到最前标签变黄 57 function objHuang(litab) { 58 litab.style.backgroundColor = "yellow"; 59 ifEnter = litab.xuHao; 60 var previousObj = litab.previousElementSibling; 61 do { 62 previousObj.style.backgroundColor = "yellow"; 63 previousObj = previousObj.previousElementSibling; 64 } while (previousObj) 65 } 66 67 68 69 </script>
标签:
原文地址:http://www.cnblogs.com/fong/p/4180134.html