抽奖

来源：互联网发布：曹进德知乎编辑：程序博客网时间：2024/06/10 15:49
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>抽奖</title>    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />    <style type="text/css">        #lp{            width:600px;            height:600px;            background-image: url(plate_06.png);            margin:0 auto;            z-index: 9;        }        #button{            background-image: url(plate_04.png);            background-position: 0 0px;            z-index: 10;            position:absolute;            top:228px;            left: 594px;;            width:150px;            height: 150px;            cursor: pointer;        }        #gl{            height:592px;            width:592px;            background:url('plate_05.png') left top;            background-repeat: no-repeat;            background-position: 0 0px;            margin:0 auto;            position: absolute;            top: 8px;            left: 380px;            border: solid 1px;        }    </style></head><body>        <div id="lp">        </div>        <div id="button"></div>        <div id='gl'>            <img src="plate_03.png" />        </div>        <script type="text/javascript">            var count = 1 ;            var sz ;            var stop;            var sum = 1;            function countAward(){                 var award  = [                     '5M 永久空间',                     '80M 永久空间',                     '1G 永久空间',                     '200M 永久空间',                     '100M 永久空间',                     '20M 永久空间',                     '继续攒人品',                     '10G 永久空间',                     '50M 永久空间',                     '1T 永久空间',                  ]                return award[count-1];            }            function getRandom(n){                return Math.floor(Math.random()*n+1)            }            function setHeight(){                var height = -592;                var gl = document.getElementById('gl');                gl.style.backgroundPosition = '0'+''+height*count+'px';                count += 1;                sum += 1;                if(count === 11){                    gl.style.backgroundPosition = '0 0';                    count = 1;                }                if(sum === sz){                     clearInterval(stop);                     alert('恭喜您获得'+countAward());                }            }            function moveA(){               sz = getRandom(20);               alert(sz);               stop = setInterval(setHeight,300);            }            function init(){                var btn = document.getElementById( 'button' );                btn.addEventListener('mouseover',function(){                      btn.style.backgroundPosition = '0 150px';                },false);                btn.addEventListener('mouseout',function(){                    btn.style.backgroundPosition = '0 0px';                },false);                btn.addEventListener('click',moveA,false);            }            window.onload = init;        </script></body></html>
0 0