|
來博客園的第一篇隨筆，本來是想隨便發(fā)一下的，但是后來感覺還是要發(fā)一下有紀(jì)念意義的文章，所以還是決定寫一下自己當(dāng)時(shí)發(fā)在別的論壇的原創(chuàng)文章，哈哈。 通過JavaScript來實(shí)現(xiàn)五星好評。 這個(gè)功能相信各位都不陌生，不論是淘寶還是京東，亦或者是各類微商，都離不開好評這個(gè)東西，好評多了，平臺(tái)對你的關(guān)照也就多了起來。 這個(gè)由于是好早以前寫的代碼了，效果圖就不放了，我把所有需要本地的東西都用在線的方式替代了，比如說圖片就用圖床給替代了，別的也沒啥需要替代的了。 話不多說，直接上一下代碼，然后我們簡單的解析一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body, a, h1, h2, h3, h4, h5, h6, p, a, b, i, em, ul, ol, li, strong, table, th, tr, td, img, form, input, button, select, option, textarea { margin: 0; padding: 0; } .body { text-align: center; margin: 10px auto; width: 800px; height: 64px; background-color: aqua; } span { display: inline-block; width: 40px; height: 40px; /* border: 1px solid red; */ } span.star { background: url(https://s3./2020/11/21/Dl492V.png) no-repeat; /* cursor: pointer; */ /* vertical-align: -2px; */ /*span為行內(nèi)元素，不能直接設(shè)置寬高，轉(zhuǎn)換成block*/ } span.star-off { background-position: -40px 0; } </style> </head> <body> <!-- 圖片精靈技術(shù)----網(wǎng)站上有許多的icon圖片，比如說打評分等等，如果每個(gè)都單獨(dú)做的話，每次請求都會(huì)對服務(wù)器造成很大的壓力，所以就把所有的 圖標(biāo)做在一起了 --> <div class="body"> <div> <span style="width: 150px;">請選擇您的評價(jià):</span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span id="pingjia"></span> </div> </div> <script> //獲取對象 // var div = document.querySelector("div"); // console.log(div); // var span = document.querySelectorAll(".star") // console.log(span); var star = document.getElementsByClassName("star"); var pingjia = document.querySelector("#pingjia"); var pingjias = ["很差","較差","一般","良好","很好"]; var len = star.length; onoff = true; //開關(guān)，判斷是否點(diǎn)擊，點(diǎn)擊后不執(zhí)行移入移出事件 for(var i = 0;i < len;i++){ //綁定鼠標(biāo)移入 移出 點(diǎn)擊 star[i].index = i; star[i].onmouseover = function(){ if(onoff){ var num = this.index; pingjia.innerHTML = pingjias[num]; for(var i = 0;i <= num;i++){ star[i].style.backgroundPosition = "0 0"; } } } star[i].onmouseout = function(){ if(onoff){ var num = this.index; pingjia.innerHTML = ""; for(var i = 0;i<=num;i++){ star[i].style.backgroundPosition = "-40px 0"; } } } star[i].onclick =function() { onoff=false; pingjia.innerHTML = ""; for(var j = 0;j < len;j++){ star[j].style.backgroundPosition = "-40px 0"; } var num = this.index; pingjia.innerHTML = pingjias[num]; for(var i = 0;i <= num;i++){ star[i].style.backgroundPosition = "0 0"; }} } </script> </body> </html> 其實(shí)思路非常簡單，就是通過css屬性中的定位來進(jìn)行圖片的移動(dòng)， 首先呢，先讓所有的星星隱藏起來，也就是讓他們顯示的位置移到右面，顯示空星，之后通過js中的onmouseover來判斷鼠標(biāo)的移動(dòng)，根據(jù)移動(dòng)的位置來實(shí)現(xiàn)評分的改變，也就是那個(gè)innerHtml，通過這個(gè)來改變文字效果，再接著也就是增加別的效果了，比如說評分后想要改變之類的，我們先清空一下屬性，然后直接添加新的屬性就行了，因?yàn)楫吘褂?jì)算器的運(yùn)算遠(yuǎn)非人能相比的，所以雖然看著代碼是這個(gè)先那個(gè)后，但是人眼根本分辨不出來的，然后基本上大部分的功能就實(shí)現(xiàn)了。 |
|
|
就是這樣，一個(gè)星滿一個(gè)星空，然后我們通過位移和大小來設(shè)置讓他只能顯示一個(gè)，之后通過js來判斷用戶的鼠標(biāo)移動(dòng)即可實(shí)現(xiàn)功能。
