五星好评的详细步骤
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style>
#ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
vertical-align: middle;
height: 28px;
}
#div { display: inline-block; vertical-align: middle; margin-left: 10px; }
#ul li { float: left; background: gray; width: 27px; height: 28px; margin: 10px; }
#ul li.active { background: red; } </style> </head>
<body> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- <div id="div"></div> --> </body>
<script> var oli = document.querySelectorAll("#ul li"); //设置一个变量为-1,原因是差评的数量可能是没有,最小的下线取值可以到0; var point = -1; //设置每一个元素的角标 for (var i = 0; i < oli.length; i++) { oli[i].index = i; }
ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; //鼠标经过,通过角标计数一次; if (target.tagName === "LI") { var count = target.index; for (var i = 0; i <= count; i++) { oli[i].classList.add("active"); } } }; ul.onmouseout = function () { for (var i = 0; i < oli.length; i++) { if (i <= point) { oli[i].classList.add("active"); } else { oli[i].classList.remove("active"); } } };
ul.onclick=function(e){ var ev=event||ev; var target=ev.target||ev.srcElement; if(target.tagName==='LI'){ //鼠标点击一次计数,当鼠标等级的最小次数小于等于-1的时候,就结束循环,因为差评的话也有可能是小于等于-1的 var count=target.index; if(count<=point)return; point=target.index; } } </script> <!-- <script> var oli = document.querySelectorAll("#ul li"); var div = document.querySelector("#div"); var point = -1; //设置角标的获取; for (var i = 0; i < oli.length; i++) { oli[i].index = i; } //委托事件 ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; if (target.tagName === "LI") { var count=target.index; for (var i = 0; i <=count; i++) { oli[i].classList.add("active"); } } };
ul.onmouseout=function(){ for(var i=0;i<oli.length;i++){ if(i<=point){ oli[i].classList.add('active'); }else{ oli[i].classList.remove('active') } } }
ul.onclick=function(e){ var ev=event||e; var target=ev.target||ev.srcElement; if(target.tagName==='LI'){ var count=target.index; if(count<=point)return; point =target.index; } } </script> -->
<!-- <script> var oli = document.querySelectorAll("#ul li"); var div = document.querySelector("#div"); var point = -1; for (var i = 0; i < oli.length; i++) { oli[i].index = i; } ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; if (target.tagName === "LI") { var count = target.index; for (var i = 0; i <= count; i++) { oli[i].classList.add("active"); } } }; ul.onmouseout = function () { for (var i = 0; i < oli.length; i++) { if (i <= point) { oli[i].classList.add("active"); } else { oli[i].classList.remove("active"); } } }; ul.onclick = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; //核心思想通过角标找到对应的小盒子,还用到了标签名的结果返回值大写字母 if (target.tagName === "LI") { var count = target.index; if (count <= point) { return; } point = target.index; } }; </script> --> </html>
#div { display: inline-block; vertical-align: middle; margin-left: 10px; }
#ul li { float: left; background: gray; width: 27px; height: 28px; margin: 10px; }
#ul li.active { background: red; } </style> </head>
<body> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- <div id="div"></div> --> </body>
<script> var oli = document.querySelectorAll("#ul li"); //设置一个变量为-1,原因是差评的数量可能是没有,最小的下线取值可以到0; var point = -1; //设置每一个元素的角标 for (var i = 0; i < oli.length; i++) { oli[i].index = i; }
ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; //鼠标经过,通过角标计数一次; if (target.tagName === "LI") { var count = target.index; for (var i = 0; i <= count; i++) { oli[i].classList.add("active"); } } }; ul.onmouseout = function () { for (var i = 0; i < oli.length; i++) { if (i <= point) { oli[i].classList.add("active"); } else { oli[i].classList.remove("active"); } } };
ul.onclick=function(e){ var ev=event||ev; var target=ev.target||ev.srcElement; if(target.tagName==='LI'){ //鼠标点击一次计数,当鼠标等级的最小次数小于等于-1的时候,就结束循环,因为差评的话也有可能是小于等于-1的 var count=target.index; if(count<=point)return; point=target.index; } } </script> <!-- <script> var oli = document.querySelectorAll("#ul li"); var div = document.querySelector("#div"); var point = -1; //设置角标的获取; for (var i = 0; i < oli.length; i++) { oli[i].index = i; } //委托事件 ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; if (target.tagName === "LI") { var count=target.index; for (var i = 0; i <=count; i++) { oli[i].classList.add("active"); } } };
ul.onmouseout=function(){ for(var i=0;i<oli.length;i++){ if(i<=point){ oli[i].classList.add('active'); }else{ oli[i].classList.remove('active') } } }
ul.onclick=function(e){ var ev=event||e; var target=ev.target||ev.srcElement; if(target.tagName==='LI'){ var count=target.index; if(count<=point)return; point =target.index; } } </script> -->
<!-- <script> var oli = document.querySelectorAll("#ul li"); var div = document.querySelector("#div"); var point = -1; for (var i = 0; i < oli.length; i++) { oli[i].index = i; } ul.onmouseover = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; if (target.tagName === "LI") { var count = target.index; for (var i = 0; i <= count; i++) { oli[i].classList.add("active"); } } }; ul.onmouseout = function () { for (var i = 0; i < oli.length; i++) { if (i <= point) { oli[i].classList.add("active"); } else { oli[i].classList.remove("active"); } } }; ul.onclick = function (e) { var ev = event || e; var target = ev.target || ev.srcElement; //核心思想通过角标找到对应的小盒子,还用到了标签名的结果返回值大写字母 if (target.tagName === "LI") { var count = target.index; if (count <= point) { return; } point = target.index; } }; </script> --> </html>
标签：五星,document,target,ul,步骤,li,好评,var,ev 来源： https://www.cnblogs.com/czb1218/p/14641067.html