五星评价

来源：互联网发布：mac pkg文件解压编辑：程序博客网时间：2024/06/11 15:56

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>
<style type="text/css" >
.innerDiv{
float: left;
}
</style>
</head>
<body>

<div class="innerDiv" onclick="a()" id="a">
<img id="aa" src="img/yellow-star-icon-2094.png" style="width: 50px;opacity:0.3"/>
</div>
<div class="innerDiv" data-index="2" onclick="b()" id="b">
<img id="bb" src="img/yellow-star-icon-2094.png" style="width: 50px;opacity:0.3"/>
</div>
<div class="innerDiv" data-index="3" onclick="c()" id="c">
<img id="cc" src="img/yellow-star-icon-2094.png" style="width: 50px;opacity:0.3"/>
</div>
<div class="innerDiv" data-index="4" onclick="d()" id="d">
<img id="dd" src="img/yellow-star-icon-2094.png" style="width: 50px;opacity:0.3"/>
</div>
<div class="innerDiv" data-index="5" onclick="e()" id="e">
<img id="ee" src="img/yellow-star-icon-2094.png" style="width: 50px;opacity:0.3"/>
</div>
<br />
<input type="button" style="width: 80px;height: 30px;" value="提交" onclick="bu()"/>
如果你赋值了代码请给添加一个五角星的图片放到img 包下，图片名字给改成 yellow-star-icon-2094.png

<script>
var number = 0;
function a(){
document.getElementById("aa").style.cssText ='width: 50px;opacity:1';
document.getElementById("bb").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("cc").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("dd").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("ee").style.cssText ='width: 50px;opacity:0.3';
number = 1;
}
function b(){
document.getElementById("aa").style.cssText ='width: 50px;opacity:1';
document.getElementById("bb").style.cssText ='width: 50px;opacity:1';
document.getElementById("cc").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("dd").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("ee").style.cssText ='width: 50px;opacity:0.3';
number = 2;
}
function c(){
document.getElementById("aa").style.cssText ='width: 50px;opacity:1';
document.getElementById("bb").style.cssText ='width: 50px;opacity:1';
document.getElementById("cc").style.cssText ='width: 50px;opacity:1';
document.getElementById("dd").style.cssText ='width: 50px;opacity:0.3';
document.getElementById("ee").style.cssText ='width: 50px;opacity:0.3';
number = 3;
}
function d(){
document.getElementById("aa").style.cssText ='width: 50px;opacity:1';
document.getElementById("bb").style.cssText ='width: 50px;opacity:1';
document.getElementById("cc").style.cssText ='width: 50px;opacity:1';
document.getElementById("dd").style.cssText ='width: 50px;opacity:1';
document.getElementById("ee").style.cssText ='width: 50px;opacity:0.3';
number = 4;
}
function e(){
document.getElementById("aa").style.cssText ='width: 50px;opacity:1';
document.getElementById("bb").style.cssText ='width: 50px;opacity:1';
document.getElementById("cc").style.cssText ='width: 50px;opacity:1';
document.getElementById("dd").style.cssText ='width: 50px;opacity:1';
document.getElementById("ee").style.cssText ='width: 50px;opacity:1';
number = 5;
}
function bu(){
if(number ==0){
alert("请给好评,亲");
}else{
alert("谢谢，你的评价");
}

}
</script>
</body>
</html>

阅读全文

0 0