xiaojincai
/
quepass_game


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>大屏首页</title>
	<style>
		body,
		p,
		a {
			margin: 0;
			padding: 0;
		}

		body {
			/* background: #ab0b0b url(img/pbg.jpg) no-repeat center top; */
			background-size: 100% auto;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		.full {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			/* background-color: rgba(0, 0, 0, 0.6); */
		}

		.p-top {
			width: 80%;
			height: auto;
			display: block;
			margin: 50px auto;
		}

		.text {
			font-size: 20px;
			color: #fff;

			margin: 200px auto 50px;
			width: 50%;
		}

		.btn-box {
			margin: 0 auto;
			width: 50%;
			margin-top: 20px;

			display: flex;
			justify-content: space-around;
		}

		.btn-box a {
			display: block;
		}
		h3{
			/* color: #fff; */
			text-align: center;
		}
		table th,td{
			/* color: #fff; */
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="full">
		<!-- <img src="img/ptop.png"  class="p-top" alt=""> -->
		<div class="btn-box">
			<a href="/rank.html?round_id=1" class="btn1"><button>第一轮</button></a>
			<a href="/rank.html?round_id=2" class="btn2"><button>第二轮</button></a>
			<a href="/rank.html?round_id=3" class="btn2"><button>第三轮</button></a>
		</div>
		<p></p>
		<h3>第<span id="round"></span>轮(当前答题人数：<span id="nowWait"></span>) <button onclick="setStatus(999)">清空答题记录</button></h3>
		<table border="1" cellspacing="0" cellpadding="0" width="70%" align="center" id="rankTbl">
		</table>
	</div>
	<script src="js/jquery.js"></script>
	<script>
		var limitConnect = 3;  // 断线重连次数
		var timeConnect = 0;
		var baseUrl = "gj.100t.com";
		var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting/1000";
		var wsCounter = "ws://" + baseUrl + "/ws/quepass/onlinecounter/1000";
		var startGameUrl="http://"+baseUrl+"/api/quepass/status";
		var ansObj = {0:"A",1:"B",2:"C","-1":"超时未答"}
		var round_id = getQueryString("round_id")
		var onlineAns="http://"+baseUrl+"/api/quepass/onlineans";

		$("#round").text(round_id)

		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]); return null;
		}

		function webSocketInit(service) {
			var ws = new WebSocket(service);
			var timer = null
			ws.onopen = function () {
				console.log("open success");
				localStorage.removeItem("lockReconnect");
				var roundId = getQueryString("round_id")
				ws.send("roundId_"+roundId)
				// //定时发送 
				// timer = window.setInterval(function () {
				// 	ws.send("roundId_"+roundId)
				// }, 1000)
			}
			ws.onmessage = function (e) {
				var res = JSON.parse(e.data);
				var len = res.length;
				$("#nowWait").text(len)
				var tr = "<tr><th>id</th><th>姓名</th><th>答对题目数量</th><th>总分</th><th>总耗时</th><th>排名</th></tr>"
				for(var i=0;i<len;i++){
					rank = i+1
					var td = "<tr><td>"+res[i].uid+"</td>"
					td += "<td>"+res[i].uname+"</td>"
					td += "<td>"+res[i].num+"</td>"
					td += "<td>"+res[i].total+"</td>"
					td += "<td>"+res[i].total_time+"</td>"
					td += "<td>"+rank+"</td>"
					tr += td
				}
				if(len){
				$("#rankTbl").html(tr)

				}
				
			}
			ws.onclose = function () {
				console.log("closed...")
				window.clearInterval(timer)
				reconnect(service)
			}
			ws.onerror = function (err) {
				window.clearInterval(timer)
				reconnect(service);
			};
			return ws
		}

		// 重连
		function reconnect(service) {
			// lockReconnect加锁，防止onclose、onerror两次重连
			if (limitConnect > 0) {
				if (localStorage.getItem('lockReconnect') != true) {
					localStorage.setItem("lockReconnect", 1);
					limitConnect--;
					timeConnect++;
					console.log("第" + timeConnect + "次重连");
					// 进行重连
					setTimeout(function () {
						webSocketInit(service);
						localStorage.removeItem("lockReconnect");
					}, 2000);
				}
			} else {
				console.log("TCP连接已超时");
			}
		}
		// 初始化ws
		//var ws = webSocketInit(wsCounter)
		// 清空答题记录
		function setStatus(num) {
			if(window.confirm("你确认要清除当前轮的答题记录？清除后游戏状态也会重置,需要重新开始游戏!"))
			$.post(startGameUrl, JSON.stringify({ action: num,roundId:round_id }),function(){
				flag=true;
			});
		}
		$.post(onlineAns,JSON.stringify({roundId:round_id}),function(res){
			console.log(res)
			var res = res.data;
				var len = res.length;
				$("#nowWait").text(len)
				var tr = "<tr><th>id</th><th>姓名</th><th>答对题目数量</th><th>总分</th><th>总耗时</th><th>排名</th></tr>"
				for(var i=0;i<len;i++){
					rank = i+1
					var td = "<tr><td>"+res[i].uid+"</td>"
					td += "<td>"+res[i].uname+"</td>"
					td += "<td>"+res[i].num+"</td>"
					td += "<td>"+res[i].total+"</td>"
					td += "<td>"+res[i].total_time+"</td>"
					td += "<td>"+rank+"</td>"
					tr += td
				}
				if(len){
				$("#rankTbl").html(tr)

				}
		})

	</script>
</body>

</html>