运用js实现百分比数据加载提示代码,Asp.NET代码库,德仔网

代码语言

代码分类

【Asp.NET】运用js实现百分比数据加载提示

作者:kongwei521 / 发布于2016/1/11/ 913

CSS代码：

	<style type="text/css">
		.loading
		{
			height: 50px;
			padding-top: 17px;
		}

		.text input
		{
			float: left;
			color: #fff;
			height: 32px;
			line-height: 34px;
			padding: 0 15px;
			background: #A70000;
			border: 0;
		}

		.jindu
		{
			float: left;
			margin-left: 14px;
			color: #fff;
			width: 150px;
			height: 32px;
			line-height: 32px;
			background: #000;
			position: relative;
		}

			.jindu b
			{
				color: #A70000;
				font-size: 0px;
				border-width: 10px;
				border-color: transparent transparent transparent #A70000;
				border-style: dotted dotted dotted solid;
				position: absolute;
				left: -16px;
				top: 5px;
			}

			.jindu .jindu2
			{
				width: 0px;
				height: 32px;
				line-height: 32px;
				background: #A70000;
				position: absolute;
			}

			.jindu .text
			{
				width: 150px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				position: absolute;
				font-size: 12px;
			}

		#bg
		{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.7;
			opacity: .70;
			filter: alpha(opacity=70);
		}

		#center
		{
			width: 328px;
			border: 1px solid #8CBEDA;
			position: absolute;
			top: 40%;
			left: 40%;
			display: none;
			height: 66px;
			background-color: white;
			font-size: 14px;
			font-weight: bold;
			z-index: 1002;
		}
	</style>


HTML代码：

遵循 W3C <!DOCTYPE html>
<div id="bg"></div>
		<div id="center">
			<div class="loading">
				<div class="text">
					<input type="button" value="正在初始化" />
				</div>
				<div class="jindu">
					<b></b>
					<div class="jindu2"></div>
					<div class="text">页面总进度 <font>0</font>%</div>
				</div>
			</div>
		</div>


JS代码：
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
			$(document).ready(function () {
				$("#bg").css("display", "block");
				$("#center").css("display", "block");
			});
			//数据总数
			var count = 5;
			function loading(title, percent) {
				var size = percent * 1.5;
				if (percent == 100) {
					$('.loading .jindu2').animate({ width: size + 'px' }, 500, function () {
						$('.loading input').val(title);
						$('.loading font').text(percent);
						$('.loading').animate({ top: '-32px' }, 1000, function () {
							alert('友情提示：页面加载完毕');
							$("#bg").css("display", "none");
							$("#center").css("display", "none");
						});
					});
				} else {
					$('.loading .jindu2').animate({ width: size + 'px' }, 500, function () {
						$('.loading input').val(title);
						$('.loading font').text(percent);
					});
				}
			};
			for (var i = 1; i < count + 1; i++) {
				loading('正在加载数据' + (100 / count) * i, i * (100 / count));
			}
		</script>

试试其它关键字

　加载提示　　百分比　

同语言下

可能有用的

kongwei521贡献的其它代码(1)

.运用js实现百分比数据加载提示