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 相关文章推荐
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
JavaScript模块详解
Dec 18 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
vue-router源码之history类的浅析
May 21 Javascript
关于layui flow loading占位图的实现方法
Sep 21 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
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python count函数使用方法实例解析
2020/03/23 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
设置器与访问器的定义以及各自特点
2016/01/08 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
师德师风剖析材料
2014/09/30 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android