很多网站都有如下图这样的星星打分效果，今天就看下用js怎么实现打分效果。
js实现星星打分效果的方法 三联
效果详解
1. 鼠标移上的时候星星点亮，下面的文字显示。鼠标移出的时候星星为灰，下面文字不显示。
2. 鼠标移到某个星星上，它之前的所有星星都会亮。
3. 鼠标移到某个星星上并点击，会显示打分结果。
代码如下:
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>切换</title>
<style>
.wrapper{width:300px; margin:10px auto; font:14px/1.5 arial;}
/*tab*/
#star{overflow:hidden;}
#star li{
float:left;
width:20px;
height:20px;
margin:2px;
display:inline;
color:#999;
font:bold 18px arial;
cursor:pointer
}
#star .act{
color:#c00
}
#star_word{
width:80px;
height:30px;
line-height:30px;
border:1px solid #ccc;
margin:10px;
text-align:center;
display:none
}
</style>
<script>
window.onload = function(){
var star = document.getElementById("star");
var star_li = star.getElementsByTagName("li");
var star_word = document.getElementById("star_word");
var result = document.getElementById("result");
var i=0;
var j=0;
var len = star_li.length;
var word = ['很差','差','一般',"好","很好"]
for(i=0; i<len; i++){
star_li[i].index = i;
star_li[i].onmouseover = function(){
star_word.style.display = "block";
star_word.innerHTML = word[this.index];
for(i=0; i<=this.index; i++){
star_li[i].className = "act";
}
}
star_li[i].onmouseout = function(){
star_word.style.display = "none";
for(i=0; i<len; i++){
star_li[i].className = "";
}
}
star_li[i].onclick = function(){
result.innerHTML = (this.index+1)+"分";
}
}
}
</script>
</head>
<body>
<div>
打分结果
<span id="result"></span>
<ul id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<div id="star_word">一般</div>
</div>
</body>
</html>
- 杭州师范大学2015年“三位一体”综合评价招生章程
- 青岛科技大学2014年校企合作录取情况统计
- 南京交通职业技术学院2015单招申请体育特长生材料汇总
- 青岛科技大学2014年外省市录取情况表
- 南京交通职业技术学院2015单招申请校长推荐生材料汇总
- 2015年河北农业大学《学历证书电子注册备案表》样表
- 浙江中医药大学2015年高水平运动员招生简章
- 青岛科技大学2014年省内录取分数情况表
- 南京交通职业技术学院2015单招考生申请免考/加分材料汇总
- 青岛科技大学2014年春季高考录取情况统计
- 2015年南京交通职业技术学院寒假期间招生咨询相关事项的通知
- 河北农业大学2015年接收应届本科生推荐免试攻读硕士学位研究生工作办法
- 河南师范大学2014年在职攻读硕士专业学位录取结果查询
- 河北农业大学2014年GCT成绩公示
- 河北农业大学2015年硕士招生专业目录
- 河北农业大学2015年硕博连读生选拨工作安排
- 河北农业大学2015年硕士招生初试参考书
- 浙江中医药大学滨江学院2015年“三位一体”综合评价选拔录取招生简章
- 南昌大学2015级成人高等学历教育新生录取查询通知
- 上海海事大学2014年在职工程硕士研究生录取结果公示
- 苏州工艺美术职业技术学院2015年单招报名确认名单公示
- 浙江中医药大学2015年“三位一体”综合评价选拔录取招生简章
- 2015年上海市春招高校自主测试确认开始时间通知
- 苏州工艺美术职业技术学院2015年单独招生报名确认表
- 苏州工艺美术职业技术学院2015年单招艺术特长生报名及加试考核办法
- top-management
- top manager
- topmast
- topmost
- top-notch
- top-notch
- top-off
- top officers
- topics/expressing-agreement-and-support/urging-and-persuading/
- topics/expressing-agreement-and-support/words-and-phrases-expressing-agreement-and-acceptance/
- 呷
- 呷
- 呷1
- 呷2
- 呷呷
- 呸
- 呻
- 呻吟
- 呻唤
- 呼
- 三个火枪手读后感范文5篇
- 挪威的森林读书笔记500字
- 高一语文必修三必背篇目
- 高一语文知识点归纳及重点
- 关于《小王子》读后感范文800字
- 高一感恩母亲议论文800字
- 老人与海读书心得感悟精选范文5篇
- 高一语文部编版知识点
- 红岩读后感范文300字
- 月亮与六便士读后感优秀范文500字