<script>
function star_inhtml(b) { var a=b.toString();switch(a){case"1":return"(差)";break;case"2":return"(中)";break;case"3":return"(好)";break;case"4":return"(很好)";break;case"5":return"(非常好)";break;default:break}return""; } function star_get_result(sum) { var avg = parseInt(sum/4); switch(avg) { case 0: r = '差评'; break; case 1: r = '差评'; break; case 2: r = '中评'; break; case 3: r = '好评'; break; case 4: r = '好评'; break; case 5: r = '好评'; break; default: r = '中评'; break; } return r; } function star_result() { var input_1 = parseInt(document.getElementById("dpStar1Hide").value); if (input_1 >0 ) { var sum = input_1; star_get_result(sum); } } function pingfen(){ var ping= new Ajax(); var tww = parseInt(document.getElementById("dpStar1Hide").value); ping.get('resource.php?do=resource&ac=pingfen&id=$id&opp='+tww, function(fen){ var mark =fen.split(","); //alert(mark[0]); //alert(mark[1]); alert(fen); if(mark[0] && mark[1] ){ document.getElementById('marknumberid').innerHTML = mark[0] ; document.getElementById('markpicid').src = 'images/ziyuan/'.mark[1] ; alert('评分成功'); return false; }else{ alert('评分不成功'); return false; } });}function test(){ var tww = parseInt(document.getElementById("dpStar1Hide").value); if(tww==""){ alert('您还没有评分'); return false; } var p_ajax = new Ajax(); var ajaxObj = p_ajax.createXMLHttpRequest(); try{ ajaxObj.open('GET', 'resource.php?do=resource&ac=pingfen&id=$id&opp='+tww, true); ajaxObj.send(null); ajaxObj.onreadystatechange = function(){ if (ajaxObj.readyState == 4) { if(ajaxObj.status == 200){ var mark = ajaxObj.responseText.split(',');//alert(ajaxObj.responseText); if(ajaxObj.responseText=="no"){
alert("超过了规定周期内的评分次数!");closepop(); return false; } if(mark[0] && mark[1]){ $('marknumberid').innerHTML = mark[0] ; $('markpicid').src = 'images/ziyuan/'+mark[1] ; var renm=parseInt($('ren').innerHTML)+1; $('ren').innerHTML=renm; alert('评分成功!');closepop(); return false; }else{ alert("系统异常评分失败!");closepop(); return false; }
} } }; }catch(e){ //alert(e); } } var old_div_className = ""; var old_div_title = ""; function star_aa() { alert("a"); } function star_cli() { this.parentNode.className = "dp-"+this.className+"Level"; document.getElementById(this.parentNode.id+"Txt").innerHTML = star_inhtml(this.className.replace("star","")); old_div_className = this.parentNode.className; old_div_title = document.getElementById(this.parentNode.id+"Txt").innerHTML; document.getElementById(this.parentNode.id+"Hide").value = parseInt(this.className.replace("star","")); star_result(); return false; } function star_mout() { this.parentNode.className = old_div_className; document.getElementById(this.parentNode.id+"Txt").innerHTML = old_div_title; }
function star_mover() { old_div_className = this.parentNode.className; old_div_title = document.getElementById(this.parentNode.id+"Txt").innerHTML; this.parentNode.className = "dp-"+this.className+"Level"; document.getElementById(this.parentNode.id+"Txt").innerHTML = star_inhtml(this.className.replace("star","")); }
function star_init() { var as = document.getElementsByTagName("a"); for(var i=0; i<as.length;i++) { var a = as[i]; if (a.className == "star1" || a.className=="star2" || a.className=="star3" || a.className =="star4" || a.className == "star5") { star_addEvent(a, "click", star_cli); star_addEvent(a, "mouseout", star_mout); star_addEvent(a, "mouseover", star_mover); } } }function star_addEvent( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"+type+fn](); } ); } } function star_removeEvent( obj, type, fn ) { if (obj.removeEventListener) obj.removeEventListener( type, fn, false ); else if (obj.detachEvent) { obj.detachEvent( "on"+type, obj["e"+type+fn] ); obj["e"+type+fn] = null; } }
function star_addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}
var W = screen.width;//取得屏幕分辨率宽度var H = screen.height;//取得屏幕分辨率高度
function M(id){ return document.getElementById(id);//用M()方法代替document.getElementById(id)}function MC(t){ return document.createElement(t);//用MC()方法代替document.createElement(t)};//判断浏览器是否为IEfunction isIE(){ return (document.all && window.ActiveXObject && !window.opera) ? true : false;}//取得页面的高宽function getBodySize(){ var bodySize = []; with(document.documentElement) { bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度 bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度 } return bodySize;}//创建遮盖层function popCoverDiv(){ if (M("cover_div")) { //如果存在遮盖层，则让其显示 M("cover_div").style.display = 'block'; } else { //否则创建遮盖层 var coverDiv = MC('div'); document.body.appendChild(coverDiv); coverDiv.id = 'cover_div'; with(coverDiv.style) { position = 'absolute'; background = '#CCCCCC'; left = '0px'; top = '0px'; var bodySize = getBodySize(); width = bodySize[0] + 'px' height = bodySize[1] + 'px'; zIndex = 0; if (isIE()) { filter = "Alpha(Opacity=60)";//IE逆境 } else { opacity = 0.6; } } }}//
//让登陆层显示为块 function showLogin() { var login=M("login"); login.style.display = "block"; }
//设置DIV层的样式function change(){ var login = M("login"); login.style.position = "absolute"; login.style.border = "10px solid #61c3fc"; login.style.background ="#f9fbff"; var i=0; var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*2)/2+"px"; login.style.top = (bodySize[1]/2-50-i*i)+"px"; login.style.width = i*i*2 + "px"; login.style.height = i*i*1.1 + "px"; popChange(i);}//让DIV层大小循环增大function popChange(i){ var login = M("login"); var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*2)/2+"px"; login.style.top = (bodySize[1]/2-260-i*i)+"px"; login.style.width = i*i*2 + "px"; login.style.height = i*i*1.1+ "px"; if(i<=10){ i++; setTimeout("popChange("+i+")",10);//设置超时10毫秒 }}//打开DIV层function openLiuzm(){ change(); showLogin(); popCoverDiv() void(0);//不进行任何操作,如：<a href="#">aaa</a>}//关闭DIV层function closepop(){ M('login').style.display = 'none'; M("cover_div").style.display = 'none'; void(0);}
</script>
下面是DIV的默认样式
<style>
#dp-star{ color: #111; font: normal normal normal 12px/1.231 SimSun, verdana, arial, helvetica, clean, sans-serif;} #dp-star .dp-item{ position: relative;}.dp-item{float: left; 580px;}.dp-field{float: left;margin: 0px 3px 0px 0px; 106px;}.dp-must{color: #F60;margin-right: 2px;}.dp-lowlight{color: #999;}.dp-field div{background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) no-repeat 7px -295px;border: 3px solid #FFC990;height: 12px;padding: 5px 0px 5px 6px; 87px;}
.dp-field div a{float: left;height: 12px;padding-left: 3px; 13px;* 15px;}
div {display:block;}div.dp-star1Level{ background-position: 7px -315px;}div.dp-star2Level{ background-position: 7px -335px;}div.dp-star3Level{ background-position: 7px -355px;}div.dp-star4Level{ background-position: 7px -375px;}div.dp-star5Level{ background-position: 7px -395px;}
#dp-level{ display: none; float: left; margin: 0px 3px 0px 0px; 106px;}#dp-level .dp-levelTXT{ background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) 0px -100px; margin-top: 3px; padding-left: 23px;}#dp-level .dp-levelTXT p{ background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) 100% -100px; color: #F60; font-family: SimHei, SimSun, verdana; font-size: 20px; padding: 0; 62px; margin: 0;}
#login{ position: relative; display: none; top: 20px; left: 30px; background-color: #ffffff; text-align: center; border: solid 1px; padding: 10px; z-index: 1; }
</style>
下面开始构造HTML页面代码
<div id="login"> <div id="panel"> <div id="dp-star" class="dp-group yk-fix-float"><label class="dp-label"></label> <div class="dp-item"> <div class="dp-field"> <p><span class="dp-fieldTxt">我要评分</span><span id="dpStar1Txt" class="dp-lowlight"></span></p> <div id="dpStar1" class=""><a class="star1" href="#"></a><a class="star2" href="#"></a><a class="star3" href="#"></a><a class="star4" href="#"></a><a class="star5" href="#"></a></div> <input id="dpStar1Hide" class="dpFieldHide" type="hidden" value="0" name="fuwu"></div> <div id="dp-starHint" style="display: none; ">划过星星并点击选中即可</div> <p id="dp-starError" class="dp-error" style="display: none; "></p> </div> </div> </div> <input type="button" onClick="test();" value="提交" class="tijiaodf" /> <input type="button" name="close" onClick="closepop();" value="关闭" class="quxiaodf"/> </div>