JS/JQuery两种代码实现五星评分案例

功能实现

//实现五星评分效果

	/**
	 * 功能1  鼠标移入某星 该星和之前的星变色
	 * 			  鼠标移出 都不变色
	 * 
	 * 功能2  点击某星  该星和之前的星变色
	 * 				鼠标移出  保持变色
	 * 
	 * 难点   给该星注册两种事件
	 */

实现效果

在这里插入图片描述

代码


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>五角星评分案例title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    #comment {
      font-size: 40px;
      color: #ff16cf;
    }
    
   #comment li {
      float: left;
    }
    .current{
			/* color:blueviolet ; */
		}
    ul {
      list-style: none;
    }
  style>
  
  
 
head>

<body>
<ul id="comment">
  <li>li>
  <li>li>
  <li>li>
  <li>li>
  <li>li>
ul>
 <script type="text/javascript">
  	//实现五星评分效果
		
		/**
		 * 功能1  鼠标移入某星 该星和之前的星变色
		 * 			  鼠标移出 都不变色
		 * 
		 * 功能2  点击某星  该星和之前的星变色
		 * 				鼠标移出  保持变色
		 * 
		 * 难点   给该星注册两种事件
		 */
		//获取五星
		var lis=document.getElementById("comment").getElementsByTagName("li");
		console.log(lis.length);
		
		//注册鼠标移入事件
		for(var i=0;i<lis.length;i++)
		{
			lis[i].className="";
			lis[i].id=i;
	    //鼠标移入
			lis[i].onmouseover=function(){
			   index=this.id;
				// console.log(this.id);
				for(var j=0;j<=index;j++)
				{
					lis[j].innerHTML="★";
				}
			}
			//鼠标移出
			lis[i].onmouseout=function(){
				for(var i=0;i<lis.length;i++)
				{
					lis[i].innerHTML="☆";
				}
			var liCur=document.getElementsByClassName("current");
		
			for(var k=0;k<liCur.length;k++)
			 {
				lis[k].innerHTML="★";
				// console.log("我执行了");
			 }
			
			}
			
			//点击
			lis[i].onclick=function(){
		
				for(var o=0;o<=index;o++)
				{
					lis[o].className="current";
					lis[o].innerHTML="★";
				}
			}
		}
		
		
  script>
body>

html>

你可能感兴趣的:(JS/JQuery两种代码实现五星评分案例)