首页 > Web开发 > 详细

html:图片抽签

时间:2021-06-10 18:48:14      阅读:16      评论:0      收藏:0      [点我收藏+]

抽签

技术分享图片
<!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:图片抽签

原文:https://www.cnblogs.com/channy14/p/14871618.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!