基于JavaScript的简易点名网页

发布时间：2024年01月22日

非常简单的一个20人点名网页,

效果截图:

?代码:

定义一个数组,把数组放入表格中,点击按钮随机点名,随机获得数组的下标,然后在下面输出名字,并把改名字所在的表格位置背景色改变.

?<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?.dd{
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ?}
?? ??? ??? ?.d1{
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ?}
?? ??? ??? ?.d2{
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ?}
?? ??? ??? ?.d3{
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?? ??? ??? ?button{
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.tt{
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?? ??? ??? ?.tt td{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="dd">
?? ??? ??? ?<table class="tt">
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="t0"></td>
?? ??? ??? ??? ??? ?<td class="t1"></td>
?? ??? ??? ??? ??? ?<td class="t2"></td>
?? ??? ??? ??? ??? ?<td class="t3"></td>
?? ??? ??? ??? ??? ?<td class="t4"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="t5"></td>
?? ??? ??? ??? ??? ?<td class="t6"></td>
?? ??? ??? ??? ??? ?<td class="t7"></td>
?? ??? ??? ??? ??? ?<td class="t8"></td>
?? ??? ??? ??? ??? ?<td class="t9"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="t10"></td>
?? ??? ??? ??? ??? ?<td class="t11"></td>
?? ??? ??? ??? ??? ?<td class="t12"></td>
?? ??? ??? ??? ??? ?<td class="t13"></td>
?? ??? ??? ??? ??? ?<td class="t14"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="t15"></td>
?? ??? ??? ??? ??? ?<td class="t16"></td>
?? ??? ??? ??? ??? ?<td class="t17"></td>
?? ??? ??? ??? ??? ?<td class="t18"></td>
?? ??? ??? ??? ??? ?<td class="t19"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>
?? ??? ??? ?<div class="d3">
?? ??? ??? ??? ?<button onclick="ch()">随机点名</button>
?? ??? ??? ?</div>
?? ??? ? ? ?
?? ??? ??? ?<div class="d2"></div>
?? ??? ?</div>
?? ??? ?
?? ??? ?<script>
?? ??? ??? ?let arr=["张三","赵子龙","武松","悟空","刘备","李四","项羽","贾宝玉","猪八戒","路明非",
?? ??? ??? ?"宋江","小霸王","林黛玉","鲁智深","超人强","猪猪侠","张无忌","吕布","黄眉大王","绘梨衣"];
?? ??? ??? ?for(let i=0;i<20;i++){
?? ??? ??? ??? ?document.querySelector(".t"+i+"").innerHTML=arr[i];
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?function ch(){
?? ??? ??? ??? ?
?? ??? ??? ??? ?let a=Math.floor(Math.random()*arr.length);
?? ??? ??? ??? ?document.querySelector(".d2").innerHTML=arr[a];
?? ??? ??? ??? ?let bg =document.querySelector(".t"+a+"");
?? ??? ??? ??? ?bg.style.backgroundColor='gray';
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>

文章来源:https://blog.csdn.net/z1561599530b/article/details/135684677
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章