JavaScript 基础
函数进阶
深入数据和类型
运算符
浏览器存储
Document
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
$$demo <button onclick="alertMessage('这是一条信息')">显示信息</button> <button onclick="alertSuccess('这是一条信息')">显示成功信息</button> <button onclick="alertWarning('这是一条信息')">显示警告信息</button> <button onclick="alertError('这是一条信息')">显示错误信息</button> <button onclick="showMsg({msg:'这是一条信息', duration: 10000})"> 显示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 = "message", duration = 5000 } = {}) {
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"), 0)
setTimeout(() => text.classList.remove("animation"), duration - 1000)
setTimeout(() => text.remove(), duration)
}
let alertMessage = (msg) => showMsg({ msg, type: "message" })
let alertSuccess = (msg) => showMsg({ msg, type: "success" })
let alertError = (msg) => showMsg({ msg, type: "error" })
let alertWarning = (msg) => showMsg({ msg, type: "warning" })
</script>
<style> html { min-height: 400px; } .message-container { position: fixed; top: 0; left: 0; right: 0; width: max-content;
margin: auto;
}
.message-container .text {
width: 400px;
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 .animation {
opacity: 1;
margin-top: 20px;
}
.message-container .error {
background-color: #fef0f0;
color: #f56c6c;
}
.message-container .warning {
background-color: #fdf6ec;
color: #e6a23c;
}
.message-container .success {
background-color: #f0f9eb;
color: #67c23a;
}
.message-container .message {
background-color: #f4f4f5;
color: #909399;
}
</style>
$$