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>