JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
$$demo <button id="info">显示普通信息</button> <button id="success">显示成功信息</button> <button id="warning">显示警告信息</button> <button id="error">显示错误信息</button> <button id="ten">显示10秒的信息</button>
<script> if (!document.querySelector(".message-container")) { // 消息的容器
const container = document.createElement("div")
container.classList.add("message-container")
document.body.append(container)
}
function showMsg({ msg = "", type = "info", duration = 5000 } = {}) {
// type:
// - info
// - success
// - warning
// - error
const container = document.querySelector(".message-container")
const text = document.createElement("div")
text.innerText = msg
text.classList.add("text")
text.classList.add(type)
container.append(text)
// 显示动画
setTimeout(() => text.classList.add("animation"))
// 隐去动画
setTimeout(() => text.classList.remove("animation"), duration - 1000)
// 删除元素
setTimeout(() => text.remove(), duration)
}
// 二次封装函数
const alertInfo = (msg) => showMsg({ msg, type: "info" })
const alertSuccess = (msg) => showMsg({ msg, type: "success" })
const alertWarning = (msg) => showMsg({ msg, type: "warning" })
const alertError = (msg) => showMsg({ msg, type: "error" })
info.onclick = function () {
alertInfo("我是一条普通信息")
}
success.onclick = function () {
// showMsg({ msg: "我是一条成功信息", type: "success" })
alertSuccess("我是一条成功信息")
}
warning.onclick = function () {
alertWarning("我是一条警告信息")
}
error.onclick = function () {
alertError("我是一条错误信息")
}
ten.onclick = function () {
showMsg({
msg: "显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息",
duration: 10000,
})
}
</script>
<style> html {min-height: 500px; } .message-container { position: fixed;
/* 固定定位水平居中 */
top: 0;
left: 0;
right: 0;
margin: auto;
width: max-content;
/* 忽略鼠标事件 */
pointer-events: none;
}
.message-container .text {
width: max-content;
min-width: 300px;
padding: 20px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0 auto;
transition: all 1s;
opacity: 0;
/* 消息的高度 */
margin-top: -60px;
}
.message-container .text.animation {
opacity: 1;
/* 消息的间距 */
margin-top: 20px;
}
.message-container .text.info {
background-color: #f4f4f5;
color: #909399;
}
.message-container .text.error {
background-color: #fef0f0;
color: #f56c6c;
}
.message-container .text.warning {
background-color: #fdf6ec;
color: #e6a23c;
}
.message-container .text.success {
background-color: #f0f9eb;
color: #67c23a;
}
</style>
$$
$$answer
<button id="info">显示普通信息</button>
<button id="success">显示成功信息</button>
<button id="warning">显示警告信息</button>
<button id="error">显示错误信息</button>
<button id="ten">显示10秒的信息</button>
<script>
if (!document.querySelector(".message-container")) {
// 消息的容器
const container = document.createElement("div")
container.classList.add("message-container")
document.body.append(container)
}
function showMsg({ msg = "", type = "info", duration = 5000 } = {}) {
// type:
// - info
// - success
// - warning
// - error
const container = document.querySelector(".message-container")
const text = document.createElement("div")
text.innerText = msg
text.classList.add("text")
text.classList.add(type)
container.append(text)
// 显示动画
setTimeout(() => text.classList.add("animation"))
// 隐去动画
setTimeout(() => text.classList.remove("animation"), duration - 1000)
// 删除元素
setTimeout(() => text.remove(), duration)
}
// 二次封装函数
const alertInfo = (msg) => showMsg({ msg, type: "info" })
const alertSuccess = (msg) => showMsg({ msg, type: "success" })
const alertWarning = (msg) => showMsg({ msg, type: "warning" })
const alertError = (msg) => showMsg({ msg, type: "error" })
info.onclick = function () {
alertInfo("我是一条普通信息")
}
success.onclick = function () {
// showMsg({ msg: "我是一条成功信息", type: "success" })
alertSuccess("我是一条成功信息")
}
warning.onclick = function () {
alertWarning("我是一条警告信息")
}
error.onclick = function () {
alertError("我是一条错误信息")
}
ten.onclick = function () {
showMsg({
msg: "显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息",
duration: 10000,
})
}
</script>
<style>
.message-container {
position: fixed;
/* 固定定位水平居中 */
top: 0;
left: 0;
right: 0;
margin: auto;
width: max-content;
/* 忽略鼠标事件 */
pointer-events: none;
}
.message-container .text {
width: max-content;
min-width: 300px;
padding: 20px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0 auto;
transition: all 1s;
opacity: 0;
/* 消息的高度 */
margin-top: -60px;
}
.message-container .text.animation {
opacity: 1;
/* 消息的间距 */
margin-top: 20px;
}
.message-container .text.info {
background-color: #f4f4f5;
color: #909399;
}
.message-container .text.error {
background-color: #fef0f0;
color: #f56c6c;
}
.message-container .text.warning {
background-color: #fdf6ec;
color: #e6a23c;
}
.message-container .text.success {
background-color: #f0f9eb;
color: #67c23a;
}
</style>
$$