JS之评价页面点亮星星进行评价

效果如下：

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title></title>
<style type="text/css"></style>
</head>
<body><script type="text/javascript"></script><!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 starliArr = star.getElementsByTagName("li");var starword = document.getElementById("star_word");var word = [ '不满意',  '基本满意', '非常满意'];//用for循环对li进行遍历for (var i = 0; i < starliArr.length; i++) {starliArr[i].index = i;starliArr[i].onclick = function () {starword.style.display = "block";starword.innerHTML = word[this.index];//先把星星的属性清空for (var j = 0; j < starliArr.length; j++) {starliArr[j].className = '';}//点亮星星for (var j = 0; j <= this.index; j++) {starliArr[j].className = 'act';}}}
}
</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>
</body>
</html>

转载于:https://www.cnblogs.com/creazybeauty/p/8287929.html

JS之评价页面点亮星星进行评价相关推荐

html 打星星评价实现,JavaScript实现星星等级评价功能
本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下效果图: Document .container{ float:left; } .score{ float: left; po ...
php星星评价,JS 实现点亮星星评分功能
本文主要和大家分享JS 实现点亮星星评分功能,希望能帮助到大家. 点亮星星评分 ★ ★ ★ ★ ★ 相关推荐:
点亮星星评分效果（js/vue）
1.使用js计算宽度 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
star评星点亮星星原生js评星 vue评星
类似于淘宝订单交易成功后,会进行评价. 项目结构如下: 一:原生js进行评星 <!DOCTYPE html><html lang="en"><head ...
JS - 点亮星星评分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
评价打星星的html代码,SMTC：纯CSS 星星打分评价
星星打分评价的页面功能,需求上经常会碰到. 网上搜一下,Js + CSS,纯 CSS 的版本也非常多. 觉得搜到的都不理想,下意识觉得应该能有更好的实现自己动手尝试一下,果然能更好用所以开篇文章, ...
mui实现评价星星点亮
总共5颗星,点击哪个就把前面几个星星都高亮. 首先,遍历5颗星,v-for='n in 5' ,然后星星用图片img标签或背景. 然后,这个星星图片是关键,它是由灰色和高亮色两个图组成的一个图标. 最 ...
基于BootStrap仿淘宝星星商品评价案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
一个漂亮的移动端评价页面
源代码下载:一个漂亮的移动端评价页面效果图: 这个水印影响效果了. 源代码下载:一个漂亮的移动端评价页面文件结构图: HTML代码: <!DOCTYPE html> <html& ...

JS之评价页面点亮星星进行评价

JS之评价页面点亮星星进行评价相关推荐

最新文章

热门文章