JavaScript實現(xiàn)商品評價五星好評

更新時間：2020年11月30日 08:40:26 作者：_Yoke

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)商品評價五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)商品評價五星好評的具體代碼，供大家參考，具體內(nèi)容如下

一.效果展示

二.代碼實現(xiàn)

1.html代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>好評</title>
 <link rel="stylesheet" type="text/css" href="../js7/css/reset.css" />
 <link rel="stylesheet" type="text/css" href="css/myTest3.css" />
 <script type="text/javascript">
  window.onload = function(){
  ul = document.getElementById('star');
  lis = ul.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
   lis[i].onclick = function(){
   //被用戶點擊后彈框并提示分數(shù)
   //獲取當前對象的對象名
   var className = this.className;//nostart
   //重新定義class,并彈出評分
   ul.className = "nostar " + className;
   var score = this.getElementsByTagName('a')[0].title;
   console.log(score);
   alert('評分：' + score);
   }
  }
  }
 </script>
 </head>
 <body>
 <ul class="nostar " id="star">
  <li class="onestar"><a title="1分"></a></li>
  <li class="twostar"><a title="2分"></a></li>
  <li class="threestar"><a title="3分"></a></li>
  <li class="fourstar"><a title="4分"></a></li>
  <li class="fivestar"><a title="5分"></a></li>
 </ul>
 </body>
</html>

2.css代碼

body{
 padding: 200px 600px;
}
.nostar{
 width: 80px;
 height: 16px;
 background: url(../img/star-matrix.gif) no-repeat;
 position: relative;
}

.nostar li {
  width: 16px;
  height: 16px;
  float: left;
  
}

.nostar li a{
   display: inline-block; 
  width: 16px;
  height: 16px; 
  position: absolute;
  /* text-indent: -999px; */ 
  /* 層級關(guān)系*/
   z-index: 10; 
}
.nostar li a:hover{
  /* 將a的大小變化 width 80 */
  left: 0px;
  width: 80px;
  background: url(../img/star-matrix.gif) no-repeat;
  z-index: 5;
}
.onestar{background-position: 0 -16px;}
.twostar{background-position: 0 -32px;}
.threestar{background-position: 0 -48px;}
.fourstar{background-position: 0 -64px;}
.fivestar{background-position: 0 -80px;}


.nostar li.onestar a:hover{ background-position: 0 -96px ;}
.nostar li.twostar a:hover{ background-position: 0 -112px ;}
.nostar li.threestar a:hover{ background-position: 0 -128px ;}
.nostar li.fourstar a:hover{ background-position: 0 -144px ;}
.nostar li.fivestar a:hover{ background-position: 0 -160px ;}

3.代碼下載

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于JS實現(xiàn)經(jīng)典的井字棋游戲
井字棋作為我們在上學時代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來實現(xiàn)一款井字棋游戲，感興趣的可以動手嘗試一下
2022-04-04
十個開發(fā)人員面臨的最常見的JavaScript問題總結(jié)
今天，JavaScript?是幾乎所有現(xiàn)代?Web?應(yīng)用的核心。這就是為什么JavaScript問題，以及找到導致這些問題的錯誤，是?Web?發(fā)者的首要任務(wù)。本文總結(jié)了十個常見的問題及解決方法，需要的可以參考一下
2022-11-11
three.js引入glsl文件并高亮顯示代碼的完整步驟
這篇文章主要給大家介紹了關(guān)于three.js引入glsl文件并高亮顯示代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
JS實現(xiàn)的豎向折疊菜單代碼
這篇文章主要介紹了JS實現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動態(tài)遍歷頁面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
js實現(xiàn)幻燈片輪播圖
這篇文章主要為大家詳細介紹了js實現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JS中精巧的自動柯里化實現(xiàn)方法
給大家詳細分析了JS中精巧的自動柯里化實現(xiàn)方法并通過代碼實例分析了過程和原理，參考學習下吧。
2017-12-12
Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式
這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時候容易不知道怎么配置,需要的朋友可以參考下
2023-06-06
JavaScript如何調(diào)用C++模塊中的函數(shù)
這篇文章主要給大家介紹了關(guān)于JavaScript如何調(diào)用C++模塊中函數(shù)的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-01-01
原生JS控制多個滾動條同步跟隨滾動效果
本文要探討的是，當這兩個容器元素的內(nèi)容都超出了容器高度，即都出現(xiàn)了滾動框的時候，如何在其中一個容器元素滾動時，讓另外一個元素也隨之滾動
2017-12-12
DOM 事件的深入淺出（一）
本文主要介紹了不同DOM級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發(fā)原理和方法。熟練地使用不同級別的DOM事件并且解決相應(yīng)的瀏覽器兼容性問題對我們的前端項目開發(fā)會很有幫助。
2016-12-12