zoukankan      html  css  js  c++  java
  • html:图片抽签

    抽签

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <style>
            #div1 {
                width: 100%;
                background: url(1.jpg) center top no-repeat;
                height: 700px;
            }
    
            input {
                display: block;
                width: 80px;
                height: 40px;
                text-align: center;
                margin: 0 auto;
                font-family: "微软雅黑";
            }
        </style>
        <script>
            window.onload = function () {
                var imgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
                function show() {
                    var i = Math.ceil(Math.random() * 9);//有几张图片就乘以几
                    document.getElementById("div1").style.backgroundImage = "url(" + imgs[i - 1] + ")"
                }
                var timeout = setInterval(show, 100);//每隔0.1秒改变一次
    
                var x = 0;
                document.getElementById("ip").onclick = function () {
                    document.getElementById("ip").innerHTML = x;
                    x++;
                    if (x % 2 != 0) {
                        this.style.backgroundColor = "#0ff";
                        clearInterval(timeout);
                    }
                    else {
                        this.style.backgroundColor = "#E1E1E1";
                        timeout = setInterval(show, 100);
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id="div1">
        </div>
        <div class="title">
            <input type="button" value="暂停" id="ip"  />
        </div>
    </body>
    </html>
    
    <style>
    .title{
    position:absolute;
    top:0;}
    </style>
    View Code
    每天努力一点,每天学习一点。 Keep Moving...
  • 相关阅读:
    CF 142B Tprimes
    CF 231A Team
    poj 2001 Shortest Prefixes ——字典树入门
    hdu 1039 Easier Done Than Said?
    poj 2528 Mayor's posters
    hdu 1061 Rightmost Digit
    poj 2503 Babelfish
    CF271 A. Beautiful Year
    poj 2752
    CF271 B. Prime Matrix
  • 原文地址:https://www.cnblogs.com/channy14/p/14871618.html
Copyright © 2011-2022 走看看