久久夜色网站在线,国产av女优一期二区,操老师爽视频91

s> 前言對以前做的demo整理

 這是一個用原生的js編寫的簡單的網(wǎng)頁抽獎頁面。

效果圖：

Paste_Image.png

詳細(xì)代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul li{
                list-style: none;
            }
            #lis{
                height: 568px;
                width: 426px;
                border: 10px solid #2386ff;
                margin: 30px auto;
            }
            #lis li{
                height: 140px;
                width: 140px;
                border: 1px solid #eee;
                float: left;
                opacity: 0.5;
            }
            .bnt{
                height: 30px;
                width: 200px;
                color: #ccc;
                margin: 20px auto;
            }
            .bnt input:hover{
                cursor: pointer;
            }
            .bnt input:active{
                background:#B5B5B5;
            }
            .bnt input{
                height: 30px;
                width: 200px;
                border-radius: 20px;
                border: none;
                outline:none;
                
            }
            #lis .active{
                opacity: 1;
            }
            
        </style>
    </head>
    <body>
        <div class="bnt" id="bnt">
            <input type="button" name="" id="val" value="開始抽獎" />

        </div>
        
        <ul id="lis">
            <li style="background: url(img/1.png);" title="藍(lán)牙耳機(jī)"></li>
            <li style="background: url(img/2.png);" title="蘋果平板"></li>
            <li style="background: url(img/3.png);" title="耐克運動鞋"></li>
            <li style="background: url(img/4.png);" title="謝謝參與"></li>
            <li style="background: url(img/5.png);" title="手機(jī)"></li>
            <li style="background: url(img/6.png);" title="阿迪達(dá)斯"></li>
            <li style="background: url(img/7.png);" title="藍(lán)牙耳機(jī)"></li>
            <li style="background: url(img/8.png);" title="洋娃娃"></li>
            <li style="background: url(img/9.png);" title="謝謝參與"></li>
            <li style="background: url(img/10.png);" title="公仔"></li>
            <li style="background: url(img/11.png);" title="mp4"></li>
            <li style="background: url(img/12.png);" title="諾基亞"></li>

        </ul>
        <script type="text/javascript">
        var oul = document.getElementById('lis')
        var ali = oul.getElementsByTagName('li');
        var bnt = document.getElementById('bnt');
        var va = document.getElementById('val')
        var num=0;
        var timer=null;//存放定時器的容器
        var nam=0;
        var arr=['藍(lán)牙耳機(jī)','蘋果平板','耐克運動鞋','謝謝參與','手機(jī)','阿迪達(dá)斯','藍(lán)牙耳機(jī)','洋娃娃','謝謝參與',
        '公仔','mp4','諾基亞',];
        var count=0;//定義抽獎次數(shù)
//設(shè)置定時器 setInterval(干什么事情,時間)每隔100時間做這個事情   
       bnt.onclick=function(){
        clearInterval(timer);
       start();
       }

       function start(){
        timer=setInterval(function(){
            for(var i=0;i<ali.length;i++){
            ali[i].className='';            
            ali[i].test=arr[i];     
            }
            num = Math.floor(Math.random()*12);//獲取0-1之間中的隨機(jī)數(shù) 在乘12 然后去掉小數(shù)
            ali[num].className='active';
            nam+=10;

            if(nam>=900){//抽獎的時間限制，當(dāng)nam自增到900就停止
                clearInterval(timer);//清除定時器
                alert("恭喜你獲得："+ali[num].test);
                if(count>0){
        va.value="再來一次";
       }
            }
                                
        },100)
        nam=0;
        count++;
        }
        </script>       
    </body>
</html>