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...
  • 相关阅读:
    c++最大公约数
    c++判断一个整数里面是否包含 3 这个数字
    动态使用webservice,以及含有ref类型的参数的问题
    带有用户名密码验证的远程文件下载
    注册表
    fsdfasfsa
    C# addin 开发心得记录
    c# 读写注册表
    like的性能问题
    查找表中多余的重复记录(多个字段)
  • 原文地址:https://www.cnblogs.com/channy14/p/14871618.html
Copyright © 2011-2022 走看看