纯手写模态框、消息弹框、呼吸灯
- 游戏开发
- 2025-08-13 01:57:01
在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现
1、模态框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Water Ripple Effect</title> <style> .modal-container { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .modal-btn { background-color: #4caf50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <button id="open-modal-btn" onclick="openModal()">打开模态框</button> <div id="modal-container" class="modal-container"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <h2>模态框标题</h2> <p>模态框的内容在这里。</p> <button class="modal-btn" onclick="closeModal()">关闭</button> </div> </div> <script> function openModal() { document.getElementById("modal-container").style.display = "block"; } function closeModal() { document.getElementById("modal-container").style.display = "none"; } </script> </body> </html>2、呼吸灯
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Water Ripple Effect</title> <style> body {background-color: #000;} .ripple { margin: auto; margin-top: 5rem; width: 1rem; height: 1rem; border-radius: 50%; position:relative; animation: ripple 3s linear infinite; } .ripple::before, .ripple::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: 50%; animation:inherit; animation-delay:1s; } .ripple::after { animation-delay:2s; } @keyframes ripple { 0% { box-shadow: 0 0 0 .3rem var(--ripple-color); } 100% { box-shadow: 0 0 0 8rem rgba(255,255,255, 0); } } </style> </head> <body> <div class="ripple" style="--ripple-color: rgba(255,0,0, 0.2); background-color: red;"></div> <div class="ripple" style="--ripple-color: rgba(0,255,0, 0.2); background-color: green;"></div> <div class="ripple" style="--ripple-color: rgba(0,0,255, 0.2); background-color: blue;"></div> <div class="ripple" style="--ripple-color: rgba(255,255,0, 0.2); background-color: yellow;"></div> </body> </html>3、消息弹框
<!DOCTYPE html> <html> <head> <title>消息弹框示例</title> <style> .message-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 10px; border: 1px solid blue; border-radius: 5px; } </style> </head> <body> <button onclick="showMessage()">显示消息</button> <script> // 创建一个函数来显示消息弹框 function showMessage() { var equipment_name = '设备XXX'; // 创建一个新的元素来显示消息 var messageElement = document.createElement('div'); messageElement.textContent = equipment_name + '没有生产数据！'; messageElement.classList.add('message-box'); // 将消息元素添加到页面的body中 document.body.appendChild(messageElement); // 设置一个定时器，在一定时间后移除消息元素 setTimeout(function() { document.body.removeChild(messageElement); }, 3000); // 3秒后移除消息元素 } </script> </body> </html>4、跳转页
<html> <head> <meta charset="UTF-8"> <title>跳转页面</title> <style> body { background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .message { font-size: 24px; margin-bottom: 20px; } .countdown { font-size: 48px; font-weight: bold; margin-bottom: 20px; } .redirect { font-size: 18px; } .redirect a { color: #007bff; text-decoration: none; } .btn>a { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .btn>a:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <div class="message">该网站已迁移</div> <div class="countdown" id="countdown">3</div> <div class="redirect">马上跳转到 <a href="http://10.10.101.97:8079">http://10.10.101.97:8079</a></div> </br> <div class="btn"><a href="http://10.10.101.97:8079">点击这里立即跳转</a></div> </div> <script> // 倒计时跳转函数 function countdown() { var countdownElement = document.getElementById('countdown'); var countdownValue = parseInt(countdownElement.innerText); if (countdownValue > 0) { countdownElement.innerText = countdownValue - 1; setTimeout(countdown, 1000); // 每秒更新倒计时 } else { window.location.href = 'http://10.10.101.97:8079'; // 跳转到指定网址 } } // 页面加载时开始倒计时 window.onload = function() { setTimeout(countdown, 1000); }; </script> </body> </html>纯手写模态框、消息弹框、呼吸灯由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“纯手写模态框、消息弹框、呼吸灯”
![[论文笔记]RE2](/0pic/pp_19.jpg)
