電商網站訂單評價得分的星級樣式實現

時間 2019-11-10

標籤網站訂單評價得分星級樣式實現欄目網站開發简体版

原文原文鏈接

概述：javascript

電商網站中的訂單通常都容許評價，好比質量評價和服務評價等，頁面上以星星多少表示評價的高低。css

（如下截圖來源於京東）html

本文基於本身的理解和實現「五星級評價」，供參考。java

----------------------------------------------------------------------------jquery

前期準備：ide

從京東訂單頁面中拷貝了一個圖片，此處命名爲star-s.png。函數

圖片star-s.png：網站

圖片分析：this

像素160×15px，包含5個滿星和5個空星，每一個星星的像素都是15×15px，左對齊，最右邊留有15×15px的空白（暫時沒理解這片空白區域的用途）。url

----------------------------------------------------------------------------

第一部分：靜態得分呈現

功能：

已評價的訂單顯示出具體的星級得分。

實現方式：

評價區域的div尺寸爲75×15px，將背景圖片設置爲star-s.png，div區域正好顯示五顆星。

星級的不一樣徹底取決於圖片的background-position-x值，以15px爲單位，初始值設置爲-75px時，頁面顯示出來的是空星，即得分是零顆星。若是得分設置爲一顆星，則將圖片右移15px，即background-position-x的值增長15px至-60px。其餘星級得分以此類推。

具體代碼：

將不一樣的星級參數background-position-x值以類名區分，不一樣的星級得分設置爲具體的類名便可。

（樣式代碼）

 1            /*星級圖片區域div的樣式*/
 2            .star-s
 3             {
 4                 display:inline-block;
 5                 height:15px;
 6                 width:75px;
 7                 background-image:url("star-s.png");
 8             }
 9             /*零顆星的樣式*/
10             .s0
11             {
12                 background-position-x:-75px;
13             }
14             /*一顆星的樣式*/
15             .s1
16             {
17                 background-position-x:-60px;
18             }
19             /*兩顆星的樣式*/
20             .s2
21             {
22                 background-position-x:-45px;
23             }
24             /*三顆星的樣式*/
25             .s3
26             {
27                 background-position-x:-30px;
28             }
29             /*四顆星的樣式*/
30             .s4
31             {
32                 background-position-x:-15px;
33             }
34             /*五顆星的樣式*/
35             .s5
36             {
37                 background-position-x:0px;
38             }

View Code

（HTML代碼）

1             零顆星<div class="star-s s0"></div><br/>
2             一顆星<div class="star-s s1"></div><br/>
3             兩顆星<div class="star-s s2"></div><br/>
4             三顆星<div class="star-s s3"></div><br/>
5             四顆星<div class="star-s s4"></div><br/>
6             五顆星<div class="star-s s5"></div>

View Code

（呈現效果）

第二部分：動態實現評價得分

功能：

未評價的訂單容許用戶經過鼠標點擊星級圖片給訂單打分。

實現方式：

因爲星級圖片的呈現區域大小固定，鼠標進入該區域後須要獲取到鼠標相對於該區域左側的距離，根據該距離與15px的關係，動態調整該div的類名以實現星級圖片的改變。

監控每一個星級區域div的mousemove事件，獲取該事件的參數e，e.offsetX表示鼠標距離該div左側的距離。根據e.offsetX/15獲得的整數來肯定當前鼠標所處的星級。

具體代碼：

封裝一個公用函數，傳入星級圖片所在div的id，返回鼠標點擊星級圖片後的分數值（默認得分爲1分，可自設）。

（HTML代碼）

1             質量評價<div id="quality" class="star-s"></div><br/>
2             服務評價<div id="service" class="star-s"></div>

View Code

（JavaScript代碼）

 1                /*封裝函數*/
 2                function StarComment(eleID) {
 3                 var starValue = 1;
 4                 var tar = $("#" + eleID)[0];
 5                 var dealMousemove=function(e) {
 6                     var that = e;
 7                     console.log(e.offsetX);
 8                     starValue = parseInt(e.offsetX / 15) + 1;
 9                     tar.className = "star-s s" + starValue.toString();
10                     console.log(tar.className);
11                 }
12                 $(tar).bind("mousemove", function (e) {
13                     dealMousemove(e);
14                 });
15                 $(tar).bind("click", function () {
16                     $(tar).unbind("mousemove")
17                 });
18                 
19                 /*開放接口函數：返回div的星級分數*/
20                 this.getStarValue=function(){
21                     return starValue;
22                 }
23             }
24 
25             /*根據須要初始化指定的div，給其賦予星級得分功能*/
26             var starQuality = new StarComment("quality");
27             var starService = new StarComment("service");

View Code

（呈現效果）

完整代碼附後：

 1 <html>
 2     <head>
 3         <script src="jquery-1.9.1.js"></script>
 4         <script src="jquery-1.9.1.min.js"></script>
 5         <style type="text/css">
 6             .star-s
 7             {
 8                 display:inline-block;
 9                 height:15px;
10                 width:75px;
11                 background-image:url("star-s.png");
12             }
13             .s0
14             {
15                 background-position-x:-75px;
16             }
17             .s1
18             {
19                 background-position-x:-60px;
20             }
21             .s2
22             {
23                 background-position-x:-45px;
24             }
25             .s3
26             {
27                 background-position-x:-30px;
28             }
29             .s4
30             {
31                 background-position-x:-15px;
32             }
33             .s5
34             {
35                 background-position-x:0px;
36             }
37 
38         </style>
39     </head>
40     <body>
41         <div >
42             零顆星<div class="star-s s0"></div><br/>
43             一顆星<div class="star-s s1"></div><br/>
44             兩顆星<div class="star-s s2"></div><br/>
45             三顆星<div class="star-s s3"></div><br/>
46             四顆星<div class="star-s s4"></div><br/>
47             五顆星<div class="star-s s5"></div>
48         </div>
49         <div >
50             質量評價<div id="quality" class="star-s"></div><br/>
51             服務評價<div id="service" class="star-s"></div>
52         </div>
53 
54         <script type="text/javascript">
55             
56             function StarComment(eleID) {
57                 var starValue = 1;
58                 var tar = $("#" + eleID)[0];
59                 var dealMousemove=function(e) {
60                     var that = e;
61                     console.log(e.offsetX);
62                     starValue = parseInt(e.offsetX / 15) + 1;
63                     tar.className = "star-s s" + starValue.toString();
64                     console.log(tar.className);
65                 }
66                 $(tar).bind("mousemove", function (e) {
67                     dealMousemove(e);
68                 });
69                 $(tar).bind("click", function () {
70                     $(tar).unbind("mousemove")
71                 });
72                 
73                 this.getStarValue=function(){
74                     return starValue;
75                 }
76             }
77 
78             var starQuality = new StarComment("quality");
79             var starService = new StarComment("service");
80         </script>
81     </body>
82 </html>