抽奖

最新推荐文章于 2024-08-24 17:30:53 发布

apocalypse_tank

最新推荐文章于 2024-08-24 17:30:53 发布

阅读量197

点赞数

文章标签： java抽奖的小程序

本文链接：https://blog.csdn.net/apocalypse_tank/article/details/78223778

版权

<html>
	<head>
	<meta charset="UTF-8">
	<title>抽奖</title>
	<style>
	* { margin: 0; padding: 0; box-sizing: border-box; }
	body { background-color:#EAEAEA; }
	.g1 { background: #A3D1D1;}
	.g2 { background: #BCEE68; }
	.g3 { background: #97CBFF; }
	.g4 { background: pink; }
	.g5 { background: #B9B9FF; }
	.g6 { background: #BDB76B; }
	.g7 { background: #fff2b2; }
	.g8 { background: #B3EE3A; }
	.g9 { background: #d1c0a5; }
	.g10 { background: #7CCD7C; }
	.m { font-weight: bolder; font-size:26px; }
	table {
	margin: 0px auto;
	height: 90vh;
	width: 100%;
	min-width: 1000px;
	}
	td {
	width: 120px;
	text-align: center;
	font-size: 24px;
	font-weight:500;
	text-shadow: 1px 1px 5px #ddd;
	line-height: 40pt;
	border-radius: 5px;
	}
	td:not(.gundefined):hover {
	cursor: crosshair;
	background-color: #00EEEE;
	font-size: 26px;
	font-weight: bold;
	color: red;
	}
	.btngroup {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 60%;
	float:right;
	height: 10vh;
	padding: 4px 0;
	}
	.btngroup button {
	color: white;
	background-color: #5CACEE;
	font-size: 18px;
	margin-left: 3px;
	border: 0px;
	height: 100%;
	width: 7em;
	}
	.btngroup button:hover {
	cursor: pointer;
	outline: 0px;
	}
	.btngroup > h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	width: 30%;
	background-color: #ddd;
	}
	#note {
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	z-index: 2;
	display: none;
	}
	</style>
	</head>

	<body>
	<!-- main table -->
	<table id="main"></table>

	<!-- button group -->
	<div class="btngroup">
	<h3>讲台</h3>
	<div>
	<button id="luckygo"></button>
	<button id="notebtn">记事本</button>
	</div>
	</div>

	<!-- copyright -->
	<div style="position:absolute;width:50%;bottom:20px;z-index:2;font-size:2px;text-align:left;color:#C9C9C9">暴走猪头统一商标 版本号：1.3</div>

	<!-- note layer -->
	<div id="note">
	<div style="height:300px; width:600px; background-color:#FFFFFF; margin:60px auto">
	<div style=" background-color:#0099FF; color:#FFFFFF; font-size:24px; padding:20px">记事本</div>
	<div id="ji" style=" padding-top:10px; padding-left:20px; height:70px;background-color:#CCCCCC; color:#FFFFFF"></div>
	<textarea id="text" style="height:80px; width:100%; font-size:18px;" placeholder="输入内容后，失去焦点即保存......"></textarea>
	<button id="prev" style=" height:50px; width:90%; margin:10px 30px; background-color:#0099FF; color:#FFFFFF; border:0px;">退出</button>
	</div>
	</div>

	<script>

	/* 页面绘制 */
	const all = [
	"aaa/5", "bbb/4", "ccc/1/", "ddd/1","eee/10", "","fff/7/", "jjj/7",
	"hh/5", "", "adf/2/", "asd/1","hhe2", "nfds/2", "bvf/7", "dff/7",
	"dhg/6", "gfd/3", "dhgf/1", "dgf/1","nbvb/10/", " fgd/10","fgd/6", "hghj/5/",
	"shsf/5", "dghf/3", "nbg/3", "jfgd/3","fgs/3", "dgf/10","mds/6", "sfd/6/",
	"dgh/4", "sdf/4", "mfd/3/", "gffgd/2","dfgh/9", "sgfd/9","tsr/8", "dfg/8",
	"dgh/4/", "gfgh/4", "dgf/9", "","dhgf/9", "dgf/9/","dgf/8", "dfhf/8/",
	"trgfh/10", "", "dgfh/5", "","gfdg/6", "","ghdg/7", "dghdf/8",
	].reverse(), cols = 8;

	let result = [];
	for(const [i, s] of all.entries()) {
	let sarr = s.split("/"), name = sarr[0];
	let styleClass = "g" + sarr[1] + (sarr.length > 2 ? " m" : "");

	if(i % cols == 0) result.push("<tr>");
	result.push(` <td class='${styleClass}'>${name}</td>`);
	if(i % cols == cols-1 && i != all.length) result.push("</tr>");
	}
	main.innerHTML = result.join("\n");

	console.log(main.innerHTML);



	/* 随机抽取 */
	const beginLabel = "抽奖", stopLabel = "停止", interval = 30;
	let timer, current, nodes = Array.from(document.querySelectorAll("td:not(.gundefined)"));

	luckygo.innerText = beginLabel;

	luckygo.addEventListener("click", function (e) {
	if(nodes.length < 2) {
	window.location.reload();
	} else if (this.innerText == beginLabel) {
	this.innerText = stopLabel;
	timer = setInterval(() => {
	nodes.map(n => n.style.outline = "1px solid white");
	current = nodes[Math.floor(Math.random()*nodes.length)];
	current.style.outline = "1px green solid";
	}, interval);
	} else {
	this.innerText = beginLabel;
	clearInterval(timer);
	nodes = nodes.filter(n => n != current);
	current.style.cssText = "outline: none; background: red; color: white;";
	}
	});

	/* 笔记本 */
	notebtn.onclick = function() {
	note.style.display = "block";
	ji.innerText = localStorage.msg;
	}
	text.onblur = function() {
	if(text.value != "") {
	localStorage.msg = text.value;
	ji.innerText = localStorage.msg;
	}
	};
	prev.onclick = function() {
	note.style.display = "none";
	text.value = "";
	text.style.placeholder = "输入内容后，失去焦点即保存......";
	}

	</script>


	</body>

	</html>