java 实现loading效果-凯发k8官方网

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

1.当前页面：

loading

2.遮罩层：

3.loading展示层：

整体代码:

view code

最终效果：

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

复制代码

1

2

3

4

5

6

7 #tb {

8 width: 100%;

9 height: 100%;

10 line-height: 10px;

11 }

12

13 #tb tr td {

14 text-align: center;

15 }

16

17 .progressbar {

18 font-family: arial;

19 font-weight: bolder;

20 color: gray;

21 background-color: white;

22 padding: 0px;

23 border-style: none;

24 }

25

26 .percent {

27 font-family: arial;

28 color: gray;

29 text-align: center;

30 border-width: medium;

31 border-style: none;

32 }

33

34

35 var bar = 0;

36 var step = "||";

37 /*

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

39 */

40 //$(function () {

41 // progress();

42 //});

43

44 /*

45 *第二种方式

46 */

47 //window.onload = function () {

48 // progress();

49 //}

50

51 /*

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

53 */

54 (function () {

55 var ie = !!(window.attachevent && !window.opera);

56 var wk = /webkit\/(\d )/i.test(navigator.useragent) && (regexp.$1 < 525);

57 var fn = [];

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

59 var d = document;

60 d.ready = function (f) {

61 if (!ie && !wk && d.addeventlistener)

62 return d.addeventlistener('domcontentloaded', f, false);

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

64 if (ie)

65 (function () {

66 try { d.documentelement.doscroll('left'); run(); }

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

68 })();

69 else if (wk)

70 var t = setinterval(function () {

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

72 clearinterval(t), run();

73 }, 0);

74 };

75 })();

76

77 document.ready(function () {

78

79 progress();

80

81 });

82

83

84 function progress() {

85 bar = bar 2;

86 step = step "||";

87 document.getelementbyid("percent").value = bar "%";

88 document.getelementbyid("progressbar").value = step;

89 if (bar <= 98) {

90 settimeout("progress()", 100);

91 }

92 }

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

总结

以上是凯发k8官方网为你收集整理的java 实现loading效果_简单实现js loading功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。