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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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的网址
2006/11/25 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
退休感言
2014/01/28 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
学习礼仪心得体会
2014/09/01 职场文书
高中生逃课检讨书
2014/10/10 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
钱学森电影观后感
2015/06/04 职场文书