更新時間：2021-07-29 23:40:39作者：admin2
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > <html xmlns= > <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>Title</title> <meta name=description content= /> <meta name=keywords content= /> <meta name=owner content= /> <meta name=robots content=index, follow /> <meta name=googlebot content=index, follow /> <style type=text/css> <!-- body {background:#fff;text-align:center;margin:0 auto;padding: 0;font:12px Arial;color:#000;line-height:1.2em} div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;} h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} table,td,tr,th{font-size:12px;} /* 星級評分 */ .shop-rating { height: 25px; overflow: hidden; zoom: 1; padding: 2px 0px; position: relative; z-index: 999; } .shop-rating span { height: 23px; display: block; line-height: 23px; float: left; } .shop-rating span.title { width: 125px; text-align: right; margin-right: 5px; } .shop-rating ul { float: left; margin:0;padding:0 } .shop-rating .result { margin-left: 20px; padding-top: 2px; } .shop-rating .result span { color: #ff6d02; } .shop-rating .result em { color: #f60; font-family: arial; font-weight: bold; } .shop-rating .result strong { color: #666666; font-weight: normal; } .rating-level, .rating-level a { background: url( ) no-repeat scroll 1000px 1000px; } .rating-level { background-position: 0px 0px; width: 120px; height: 23px; position: relative; z-index: 1000; } .rating-level li { display: inline; } .rating-level a { line-height: 23px; height: 23px; position: absolute; top: 0px; left: 0px; text-indent: -999em; *zoom: 1; outline: none; } .rating-level a.one-star { width: 20%; z-index: 6; } .rating-level a.two-stars { width: 40%; z-index: 5; } .rating-level a.three-stars { width: 60%; z-index: 4; } .rating-level a.four-stars { width: 80%; z-index: 3; } .rating-level a.five-stars { width: 100%; z-index: 2; } .rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;} .rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;} .rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;} --> </style> </head> <body> <div class=shop-rating> <span class=title>物流公司的服務：</span> <ul class=rating-level id=stars1> <li><a class=one-star star:value=100 href=#>100</a></li> <li><a class=two-stars star:value=200 href=#>200</a></li> <li><a class=three-stars star:value=300 href=#>300</a></li> <li><a class=four-stars star:value=400 href=#>400</a></li> <li><a class=five-stars star:value=500 href=#>500</a></li> </ul> <span class=result id=stars1-tips></span> <input type=hidden id=stars1-input name=a value= size=2 /> </div> <!-- # 星級評分 # star:value = 分數 --> <div class=shop-rating> <span class=title>物流公司的服務：</span> <ul class=rating-level id=stars2> <li><a class=one-star star:value=1 href=#>1</a></li> <li><a class=two-stars star:value=2 href=#>2</a></li> <li><a class=three-stars star:value=3 href=#>3</a></li> <li><a class=four-stars star:value=4 href=#>4</a></li> <li><a class=five-stars star:value=5 href=#>5</a></li> </ul> <span class=result id=stars2-tips></span> <input type=hidden id=stars2-input name=b value= size=2 /> </div> <!-- END 星級評分 --> <input type=button value=test onclick=teststars() /> <script type=text/javascript> var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } function stopDefault( e ) { if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; } return false; } /** * 星星打分組件 * * @author Yunsd * @date 2010-7-5 */ var Stars = Class.create(); Stars.prototype = { initialize: function(star,options) { this.SetOptions(options); //默認屬性 var flag = 999; //定義全局指針 var isIE = (document.all) ? true : false; //IE? var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表 var input = document.getElementById(this.options.Input) || document.getElementById(star+-input); // 輸出結果 var tips = document.getElementById(this.options.Tips) || document.getElementById(star+-tips); // 打印提示 var nowClass = + this.options.nowClass; // 定義選中星星樣式名 var tipsTxt = this.options.tipsTxt; // 定義提示文案 var len = starlist.length; //星星數量 for(i=0;i<len;i++){ // 綁定事件 點擊 鼠標滑過 starlist[i].value = i; starlist[i].onclick = function(e){ stopDefault(e); this.className = this.className + nowClass; flag = this.value; input.value = this.getAttribute(star:value); tips.innerHTML = tipsTxt[this.value] } starlist[i].onmouseover = function(){ if (flag< 999){ var reg = RegExp(nowClass,g); starlist[flag].className = starlist[flag].className.replace(reg,) } } starlist[i].onmouseout = function(){ if (flag< 999){ starlist[flag].className = starlist[flag].className + nowClass; } } }; if (isIE){ //FIX IE下樣式錯誤 var li = document.getElementById(star).getElementsByTagName('li'); for (var i = 0, len = li.length; i < len; i++) { var c = li[i]; if (c) { c.className = c.getElementsByTagName('a')[0].className; } } } }, //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 Input: ,//設置觸保存分數的INPUT Tips: ,//設置提示文案容器 nowClass: current-rating,//選中的樣式名 tipsTxt: [1分-嚴重不合格,2分-不合格,3分-合格,4分-優秀,5分-完美]//提示文案 }; Extend(this.options, options || {}); } } /* For TEST */ function teststars(){ alert(document.getElementById(stars1-input).value + | + document.getElementById(stars2-input).value) } var Stars1 = new Stars(stars1,{nowClass:current-rating,tipsTxt:[100分-嚴重不合格,200分-不合格,300分-合格,400分-優秀,500分-完美]}) var Stars2 = new Stars(stars2) </script> </body> </html>