3顶

漂亮星星评价效果

稿源：互联网 2022-04-02 21:43:20 点击： 5183 撤稿纠错

点亮星星进行评价效果，网页常用的一种网页特效。

以下讨论的是和评价相关的漂亮星星评价效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮的星级评价效果 站长特效网欢迎您。</title>
<style type="text/css">
body{
 margin:0;padding:0 10px;color:#333;text-align:center;font:12px Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4,h5,h6,form,ul,img{
 margin:0;padding:0;border:0;
}
li{
 list-style:none;
}
div#AddDP{
 text-align:left;margin-top:20px;border:1px solid #ffdfb6;background:#fffbf5;
}
div#AddDP h5{
 margin:0;padding:5px;background:#fff3dd;font-size:14px;
}
div#AddDP ul.Star{
 margin-top:8px;margin-left:6em;
}
div#AddDP ul.Star li{
 float:left;margin-right:8px;margin-bottom:5px;margin-bottom:0;list-style:none;
}
div#AddDP ul.Star li span.Select{
 float:left;padding:5px;border:1px solid #ffcc00;display:block;
}
div#AddDP ul.Star li span.Select img{
 vertical-align:middle;
}
</style>
<script language="javascript">
var sArray = new Object;
 sArray[0] = new Image;
 sArray[0].src = "/img/icon_star_1.gif";
 for (var i=1; i<6; i++) {
  sArray[i] = new Image();
  sArray[i].src = "/img/icon_star_2.gif";
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 var starTimer;
 var pro ;
 var rate ;
 function initStar() {
  try {
   setProfix("star_");
   setStars(document.getElementById("rating").value,'rating');
   setProfix("taste_");
   setStars(document.getElementById("taste").value,'taste');
   setProfix("price_");
   setStars(document.getElementById("price").value,'price');
   setProfix("environment_");
   setStars(document.getElementById("environment").value,'environment');
  } catch(e){
  }
 }
 function showStars(starNum,rate) {
 try {
  clearStarTimer();
  greyStars();
  colorStars(starNum);
  } catch(e){}
  //setStars(starNum,rate);
 }
 function setProfix(profix) {
   pro = profix ;
 }
 function colorStars(starNum) {
  try {
   for (var i=1; i <= starNum; i++) {
    var tmpStar = document.getElementById(pro + i);
    tmpStar.src = sArray[starNum].src;
   }
  } catch(e){}
 }
 function greyStars() {
  try {
   for (var i=1; i<6; i++) {
    var tmpStar = document.getElementById(pro + i);
    tmpStar.src = sArray[0].src;
   }
  } catch(e){}
 }
 function greyAll(curpro,currate) {
  try {
   document.getElementById(currate).value ="";
   for (var i=1; i<6; i++) {
    var tmpStar = document.getElementById(curpro + i);
    tmpStar.src = sArray[0].src;
   }
  } catch(e){}
 }
 function setStars(starNum,rate) {
  rate = rate ;
  try {
   clearStarTimer();
   var rating = document.getElementById(rate);
   rating.value = starNum;
   showStars(starNum);
   } catch(e){}
 }
 function clearStars(currate) {
  rate = currate ;
  try {
   var rating = document.getElementById(rate);
   if (rating.value != '') {
    setStars(rating.value,rate);
   } else {
    greyStars();
   }
  } catch(e){}
 }
 function resetStars() {
  try {
   clearStarTimer();
   var rating = document.getElementById(rate);
   if (rating.value != '') {
    setStars(rating.value,rate);
   } else {
    greyStars();
   }
  } catch(e){}
 }
 function clearStarTimer() {
  if (starTimer) {
   clearTimeout(starTimer);
   starTimer = null;
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="AddDP">
  <h5>添加点评</h5>
  <form name="formappraisement" action="http://www.zzjs.net" method="post">
    <input name="appraisementflag" id="appraisementflag" value="0" type="hidden">
    <input id="appraisementcity" name="appraisementcity" value="168" type="hidden">
    <input id="appraisementstoreid" name="appraisementstoreid" value="3edcff4f33564c4f9ddf6e2026135eea" type="hidden">
    <input id="rating" name="serving" value="" type="hidden">
    <input id="taste" name="taste" value="1" type="hidden">
    <input id="price" name="price" value="5" type="hidden">
    <input id="environment" name="environment" value="2" type="hidden">
    <div>
      <ul class="Star">
        <li><span class="number">*</span>服务<span class="Select"> <a onmouseover="javascript:setProfix('star_');showStars(1,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(1,'rating');"><img id="star_1" title="差(1)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(2,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(2,'rating');"><img id="star_2" title="一般(2)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(3,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(3,'rating');"><img id="star_3" title="好(3)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(4,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(4,'rating');"><img id="star_4" title="很好(4)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(5,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(5,'rating');"><img id="star_5" title="非常好(5)" src="/img/icon_star_1.gif"></a> </span></li>
        <li><span class="number">*</span>口味<span class="Select"> <a onmouseover="javascript:setProfix('taste_');showStars(1,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(1,'taste');"><img id="taste_1" title="差(1)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(2,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(2,'taste');"><img id="taste_2" title="一般(2)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(3,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(3,'taste');"><img id="taste_3" title="好(3)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(4,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(4,'taste');"><img id="taste_4" title="很好(4)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(5,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(5,'taste');"><img id="taste_5" title="非常好(5)" src="/img/icon_star_1.gif"></a> </span></li>
        <li><span class="number">*</span>环境<span class="Select"> <a onmouseover="javascript:setProfix('environment_');showStars(1,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(1,'environment');"><img id="environment_1" title="差(1)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(2,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(2,'environment');"><img id="environment_2" title="一般(2)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(3,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(3,'environment');"><img id="environment_3" title="好(3)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(4,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(4,'environment');"><img id="environment_4" title="很好(4)" src="/img/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(5,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(5,'environment');"><img id="environment_5" title="非常好(5)" src="/img/icon_star_1.gif"></a> </span></li>
        <li><span class="number">*</span>性价比<span class="Select"> <a onmouseover="javascript:setProfix('price_');showStars(1,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(1,'price');"><img id="price_1" title="差(1)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(2,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(2,'price');"><img id="price_2" title="一般(2)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(3,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(3,'price');"><img id="price_3" title="好(3)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(4,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(4,'price');"><img id="price_4" title="很好(4)" src="/img/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(5,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(5,'price');"><img id="price_5" title="非常好(5)" src="/img/icon_star_2.gif"></a> </span></li>
      </ul>
    </div>
    <div style="clear:both"></div>
  </form>
</div>
</body>
</html>

关于漂亮星星评价效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564645.shtml方便下次再访问哦。

·上一篇： js实现网页临时收藏夹效果
·下一篇： 几款文字和图片滚动特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

漂亮星星评价效果

文章分类LIST >>返回首页

最新游戏

最新新闻