js随机点名器（简单）-蒲公英云

js随机点名器（简单）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        ul {
            list-style: none;
        }
        .content {
            /* width: 400px; */
            margin-left: 200px;
        }
        .content ul > li {
            padding: 23px 0;
            border-bottom: 1px solid gray;
        }
        .content ul li:last-child {
            border: 0;
        }
        .content li a {
            text-decoration: none;
            margin-left: 35px;
            color: #666;
            font-weight: bold;
        }
        .content li a:hover {
            color: red;
        }
    .box {
        width: 600px;
        height: 200px;
        margin: 20px auto;
        position: relative;
        border: 1px solid gray;
    }
    .pic {
        float: left;
        width: 200px;
        height: 200px;
    }
    .pic img {
        width: 200px;
        height: 200px;
    }
    .tit {
        position: absolute;
    top: -12px;
    right: 14px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: green;
    }
    .tit_after {
        border-top: 10px solid transparent;
    border-bottom: -1px solid transparent;
    border-left: 10px solid green;
    position: absolute;
    top: -11px;
    right: 4px;
    z-index: 0;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/01.jpg" alt="" id="img">
        </div>
        <div class="content">
                <ul>
                        <li class="li"><a href="###">健身后吃什么补充优质蛋白质？这4</a></li>
                        <li class="li"><a href="###">什么是蛋白粉？蛋白粉哪个牌子好？</a></li>
                        <li class="li"><a href="###">南方春节食物的寓意</a></li>
                    </ul>
        </div>
        <div class="tit">
            <span>食品安全</span>
        </div>
        <div class="tit_after"></div>
    </div>
    <script>
        var lis = document.getElementsByClassName("li");
        var img = document.getElementById("img");
        for(var i=0;i<lis.length;i++) {
            lis[i].index = i;
            lis[i].onmouseover = function() {
                img.src = "images/0"+(this.index+1)+".jpg";
            }
        }
        </script>
</body>
</html>