JS Loading功能的简单实现
JS Loading功能的简单实现
发布时间:2016-12-30 来源:查字典编辑
摘要:我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示。其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loadi...

我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示。其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下。

1.当前页面:

复制代码 代码如下:

<div><a href="#">Loading</a></div>

2.遮罩层:

复制代码 代码如下:

<div id="over"></div>

3.Loading展示层:

复制代码 代码如下:

<div id="layout"><img src="http://files.jb51.net/file_images/article/201311/2013112931.gif" alt="" /></div>

整体代码:

复制代码 代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

.current a {

font-size: 20px;

}

.over {

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #f5f5f5;

opacity:0.5;

z-index: 1000;

}

.layout {

display: none;

position: absolute;

top: 40%;

left: 40%;

width: 20%;

height: 20%;

z-index: 1001;

text-align:center;

}

</style>

<script type="text/javascript">

function showLoading()

{

document.getElementById("over").style.display = "block";

document.getElementById("layout").style.display = "block";

}

</script>

</head>

<body>

<div><a href="#">Loading</a></div>

<div id="over"></div>

<div id="layout"><img src="http://files.jb51.net/file_images/article/201311/2013112931.gif" alt="" /></div>

</body>

</html>

最终效果:

JS Loading功能的简单实现1

在网上还看到另外一种实现方式,感觉思路不错,就是利用JS不断的改变html标签的value值,达到加载提示的效果,根据他的思路我自己实现了下,代码如下:

复制代码 代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<>

<style type="text/css">

#tb {

width: 100%;

height: 100%;

line-height: 10px;

}

#tb tr td {

text-align: center;

}

.progressbar {

font-family: Arial;

font-weight: bolder;

color: gray;

background-color: white;

padding: 0px;

border-style: none;

}

.percent {

font-family: Arial;

color: gray;

text-align: center;

border-width: medium;

border-style: none;

}

</style>

<script type="text/javascript">

var bar = 0;

var step = "||";

/*

*第一种方式即 :$(document).ready(function(){.....});

*/

//$(function () {

// progress();

//});

/*

*第二种方式

*/

//window.onload = function () {

// progress();

//}

/*

*第三种方式模拟 $(document).ready(function(){.....});

*/

(function () {

var ie = !!(window.attachEvent && !window.opera);

var wk = /webkit/(d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);

var fn = [];

var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };

var d = document;

d.ready = function (f) {

if (!ie && !wk && d.addEventListener)

return d.addEventListener('DOMContentLoaded', f, false);

if (fn.push(f) > 1) return;

if (ie)

(function () {

try { d.documentElement.doScroll('left'); run(); }

catch (err) { setTimeout(arguments.callee, 0); }

})();

else if (wk)

var t = setInterval(function () {

if (/^(loaded|complete)$/.test(d.readyState))

clearInterval(t), run();

}, 0);

};

})();

document.ready(function () {

progress();

});

function progress() {

bar = bar + 2;

step = step + "||";

document.getElementById("percent").value = bar + "%";

document.getElementById("progressbar").value = step;

if (bar <= 98) {

setTimeout("progress()", 100);

}

}

</script>

</head>

<body>

<table id="tb">

<tr>

<td>

<input type="text" size="50" id="percent" /></td>

</tr>

<tr>

<td>

<input type="text" size="50" id="progressbar" /></td>

</tr>

</table>

</body>

</html>

最终效果:

JS Loading功能的简单实现2

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类