用JS如何做一个简易的消息提示框？

发布时间：2022-11-12 11:17:35 所属栏目：语言来源：

导读：　　今天给大家分享的是用JS实现一个简易的消息提示框的内容，小编觉得比较实用，对新手学习JavaScript有一定的参考价值，实现效果及代码如下，感兴趣的朋友就继续往下看吧。
　　
　　效果图
　　
　　
　　

　　今天给大家分享的是用JS实现一个简易的消息提示框的内容，小编觉得比较实用，对新手学习JavaScript有一定的参考价值，实现效果及代码如下，感兴趣的朋友就继续往下看吧。
　　
　　效果图
　　
　　
　　
　　上代码
　　
　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-8">
　　 <meta name="viewport" content="width=device-width, initial-scale=1.0">
　　 <title>Document</title>
　　</head>
　　<style>
　　 .popupStyle {
　　 display: none;
　　 width: 160px;
　　 background-color: rgb(85, 85, 85);
　　 color: #fff;
　　 text-align: center;
　　 border-radius: 6px;
　　 padding: 8px 0;
　　 position: fixed;
　　 z-index: 1;
　　 top: 2%;
　　 left: 50%;
　　 margin-left: -80px;
　　 }
　　
　　 .popupStyle::after {
　　 content: "";
　　 position: absolute;
　　 top: 100%;
　　 left: 50%;
　　 margin-left: -5px;
　　 border-width: 5px;
　　 border-style: solid;
　　 border-color: #555 transparent transparent transparent;
　　 }
　　
　　 <script>
　　 const msg = "我是样式弹窗";
　　 const domMsg = "我是DOM弹窗";
　　
　　 // 样式弹窗
　　 function handleMsg(message) {
　　   const popup = document.getElementById("popupMsg");
　　   popup.innerHTML = message || "Hello, World";
　　   popup.style.display="block";
　　   setTimeout(() => {
　　    popup.style.display="none"
　　   }, 1000);
　　 }
　　
　　 // DOM 弹窗
　　 function handleDomMsg(message) {
　　   const div = document.createElement("div");
　　   document.body.appendChild(div);
　　   div.innerHTML = message || "this is a Message";
　　   div.className = "popupStyle";
　　   div.style.display = "block";
　　
　　   setTimeout(() => {
　　    div.remove();
　　   }, 1000);
　　 }
　　 </script>
　　</body>
　　</html>

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

用JS如何做一个简易的 消息提示框？

用JS如何做一个简易的消息提示框？