开发者社区> awbeci> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js网页特效漂亮的星级评价效果

简介: js网页特效漂亮的星级评价效果 body{ margin:0;padding:0 10px;color:#333;text-align:center;font:12px Arial,Helvetica,sans-serif; } h1,h2,h3,h4,h...
+关注继续查看
<html> 
<head> 
<meta http-equiv="content-Type" content="text/html;charset=gb2312"> 
<title>js网页特效漂亮的星级评价效果</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 = "http://www.5xsj.net/img/201201/icon_star_1.gif"; 
for (var i=1; i<6; i++) { 
sArray[i] = new Image(); 
sArray[i].src = "http://www.5xsj.net/img/201201/icon_star_2.gif"; 
} 
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; 
} 
} 
</script> 
</head> 
<body> 
<div id="AddDP"> 
<h5>添加点评</h5> 
<form name="formappraisement" action="" 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="26135eea" 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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/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="http://www.5xsj.net/img/201201/icon_star_2.gif"></a> </span></li> 
</ul> 
</div> 
<div style="clear:both"></div> 
</form> 
</div> 
</body> 
</html>


源地址:http://www.5xsj.net/Webs_View.asp?id=1094

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS做一个简单的网页广告特效
为了练习javascript,做了一个简单的demo,实现的是广告从顶部慢慢拉出到最大,然后停留2s,再收缩到比较小且可以关闭的广告特效。图片可以替换为任意其他的图片。
7 0
【七天深入MySQL实战营】答疑汇总Day6 MySQL表和索引优化实战
【开营第六课】【MySQL表和索引优化实战】 讲师:田杰,阿里云高级运维专家。 课程内容:InnoDB表和索引设计最佳实践;索引设计的分析与优化。 答疑汇总:特别感谢班委@李敏 同学
714 0
AliOS Things声源定位应用演示
1. 概述 利用麦克风阵列进行声源定位在智能降噪、语音增强、语音识别等领域有广泛应用和研究前景。本文介绍基于AliOS Things + STM32F413H Discovery开发板实现声源定位算法集成和功能演示。
3572 0
一个不错的JS站 收藏了
一个不错的JS站 收藏了 http://www.sharejs.com Div 加滚动条 http://www.cssrain.cn/article.asp?id=148  版权 作者:灵动生活 郝宪玮 出处:http://www.cnblogs.com/ywqu 如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章, 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
545 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔&middot;盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
590
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载