html:图片抽签

抽签

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

 

html:图片抽签

上一篇:Log4j2参数及配置


下一篇:Cannot retrieve repository metadata (repomd.xml) for repository: epel.