臭味相投的灵魂
看到一堆人写这东西还收费,我就佛了,特喵我直接弄了一个,代码都差不多 ,各位朋友拿去用!
目录概览
-
- 来打我呀!
来打我呀!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>来打我呀</title> <style> html, body { margin: 0; padding: 0; background: #f2f1f6; } .container { position: relative; width: 500px; height: 300px; background: #f2f1f6; } .container h1 { margin-top: 0; text-align: center; } .container img { vertical-align: -70px; } .bd { padding-left: 30px; } .ft { position: absolute; width: 100%; bottom: 20px; padding: 0 30px; line-height: 30px; box-sizing: border-box; } .btn-group { float: left; } .fr { float: right; } button { cursor: pointer; } #p1 { } .not-allow { position: relative; } #p2 { display: none; } .red { margin: 0; font-size: 24px; padding: 30px 40px; color: red; letter-spacing: 4px; } .wavy { text-decoration: underline; text-decoration-style: wavy; } .name { padding-left: 10px; } .btn { padding: 6px 12px; } </style></head><body> <div class="container"> <div id="p1"> <h1>来打我呀</h1> <div class="bd"> 傻乎乎的XXX: <img src="https://img1.baidu.com/it/u=3462519819,4249726035&fm=26&fmt=auto" width="120"/> </div> <div class="ft"> <div class="btn-group"> <button class="btn allow">不同意</button> <button class="btn not-allow" id="not-allow">同意</button> </div> <div class="fr"> 找打人: <span class="name">XXX</span> </div> </div> </div> <div id="p2"> <h2 class="red"> 就说你打不到我吧,还不信!</span>服了吗?<br/> !!!!敬礼!!!! </h2> <div class="ft"> <button class="btn fr exit">退出</button> </div> </div> </div> <script> (function(){ function $(selector) { return document.querySelector(selector); } var $p1 = document.getElementById('p1'); var $p2 = document.getElementById('p2'); var $container = $('.container'); var $btn = $('#not-allow'); var isBlockClose = true; var maxX = $container.clientWidth - 1, maxY = $container.clientHeight - 1; var originPos = $btn.getBoundingClientRect(); $('.allow').addEventListener('click', function() { $p1.style.display = 'none'; $p2.style.display = 'block'; }); $btn.addEventListener('mouseover', function() { this.style.left = Math.floor(Math.random() * maxX - originPos.left) + 'px'; this.style.top = Math.floor(Math.random() * maxY - originPos.top) + 'px'; //console.log(this.style.left, this.style.top); }); $('.exit').addEventListener('click', function() { isBlockClose = false; window.close(); }); window.addEventListener('beforeunload', function(e) { if (isBlockClose) { alert("此路不通"); e.returnValue = false; e.preventDefault(); return "此路不通"; } }); })(); </script></body></html>
不用谢!!!
程序员不仅仅只有代码,还有诗和远方!谁说程序员就是闷葫芦了!
更多有趣的灵魂更新中…
创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖