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...
  • 相关阅读:
    js 变量的声明能提升 初始化不会提升
    老公教我写分页
    响应式布局
    闭包优缺点
    正则表达式验证邮箱格式
    DDL表和库管理语言
    DML数据库操作语言
    python实现求第K小
    硬币凑数
    MySQL学习的表单定义
  • 原文地址:https://www.cnblogs.com/channy14/p/14871618.html
Copyright © 2011-2022 走看看