迟迟迟的击杀效果哈哈哈哈哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <title>chichichi</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .c_body{
            width: 100%;
            height: auto;
        }
        .c_body img {
            width: 35%;
            height: auto;
        }
        .fl_left{
            float: left;
        }
        .fl_right{
            float: right;
        }
        .bifen{
            position: relative;
            top: 50px;
        }
        .jineng{
            width: 100%;
            position: relative;
            top:80px;
        }
        .jineng img{
            float: left;
            width: 35px;
            height: 35px;
            margin-left: 15px;
        }
        .kuang{
            width: 60%;
            height: 150px;
            border:1px solid #DADADA;
            position: relative;
            top: 130px;
            overflow: auto;
        }
        .shuru{
            border:1px solid #DADADA;
            width: 70%;
            height: 20px;
            position: absolute;
            bottom: 30px;
            right: 35px;

        }
        .zhanchang{
            position: absolute;
            bottom: 30px;
            left: 0;
            font-size: 15px;
        }
        .btn{
            width: 35px;
            position: absolute;
            bottom: 30px;
            right: 0;
            background: white;
            border:1px solid #DADADA;
        }
        .xiaoxi{
            float: left;
            position: absolute;
            letter-spacing: 1px;
            font-size: 15px;
            color: #C1C1C1;
        }
        .zhanji{
            width: 80%;
            height: 50px;
            position: fixed;
            top:40%;
            left: 10%;
            background-color: #DADADA;
            z-index: 9999;
            display: none;
        }
        .zhanji p{
            position: absolute;
            right: 0;
            top:0;
        }
        .zhanji span{
            line-height: 50px;

        }
        .zuobian{
            margin-left: 20px;
        }
        .biubiu{
            position: absolute;
            top: 30px;
            left: 35%;
            font-size: 18px;
            color: #C1C1C1;
            display: none;
        }
        .jisha{
            position: absolute;
            z-index: 9998;
            top: 300px;
            right: 20px;
            display: none;
        }
        #huangdi{
            position: absolute;
            z-index: 9998;
            top: 300px;
            right: 10%;
            width: 80%;
            display: none;
        }
    </style>
</head>
<body>

<div class="c_body">
    <img src="http://img1.ph.126.net/WINTD-leWQcNF_gYM8JMyw==/6632182670492603818.png" class="fl_left">
    <p class="biubiu" id="biubiu">-------->biubiubiu~~</p>
    <img src="http://img2.ph.126.net/RS5N8ihq_KfnZlbNC_odAg==/6632179371957720503.png" class="fl_right">
</div>

<img src="http://img1.ph.126.net/6r8Gm-y9O5iXhVhMuS_4vQ==/6632118898818189337.png" class="bifen" id="bifen">
<img src="http://img2.ph.126.net/h68oyhe3YRgX3GdTEW519w==/6631852817004272723.png" class="jisha" id="jisha">
<img src="http://img0.ph.126.net/SPSTMVDifTqhDo5ZIN3DoQ==/6632311313350382157.png" id="huangdi">

<div class="zhanji" id="zhanji">
    <span class="zuobian">迟迟迟</span>
    <span class="zuobian">翎羽山庄</span>
    <span class="zuobian" id="jishu">0</span>
    <span>/0/0</span>
    <p id="guanbi">X</p>
</div>
<div class="jineng">
    <img src="http://img1.ph.126.net/xAsq4ikWWOtzgYyC-g90gw==/6632269531908528466.png" onclick="biushan();jisha1();shuzi();huangdidong()">
    <img src="http://img0.ph.126.net/SH8A1jEOQ4ECZSpnzQqV_g==/6632412468420142782.png" onclick="biushan();jisha1();shuzi();huangdidong()">
    <img src="http://img0.ph.126.net/opaf6TuieY9myHG0hsKX5Q==/6632343199187590962.png" onclick="biushan();jisha1();shuzi();huangdidong()">
    <img src="http://img2.ph.126.net/0ZdrOQKA-alJMmmHnST4ug==/6632085913469361362.png" onclick="biushan();jisha1();shuzi();huangdidong()">
</div>
<div class="kuang">
    <p class="xiaoxi" id="xiaoxi"></p>
</div>
<p class="zhanchang">战场</p>
<input type="text" class="shuru" id="shuru">
<input type="button" class="btn" value="发送" id="btn">
</body>
<script>
    var bifen = document.getElementById("bifen");
    var zhanji = document.getElementById("zhanji");
    var guanbi = document.getElementById("guanbi");
    //战绩开关
    bifen.onclick = function () {
        zhanji.style.display = "block";
    };
    guanbi.onclick = function () {
        zhanji.style.display = "none";
    };
    //弹出biubiubiu~~
    var biubiu = document.getElementById("biubiu");
    function biushan() {
        biubiu.style.display = "inline";
        setTimeout("biubiu.style.display = 'none'",500);
    }
    //弹出击杀效果
    var jisha = document.getElementById("jisha");
    function jisha1() {
        jisha.style.display = "block";
        var speed = 1;
        var qishi = 300;
        var dingshi = setInterval(function () {
            if (qishi< 150){
                clearTimeout(dingshi);
                jisha.style.opacity = 100;
                jisha.style.top = "300px";
                jisha.style.display = "none";

            }else {
                qishi = qishi-speed;
                jisha.style.top = qishi + "px";
                jisha.style.opacity = 0;
                jisha.style.transition = "opacity 2s";
            }
        },10)
    }
    //人头计数
    var jishu = document.getElementById("jishu");
    var x = 0;
    function shuzi() {
        x++;
        jishu.innerHTML = x;
    }
    //炎黄附体
    var huangdi = document.getElementById("huangdi");
    var rentou;
    var yushu;
    var xiaoxi = document.getElementById("xiaoxi");
    function huangdidong() {
        rentou = jishu.innerText;
        yushu = rentou%10;
        if (yushu == 0){
            huangdi.style.display = "block";
            var n =1;
            var huangdidong1 = setInterval(function doudong() {
                if (n<20){
                    n++;
                    setTimeout("huangdi.style.top = '305px'",100);
                    setTimeout("huangdi.style.top = '300px'",50);
                }else {
                    clearInterval(huangdidong1);
                    huangdi.style.display = "none";
                }
            },100);
            var xiaoxi1 = xiaoxi.innerHTML ;
            xiaoxi.innerHTML = xiaoxi1 + "迟迟迟 真是皇帝附体!连续击杀了10个对手竟一次未败! <br />"
        }else {

        }
    }
    //发送按钮 辣鸡迟!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    var btn = document.getElementById("btn");
    var shuru = document.getElementById("shuru");
    btn.onclick = function () {
        xiaoxi.innerHTML += shuru.value + "<br />";
        shuru.value = "";
    }
</script>
</html>





如人饮水,冷暖自知.
好歹还有联系,知足了,真的.
2017,5.2
 

 

posted @ 2017-05-02 17:58  花花花花花  阅读(165)  评论(0编辑  收藏  举报