标题 | js实现星星打分效果的方法 |
内容 | 很多网站都有如下图这样的星星打分效果,今天就看下用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 class=wrapper> 打分结果 <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> |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。