> 文档中心 > 臭味相投的灵魂

臭味相投的灵魂

看到一堆人写这东西还收费,我就佛了,特喵我直接弄了一个,代码都差不多 ,各位朋友拿去用!

目录概览

臭味相投的灵魂

来打我呀!

<!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周边激励大奖