前端：用HTML ，CSS ,JS 做一个点名器

news2024/11/29 8:43:21

1.HTML：

<body>
		<div id = "content">
			<div id="top">
				<div id = "name">XAiot2302班点名器</div>
			</div>
			<div id = "center">
				<div id = "word">你准备好了吗?</div>
			</div>
			<div id = "bottom">
				<div id="btn_start">开始</div>
				<div id="btn_stop">停止</div>
				<div id = "btn_reset">重置</div>
			</div>
		</div>
	</body>

2.CSS

<script src="jquery-3.6.0.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width:100%;
				height: 100%;
			}
			#content{
				width: 100%;
				height: 100%;
				position: relative;
			}
			#top{
				width:100%;
				height: 100px;
				/* background-color: aqua; */
				position: relative;	
			}
			#name{
				font-size: 50px;
				font-weight: 800;
				color:brown;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				left: 40%;
				top: 100px;
			}
			#center{
				width:100%;
				height: 100px;
				/* background-color: blue; */
				position: relative;	
				top: 100px;	
			}
			#word{
				font-size: 40px;
				color: red;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				left: 50%;
				margin-left: -50px;
			}
			#bottom{
				width:100%;
				height: 400px;
				/* background-color: blue; */
				position: relative;	
				top: 130px;	
			}
			#btn_start{
				font-size: 40px;
				color: white;
				position: absolute;
				top: 20%;
				margin-top: -20px;
				left: 50%;
				background-color: red;
				border-radius: 10px;
			}
			#btn_stop{
				font-size: 40px;
				color: white;
				position: absolute;
				top: 40%;
				margin-top: -20px;
				left: 50%;
				background-color: yellow;
				border-radius: 10px;
			}
			#btn_reset{
				font-size: 40px;
				color: white;
				position: absolute;
				top: 60%;
				margin-top: -20px;
				left: 50%;
				background-color: skyblue;
				border-radius: 10px;
			}
		</style>

3.JS

<script type="text/javascript">
	var nums=["乔凯晨","张晋若","张立","焦鹏祥","郭鑫","景清雷","徐绍平","代卫能","曹科","郭力玮","张彪","刘卓锦"];
	function suiji(){
		var num = Math.random()*nums.length;
		var num = Math.floor(num);
		var i = nums[num];
		$("#word").html(i);
	}
	var id = 0;
	$("#btn_start").click(function()
	{
		id = setInterval(suiji,80);
	});
	$("#btn_stop").click(function()
	{
		clearInterval(id);
	});
	$("#btn_reset").click(function()
	{
		// location.reload();
		$("#btn_start").html("开始");
		$("#word").html("你准备好了吗？")
	});
</script>