简易的Loading效果
只需要引入js，然后动态生成 一个div就可以了。 div中放个gif
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./Loading.js"></script>
<title>Document</title>
</head>
<button onclick="btn()">点击按钮出现 loading </button>
<body>
</body>
<script>
function btn() {
//出现loading
Loading()
//模拟服务器处理数据返回数据的时间 假设3s 3s后loading消失
setTimeout(function() {
End()
}, 3000)
}
// 1.Loading() 为出现loading End()为loading消失
</script>
</html>
js:
//生成
function Loading() {
var newDiv = document.createElement('div');
//newDiv.innerHTML = '正在加载中';
//生成img 注意img的图片路径
newDiv.innerHTML = "<img src='./Loading.gif' width='200px' />";
//网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）
var w1 = document.documentElement.clientWidth || document.body.clientWidth;
var h1 = document.documentElement.clientHeight || document.body.clientHeight;
//网页正文全文宽高
var w2 = document.documentElement.scrollWidth || document.body.scrollWidth;
var h2 = document.documentElement.scrollHeight || document.body.scrollHeight;
//网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）background-color:#CCC;
var w3 = document.documentElement.offsetWidth || document.body.offsetWidth;
var h3 = document.documentElement.offsetHeight || document.body.offsetHeight;
newDiv.setAttribute("style", "width:" + w2 + "px;height:" + h2 + "px;line-height:" + h2 + "px;text-align:center;position:fixed;z-index:100001;-moz-opacity: 0.5;opacity:.50;filter: alpha(opacity=30);top:0;background-color:#CCC");
newDiv.id = "new";
document.body.appendChild(newDiv);
}
//消失
function End() {
var newDiv = document.getElementById('new');
newDiv.remove()
}
5375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
