抽奖

最新推荐文章于 2022-08-23 17:07:41 发布

Whisper_a

最新推荐文章于 2022-08-23 17:07:41 发布

阅读量501

点赞数

分类专栏：实现的各种效果代码

本文链接：https://blog.csdn.net/Whisper_a/article/details/24148271

版权

实现的各种效果代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

Whisper_a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抽奖

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 抽奖 #lp{ width:600px; height:600px;
复制链接

扫一扫