zoukankan      html  css  js  c++  java
  • 小案例之刮奖

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#dv{
    				 400px;
    				height: 50px;
    				margin: 20px auto;
    			}
    			#box{
    				 400px;
    				height: 300px;
    				margin: 20px auto;
    				background: url(img/img1.jpg);
    				background-size:400px 300px ;
    				position: relative;
    			}
    			#box img{
    				 400px;
    				height: 300px;
    			}
    			.cls{
    				 10px;
    				height: 10px;
    			    float: left;
    				background-color: #ccc;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="dv">
    			<input type="button" value="重置" id="btn1"/>
    			<input type="button" value="刮奖" id="btn2"/>
    			<input type="button" value="偷窥" id="btn3"/>
    		</div>
    		<div id="box">
    			
    		</div>
    	</body>
    	<script>
    		function Play(){
    			this.btn1=document.getElementById("#btn1");
    			this.btn2=document.getElementById("#btn2");
    			this.btn3=document.getElementById("#btn3");
    			this.img=document.querySelector("#box img");
    			this.box=document.querySelector("#box");
    			this.init();
    		}
    		Play.prototype.init=function(){
    			var that=this;
    			btn1.onclick=function(){
    				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
    				that.res();
    				
    			}
    			btn2.onclick=function(){
    				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
    				that.display();
    				
    			}
    			btn3.onclick=function(){
    				that.box.innerHTML="";//点击按钮的时候要清空box里面的数据,否则点击多次会出现多个阴影区域
    				that.look();
    				
    			}
    		}
    		//重置
    		Play.prototype.res=function(){
    			for(var i=0;i<this.div1.length;i++){
    			this.div1[i].remove();	
    			}
    			
    		}
    		//刮奖
    		Play.prototype.display=function(){
    			this.cover();
    			this.move();
    			
    		}
    		Play.prototype.cover=function(){
    			for(var i=0;i<40;i++){
    				 this.div=document.createElement("div");
    				this.div.className="cls";
    				this.box.appendChild(this.div);
    				this.div.style.opacity="1";
    				
    				for(var j=0;j<30;j++){
    				this.div=document.createElement("div");
    				this.div.className="cls";
    				this.box.appendChild(this.div);
    				this.div.style.opacity="1";	
    				}
    			}
    			this.div1=document.querySelectorAll(".cls");
    		}
    		Play.prototype.move=function(){
    			
    			var that=this;
    			for(var i=0;i<this.div1.length;i++){
    				this.div1[i].index=i;
    				this.div1[i].onmousemove=function(){
    				that.div1[this.index].style.opacity="0";
    				}
    			}
    			
    		}
    		//偷窥
    		Play.prototype.look=function(eve){
    			this.cover();
    			this.lookat();
    			
    		}
    		Play.prototype.lookat=function(){
    //			this.div1=document.querySelectorAll(".cls");
    			var that=this;
    			for(var i=0;i<this.div1.length;i++){
    				this.div1[i].index=i;
    				this.div1[i].onmouseover=function(){
    					that.div1[this.index].style.opacity="0";
    				}
    				this.div1[i].onmouseout=function(){
    					that.div1[this.index].style.opacity="1";
    				}
    			}
    			
    			
    			
    		}
    		new Play();
    	</script>
    </html>
    

      效果图

     

      

  • 相关阅读:
    常用知识点集合
    LeetCode 66 Plus One
    LeetCode 88 Merge Sorted Array
    LeetCode 27 Remove Element
    LeetCode 26 Remove Duplicates from Sorted Array
    LeetCode 448 Find All Numbers Disappeared in an Array
    LeetCode 219 Contains Duplicate II
    LeetCode 118 Pascal's Triangle
    LeetCode 119 Pascal's Triangle II
    LeetCode 1 Two Sum
  • 原文地址:https://www.cnblogs.com/xiaomala/p/11516920.html
Copyright © 2011-2022 走看看