zoukankan      html  css  js  c++  java
  • 抽奖

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    margin: 10px 100px;
                }
                
                img{
                    height: 20px;
                    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>
  • 相关阅读:
    HBA登录验证
    html转pdf
    html转pdf
    html转word
    python生成html
    python生成pdf
    Word另存为不同的格式
    WORD转HTML-python第三方包Mammoth(官方文档翻译)
    深入浅谈,CPU设计原理
    CPU,寄存器,缓存,RAM,ROM的作用和他们之间的联系
  • 原文地址:https://www.cnblogs.com/menglong1214/p/9561343.html
Copyright © 2011-2022 走看看