原生实现消息提示窗

1、html 部分

<div> <div> <div> <input class="inputMessage" value="" type="text" placeholder="请输入提示内容" /> <span>   <button>消息提示 // 等号前：把过滤后的数据重新赋值到 input 中 // 等号后：匹配正整数，且第一位不能 0。如果是其他的值，就替换为空。 inputTime.value = inputTime.value.replace(/^[0]+[0-9]*|[^0-9]*$/, ""); }; // 绑事件的第一种方式 // function btnMR() { //     let inputMessage = document.getElementsByClassName('inputMessage')[0].value.trim(); //     if (inputMessage == '') { //         span[0].innerText = "请输入提示内容"; //         setTimeout(function() { //             span[0].innerText = ""; //         }, 1000); //         return false; //     } else if (inputTime.value.length == 0) { //         span[1].innerText = "请输入消息提示时间"; //         setTimeout(function() { //             span[1].innerText = ""; //         }, 1000); //         return false; //     } //     messagePrompt(inputMessage, inputTime.value); // }; // 绑事件的第二种方式 btn.onclick = function() { let inputMessage = document.getElementsByClassName('inputMessage')[0].value.trim(); if (inputMessage == '') { span[0].innerText = "请输入提示内容"; setTimeout(function() { span[0].innerText = ""; }, 1000); return false; } else if (inputTime.value.length == 0) { span[1].innerText = "请输入消息提示时间"; setTimeout(function() { span[1].innerText = ""; }, 1000); return false; } messagePrompt(inputMessage, inputTime.value); }; // 处理消息提示 function messagePrompt(text, time) { let body = document.getElementsByTagName('body')[0]; // 创建标签 let div = document.createElement('div'); // 创建值 let textVal = document.createTextNode(text); // 把值放到标签中 div.appendChild(textVal); // 给标签绑定类 div.className = "message_prompt_box"; // 给标签设置样式 div.style.textAlign = "center"; div.style.display = "block"; // 渲染数据 body.appendChild(div); // 注意：这里需要在页面渲染后操作 if (document.getElementsByClassName('message_prompt_box')[0].offsetHeight > 60) { div.style.textAlign = "left"; } setTimeout(function() { div.style.display = "none"; }, time); }; 

3、css 部分

.message_prompt_box { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(10, 10, 10, .4); width: 180px; padding: 10px; box-sizing: border-box; border-radius: 6px; color: #333333; font-family: MS UI Gothic 10px; display: none; } span { color: red; font-size: 12px; }