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>
  • 相关阅读:
    Android 存储 SD卡
    Android 存储 内部存储
    Android 存储 SP存储
    go goroutine
    go 接收命令行参数
    go 文件操作 复制和统计字符
    go 文件操作 判断文件是否存在
    換博客了,新地址https://cutepig123.github.io/
    光盘是个好东西
    俺买过的电子产品
  • 原文地址:https://www.cnblogs.com/menglong1214/p/9561343.html
Copyright © 2011-2022 走看看