进度条制作

首先，先用html5对滚动条进行装饰，再通过setInterval超时调用，使进度条不断地进行变动。当加载到100%时用弹出confirm对话框，让用户确认是否继续，如果继续则用location.replace("url")重新定向url地址（在原来网页上打开新网页，并替换新网页）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条案例</title>
	<style>
		body{
			background:url(1.png) repeat; 
		}
		h2{
			color: blue;
			text-align: center;
			text-shadow: 0 1px 1px rgba(255,255,255,0.6);

		}
		.box2{
			width: 420px;
			height: 240px;
			margin: 0 auto;
			background: url(12.png) center center no-repeat;
			background-size:cover; 
		}
		.box{
			width: 800px;
			height: 20px;
			padding: 1px;
			background-color:rgba(0,0,0,0.5);
			margin: 30px auto;
			border-radius: 10px;
			box-shadow:0 1px 2px rgba(255,255,255,0.3),inset 0 2px 3px rgba(255,255,255,0.4);
			overflow: hidden;
		}
		.bar{
			width: 6%;
			max-width: 100%;
			height: 18px;
			border-radius: 9px;
			margin-top: 1px;
			background-image:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.1)),linear-gradient(to right,red,yellow);
			position: relative;
			
		}
		.bar:after{
			content: "";
			width: 12px;
			height: 12px;
			border-radius: 6px;
			background-color: rgba(6,9,10,0.6);
			position: absolute;
			right: 5px;
			top:50%;
			margin-top: -6px;
			box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),0 1px 1px rgba(255,255,255,0.1);

		}
	</style>
</head>
<body>
	<h2>游戏主页</h2>
	<div class="box2"></div>
	<h2>精彩马上呈现，请耐心等待，游戏加载中.......</h2>
	<div class="box">
		<div class="bar" id="bar"></div>
	</div>
	<script>
		var obAr=document.getElementById("bar");
		var now=0;
		
		var chao=function(){
					
					if (now<=100) {
						now+=1;
						obAr.style.width=now+'%';
					}else{
						var mean=null;
						mean=confirm("欢迎玩家加入斗地主团队，游戏加载完成是否继续，如果点击确定则开始游戏，否则退出游戏！")
						if (mean>0) {
							location.replace("http://hlddz.qq.com/");
						}else{
							window.close();
						}
					};
					
			};		
		setInterval(chao,100);
	</script>
</body>
</html>

成果展示：

猜你喜欢