Javascript 实现简单的星级评分功能
2021-06-20 05:03
标签：pad 类型转换 鼠标 false char oct 简单的 com 数组 使用 javascript 实现简单的星级评分功能，思路很简单，封装一个能进行重复调用函数： 当鼠标移入后，遍历评分div里的子div，然后前两个子div改变背景为灰色，后面全部为橙色，然后改变对应的评分内容； 当鼠标移出后，使用for循环把子div背景颜色和评分内容恢复初始化状态； 当鼠标点击时，依旧前两个子div改变背景为灰色，后面全部为橙色，然后改变对应的评分内容，并且记录当前点击的是第几个子div，方便在鼠标移入移出后，依旧能固定当前点击的子div背景颜色和评分内容；如果后期页面又需要增添多一个新的评分功能，只需要再定义一个评分数组来使用即可，然后传入对应的数组来进行使用，效果如下： 代码如下： Javascript 实现简单的星级评分功能 标签：pad 类型转换 鼠标 false char oct 简单的 com 数组 原文地址：https://www.cnblogs.com/blue-guapi/p/9689434.html
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>Javascript实现简单的星级评分功能title>
6 style>
7 .content, .content1 {
8 margin-top: 20px;
9 padding-top: 20px;
10 border-top: 1px solid #000;
11 }
12 .red {
13 color: red;
14 }
15 .total-star {
16 font-size: 20px;
17 color: #333;
18 font-weight: 700;
19 }
20 .star {
21 width: 20px;
22 height: 20px;
23 border-radius: 50%;
24 background-color: #ccc;
25 display: inline-block;
26 margin-right: 5px;
27 cursor: pointer;
28 }
29 .stars {
30 color: orange;
31 margin-left: 10px;
32 }
33 style>
34 head>
35 body>
36 div class="content">
37 span class="red">*span>
38 span class="total-star">总体评价：span>
39 div class="star">div>
40 div class="star">div>
41 div class="star">div>
42 div class="star">div>
43 div class="star">div>
44 span class="stars">评分span>
45 div>
46 div class="content1">
47 span class="red">*span>
48 span class="total-star">内容丰富度：span>
49 div class="star">div>
50 div class="star">div>
51 div class="star">div>
52 div class="star">div>
53 div class="star">div>
54 span class="stars">评分span>
55 div>
56
57 script>
58 window.onload=function(){
59 var oCont = document.getElementsByClassName(‘content‘)[0];
60 var oCont1 = document.getElementsByClassName(‘content1‘)[0];
61 var aText1=[‘差‘,‘较差‘,‘好‘,‘推荐‘,‘力荐‘];
62 var aText2=[‘少‘,‘较少‘,‘一般‘,‘多‘,‘很多‘];
63
64 //调用函数
65 Stars(oCont,aText1);
66 Stars(oCont1,aText2);
67
68 function Stars(id,Txt){
69 var index=‘‘;//使用这个index来记录星星被点击后的等级
70 //获取元素
71 var aStar = id.getElementsByClassName(‘star‘);
72 var oStars = id.getElementsByClassName(‘stars‘)[0];
73
74 //让全部星星变灰
75 function gray(){
76 for(var v=0;vaStar.length;v++){
77 aStar[v].style.backgroundColor = ‘#ccc‘;
78 }
79 }
80
81 for(let i=0;iaStar.length;i++){
82
83 //设置星星颜色
84 function starColor(){
85 // 前两个星星显示灰色
86 if(i1){
87 gray();
88 for(let t=0;ti;t++){
89 aStar[t].style.backgroundColor = ‘#999‘;
90 }
91 }else{
92 //后面星星都显示橙色
93 gray();
94 for(let j=0;ji;j++){
95 aStar[j].style.backgroundColor = ‘orange‘;
96 }
97 }
98 }
99
100 //鼠标移入变换星星颜色
101 aStar[i].onmouseover=function(){
102 oStars.innerHTML = Txt[i];
103 starColor();
104 //鼠标移出变灰，评论等级清空
105 this.onmouseout=function(){
106 gray();
107 oStars.innerHTML = ‘评分‘;
108 //这里必须为 === ，否则当index==0时，会进行隐式类型转换，变成 (index==‘‘) ==> (0==‘‘) ==> (false==false)，直接return出去
109 if(index===‘‘){
110 return;
111 }else if(index1){//通过index重新设置后面鼠标移开后的星星等级
112 for(var n=0;nindex;n++){
113 aStar[n].style.backgroundColor = ‘#999‘;
114 }
115 oStars.innerHTML = Txt[index];
116 }else{
117 for(var m=0;mindex;m++){//通过index重新设置后面鼠标移开后的星星等级
118 aStar[m].style.backgroundColor = ‘orange‘;
119 }
120 oStars.innerHTML = Txt[index];
121 }
122 }
123 }
124
125 //鼠标点击固定星星等级和评论等级
126 aStar[i].onclick=function(){
127 // 关闭移出操作
128 this.onmouseout=null;
129 //星星等级
130 oStars.innerHTML = Txt[i];
131 if(i1){
132 for(let t=0;ti;t++){
133 aStar[t].style.backgroundColor = ‘#999‘;
134 //获取当前点击的是多少等级的星星，让后面鼠标移开后可以重新设置星星等级
135 index=t;
136 }
137 }else{
138 for(let j=0;ji;j++){
139 aStar[j].style.backgroundColor = ‘orange‘;
140 //获取当前点击的是多少等级的星星，让后面鼠标移开后可以重新设置星星等级
141 index=j;
142 }
143 }
144 }
145 }
146 }
147 }
148 script>
149 body>
150 html>
上一篇：判断文件是否为空 C++
下一篇：Vim一键编译C++源码
文章标题：Javascript 实现简单的星级评分功能
文章链接：http://soscw.com/index.php/essay/96269.html