抽奖 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                margin: 10px 100px;
            }
            
            img{
                height: 20px;
                width:20px;
                padding:4px;
                background:#e3e3e3;
                vertical-align: middle;
            }
            
            button:last-of-type{
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div><img src="img/1.jpg" alt=""/><span id="showName">乱了夏天蓝了海</span></div>
        <div><button onclick="start()">开始</button><button onclick="stop()">结束</button></div>
    </body>
    <script type="text/javascript">        
        var peoples = ["乱了夏天蓝了海","骑驴找马追骆驼","寒殇凌雪","北城以北","花木扶疏","南柯一梦"];
        var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
        
        var img = document.getElementsByTagName('img')[0];
        var showName = document.getElementById('showName');
        
        img.src = imgs[0];
        showName.innerHTML = peoples[0];
        
        var timer;
        function start(){
            timer = setInterval(begin,100);
        }
        
        function begin(){
            var ranIndex = Math.floor(Math.random() * peoples.length);
//            console.log(ranIndex)
            img.src = imgs[ranIndex];
            showName.innerHTML = peoples[ranIndex];
        }
        
        function stop(){
            clearInterval(timer);
        }        
}
    </script>
</html>

 

posted @ 2018-08-30 17:08  乱了夏天蓝了海  阅读(141)  评论(0)    收藏  举报