迟迟迟的击杀效果哈哈哈哈哈
<!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