zoukankan      html  css  js  c++  java
  • 五星评分

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}	
    #ul{list-style:none;height:27px;float:left;}
    #ul li{27px;height:27px;background:url('images/star.gif') no-repeat;float:left;}
    #div{100px;height:27px;line-height:27px;float:left;color:green;margin-left: 10px;}
    </style>
    </head>
    <body>
    	<ul id="ul">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    	<div id="div"></div>	
    	<script>
    		// 给个li 对象
    		var lis = document.getElementsByTagName('li');
    		var ulObj=document.getElementById('ul');
    		var divObj=document.getElementById('div');
    		var bj = false;   // 表示没有评分
    
    		for(var i=0;i<lis.length;i++){
    
    			// 给每个 li 自定义一个 索引
    			lis[i].index = i;
    
    			// 给每个 li 绑定移入事件
    			lis[i].onmouseover = function(){
    				if(!bj){
    					for(var i=0;i<lis.length;i++){
    						if(i<=this.index){
    							// 改变星星 背景图片的位置 让星星变亮
    							lis[i].style.backgroundPosition = '0 -29px';
    						}
    					}					
    				}
    			}
    
    			// 给每个 li 绑定点击事件
    			// 用户点击 就表示 确定评分了
    			lis[i].onclick = function(){
    				if(!bj){
    					bj = true;
    					// 把评分结果 写到 容器中
    					divObj.innerHTML = this.index+1+' 星';
    				}
    			}
    		}
    		// 鼠标移出 让星星 变灰色
    		ulObj.onmouseout = function(){
    			if(!bj){
    				for(var i=0;i<lis.length;i++){
    					lis[i].style.backgroundPosition = '0 0';
    				}				
    			}
    		}
    
    
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    人生苦短之我用Python篇(遍历、函数、类)
    Python基础篇
    OSPF 配置
    RIPng 知识要点
    RIP 知识要点
    Cisco DHCP 配置要点
    python读取mat文件
    theano提示:g++ not detected的解决办法
    Can Microsoft’s exFAT file system bridge the gap between OSes?
    matlab 大块注释和取消注释的快捷键
  • 原文地址:https://www.cnblogs.com/-qiang/p/5794416.html
Copyright © 2011-2022 走看看