小案例之刮奖
Posted xiaomala
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小案例之刮奖相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #dv{ width: 400px; height: 50px; margin: 20px auto; } #box{ width: 400px; height: 300px; margin: 20px auto; background: url(img/img1.jpg); background-size:400px 300px ; position: relative; } #box img{ width: 400px; height: 300px; } .cls{ width: 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>
效果图
以上是关于小案例之刮奖的主要内容，如果未能解决你的问题，请参考以下文章