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

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>