纯手写模态框、消息弹框、呼吸灯

在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现

1、模态框

javascript 复制代码

<!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()">&times;</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、呼吸灯

javascript 复制代码

<!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、消息弹框

javascript 复制代码

<!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、跳转页

javascript 复制代码

<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>

纯手写 模态框、消息弹框、呼吸灯

纯手写模态框、消息弹框、呼吸灯