相似淘寶評論的星級評分
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">javascript
<html xmlns="http://www.w3.org/1999/xhtml"> <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;}css
/* 星級評分 */ .shop-rating { height: 25px; overflow: hidden; zoom: 1; padding: 2px 0px; position: relative; z-index: 999; }html
.shop-rating span { height: 23px; display: block; line-height: 23px; float: left; }java
.shop-rating span.title { width: 125px; text-align: right; margin-right: 5px; }app
.shop-rating ul { float: left; margin:0;padding:0 }ui
.shop-rating .result { margin-left: 20px; padding-top: 2px; }this
.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(http://a.tbcdn.cn/app/rc/img/star_v2.png) 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; }google
.rating-level a { line-height: 23px; height: 23px; position: absolute; top: 0px; left: 0px; text-indent: -999em; *zoom: 1; outline: none; }url
.rating-level a.one-star { width: 20%; z-index: 6; }spa
.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](http://my.oschina.net/arthor) Yunsd * [@date](http://my.oschina.net/u/2504391) 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> `
- 1. javascript實現相似於淘寶的星級評價
- 2. 淘寶評價小星星
- 3. 相似淘寶五星點評 ，Jquery實現代碼
- 4. Python3——爬取淘寶評論
- 5. 星級評分
- 6. 小程序仿淘寶- 五星點評
- 7. 關於星級評論
- 8. python 爬蟲基礎——淘寶評論
- 9. Python爬取淘寶店鋪和評論
- 10. item_review - 獲得淘寶商品評論
- 更多相關文章...
- • Hibernate的二級緩存 - Hibernate教程
- • Hibernate的級聯與反轉 - Hibernate教程
- • NewSQL-TiDB相關
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
- 1. javascript實現相似於淘寶的星級評價
- 2. 淘寶評價小星星
- 3. 相似淘寶五星點評 ，Jquery實現代碼
- 4. Python3——爬取淘寶評論
- 5. 星級評分
- 6. 小程序仿淘寶- 五星點評
- 7. 關於星級評論
- 8. python 爬蟲基礎——淘寶評論
- 9. Python爬取淘寶店鋪和評論
- 10. item_review - 獲得淘寶商品評論