JavaScript 实现五角星评分功能
Posted pinin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 实现五角星评分功能相关的知识，希望对你有一定的参考价值。
很久没写博客了，今年元旦到现在的业余时间一直在学习英语，看英文原著，挺耗时间的，没时间写博客（借口）。
同事正在学习前端开发，写了这个 Demo 给他学习。嘻嘻
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五角星评分</title> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <style type="text/css"> * { margin: 0; padding: 0; } i.fa { color: #e67e22; font-size: 40px; } </style> </head> <body> <div> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </div> </body> <script> var div = document.getElementsByTagName("div")[0]; var stars = document.getElementsByTagName("i"); var storage = void(0); // 点击的时候记录当前点击的位置 var sign = false; // 标记当前是否是半颗星，false 不是半星，true 为半星 for (var i = 0; i < stars.length; i++) { stars[i].setAttribute("index", i); stars[i].onmousemove = function (e) { var currIndex = this.getAttribute("index"); var currSign = starHalf(e.offsetX, this.offsetWidth) starLight(stars, currIndex, currSign) } stars[i].onmouseleave = function (e) { starLight(stars, storage, sign) } stars[i].onclick = function (e) { storage = this.getAttribute("index"); sign = starHalf(e.offsetX, this.offsetWidth) } } /** * 是否是半星 * @param {currWidth} 一个星星最左边到鼠标位置的长度 * @param {halfWidth} 一个星星一半的长度 * @return {boolean} true 是半星，false 不是半星 */ function starHalf(currWidth, halfWidth) { return currWidth <= halfWidth / 2 ? true : false } /** * 点亮星星 * @param {object} elem 星星数组元素 * @param {number} index 最多需要点亮多个星星 * @param {boolean} sign 是否是半星，true 是半星，false 不是半星 */ function starLight(elem, index, sign) { for (var i = 0; i < elem.length; i++) { elem[i].className = i <= index ? "fa fa-star" : "fa fa-star-o"; } if (sign) { elem[index].className = "fa fa-star-half-o"; } } </script> </html>
以上是关于JavaScript 实现五角星评分功能的主要内容，如果未能解决你的问题，请参考以下文章