纯手写 模态框、消息弹框、呼吸灯
在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现
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>