怎么新建MySQL数据库
发布时间：2021-10-25
作者：admin
阅读：1919
阅读：1919
今天给大家分享的是用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;
}
</style>
<body style="text-align:center">
<h2 style="margin-top: 100px;">弹窗</h2>
<div style="text-align: center;">
<a href="#" onclick="handleMsg(msg)">点我有弹窗!</a>
<a href="#" onclick="handleDomMsg(domMsg)">点我有弹窗!</a>
</div>
<span class="popupStyle" id="popupMsg">提示信息!</span>
<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>
以上就是关于用JS实现简易的消息提示框的代码，需要的朋友可以参考，希望对大家学习JS有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理