谁知道怎么做类似淘宝上面打分的小星星的代码？谢谢

写作技巧2021-07-29 23:40:39admin2

<!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>  </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>  <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>  <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>