html中有一些弹出窗，如alert，confirm等。但是有些我们特定的需求不好实现，比如弹出窗弹出后3s后消失，所以要用到自己定义的弹出窗。如下：参考借鉴：https://zhidao.baidu.com/question/589365277.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 点击按钮，传递显示数据 -->
<button id="btn" onclick="func('数据更新成功')">btn</button>
<!-- 显示的时间弹窗的div -->
<div id="date"></div>
</body>
<script>
// 创建一个div
var layer=document.createElement("div");
// 设置div的id值
layer.id="layer";
// 上面按钮点击事件
function func(date){
/* 创建div的样式，宽200px,高80px，下面的是css样式居中，
* css样式居中具体了解链接：https://blog.csdn.net/A_Bear/article/details/80546181
*/
var style={
background:"#f00",
position:"absolute",
zIndex:10,
width:"200px",
height:"80px",
left:"50%",
top:"50%",
marginLeft:"-100px",
marginTop:"-40px"
}
for(var i in style)
layer.style[i]=style[i];
// 当找不到id为layer的控件时
if(document.getElementById("layer")==null){
// 在body中添加layer控件（layer在上面创建的）
document.body.appendChild(layer);
// 设置显示类容
layer.innerHTML=date;
// 将div中文本居中
layer.style.textAlign="center";
layer.style.lineHeight="80px"; // 作用是调节字体行高与div同高，使其保持水平居中
// 设置3s后去掉弹出窗
setTimeout("document.body.removeChild(layer)",3000)
}
}
// 下面是计时控件js
change();
function change(){
var today;
today = new Date();
timeString = today.toLocaleString();
document.getElementById("date").innerHTML = timeString;
setTimeout("change();", 100);
}
</script>
</html>
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
