購物車星星評分
阿新 • • 發佈：2017-06-18
從零開始 tel 對象 元素 全局 set attribute tex head
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>星星</title> 6 <script type="text/javascript"> 7 var ifping=false;//增加一個全局變量控制,讓鼠標指向星星有滑動效果 8 window.onload= function () { 9 //首先獲取img元素對象10 var imgdoms = document.getElementsByTagName("img"); 11 //通過獲取到的對象數組 循環遍歷獲得鼠標指向的索引值 12 for (var i = 0; i < imgdoms.length; i++) { 13 imgdoms[i].setAttribute("index", i + 1);//計算總分，+1是因為索引從零開始 14 15 imgdoms[i].onmouseover = function() {//經過點擊事件 16 if (!ifping) { 17 var j = event.srcElement.getAttribute("index");//當前事件源 ：鼠標指向的索引 18 for (var left = 0; left < j; left++) {//給左邊的星星換圖片，原理是利用setattribute給元素添加內容 19 imgdoms[left].setAttribute("src", "images/star-on.png")20 } 21 for (var right = j; right < imgdoms.length; right++) {//同理處理右邊的星星 22 imgdoms[right].setAttribute("src", "images/star-off.png") 23 } 24 document.getElementById("span01").innerHTML = j;//給span元素賦值 25 } 26 } 27 28 imgdoms[i].onclick = function () {//經過點擊事件 29 if (!ifping) { 30 var j = event.srcElement.getAttribute("index");//當前事件源 ：鼠標指向的索引 31 for (var left = 0; left < j; left++) {//給左邊的星星換圖片，原理是利用setattribute給元素添加內容 32 imgdoms[left].setAttribute("src", "images/star-on.png") 33 } 34 for (var right = j; right < imgdoms.length; right++) {//同理處理右邊的星星 35 imgdoms[right].setAttribute("src", "images/star-off.png") 36 } 37 document.getElementById("span01").innerHTML = j;//給span元素賦值 38 } 39 } 40 } 41 } 42 </script> 43 </head> 44 <body> 45 <img src="images/star-off.png"/> 46 <img src="images/star-off.png"/> 47 <img src="images/star-off.png"/> 48 <img src="images/star-off.png"/> 49 <img src="images/star-off.png"/> 50 <img src="images/star-off.png"/> 51 <img src="images/star-off.png"/> 52 <img src="images/star-off.png"/> 53 <img src="images/star-off.png"/> 54 <img src="images/star-off.png"/> 55 56 總分為：<span id="span01"></span> 57 58 </body> 59 </html>
購物車星星評分