js实现星星打分效果的方法


Posted in Javascript onJuly 05, 2020

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
js实现简单的可切换选项卡效果
Apr 10 #Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jquery禁用右键示例
2014/04/28 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
js实现下一页页码效果
2017/03/07 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
用python对oracle进行简单性能测试
2020/12/05 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
中英双版中文教师求职信
2013/10/27 职场文书
求职自荐信
2013/12/14 职场文书
初一地理教学反思
2014/01/16 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
解除劳动合同协议书
2014/09/17 职场文书
教师远程培训心得体会
2016/01/09 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
SQL注入详解及防范方法
2021/12/06 MySQL