用javaScript实现星星评分系统

目录

• javaScript代码
• 效果

javaScript代码

let database = ['很差', '差', '一般', '好', '很好'];
let divEle = document.querySelector('div');
let num = -1;
//渲染
function xuanRan() {for (let index = 0; index < database.length; index++) {let imgEle = document.createElement('img');imgEle.src = './img/empty.png';imgEle.setAttribute('data-index', index);imgEle.style.marginRight = '5px';divEle.appendChild(imgEle);}let spanEle = document.createElement('span');divEle.appendChild(spanEle);
}
xuanRan();
//移入事件
divEle.addEventListener('mouseover', function (e) {let event = e || window.event;let spanEle = document.querySelector('span');if (event.target.localName == 'img') {let imgEle1 = document.querySelectorAll('img');for (let index = 0; index <= imgEle1.length - 1; index++) {imgEle1[index].src = './img/empty.png';}for (let index = 0; index <= event.target.dataset.index; index++) {imgEle1[index].src = './img/shining.png';spanEle.innerText = `${database[index]}`;}}
});
//移出事件
divEle.addEventListener('mouseout', function () {let spanEle = document.querySelector('span');let imgEle1 = document.querySelectorAll('img');for (let index = 0; index <= imgEle1.length - 1; index++) {imgEle1[index].src = './img/empty.png';}spanEle.innerText = ``;for (let index = 0; index <= num; index++) {imgEle1[index].src = './img/shining.png';spanEle.innerText = `${database[index]}`;}
});
//点击事件
divEle.addEventListener('click', function (e) {let event = e || window.event;if (event.target.localName == 'img') {if (num != event.target.dataset.index) {num = event.target.dataset.index;} else {num = -1;}}
})

效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！