c# 中运用js实现百分比数据加载提示

最新推荐文章于 2020-12-22 16:43:47 发布

蝶恋花雨

最新推荐文章于 2020-12-22 16:43:47 发布

阅读量1.3k

点赞数

分类专栏： Jquery And JavaScript 文章标签： C# js jquery 百分比加载提示

本文链接：https://blog.csdn.net/kongwei521/article/details/12579781

版权

Jquery And JavaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

最近做项目由于数据量过大。因此导致页面很长一段时间空白。为了给用户更好的视觉体验，给它一个加载提示。

搜索参考了一下其他的然后把它给修改了。不好意思。参照地址忘了。

效果图：

上面为效果图。

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>

蝶恋花雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c# 中运用js实现百分比数据加载提示

最近做项目由于数据量过大。因此导致页面很长一段时间空白。为了给用户更好的视觉体验，给它一个加载提示。搜索参考了一下其他的然后把它给修改了。不好意思。参照地址忘了。效果图：上面为效果图。CSS代码： .loading { height: 50px; padding-top: 17px; } .text input {
复制链接

扫一扫