用JavaScript实现随机点名器＋tab切换案例分享

最新推荐文章于 2023-11-16 23:59:17 发布

VIP文章努力学习的码农丫

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量306

点赞数 1

本文链接：https://blog.csdn.net/qq_52264068/article/details/127943351

版权

1.随机点名器

用JavaScript实现随机点名的案例

代码实现：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>随机点名器</title>
	<style>
    /* html布局 */
		* {
			margin: 0px;
			padding: 0px;
		}

		body {
			background-color: cornsilk;
		}

		#dv {
			width: 800px;
			margin: 20px auto;
			border: 4px solid darkviolet;
			text-align: center;
			padding: 20px 20px 40px;
		}

		h1 {
			border-bottom: 2px solid pink;
			font-weight: normal;
		}

		ul li {
			vertical-align: top;
			display: inline-block;
			width: 100px;
			height: 50px;
			border-radius: 35%;
			border: 3px dashed palevioletred;
			text-align: center;
			line-height: 50px;
			margin: 5px 5px;
		}

		li.change {
			background-color: rgb(255, 47, 210);
			font-size: 15px;
			font-weight: bolder;
		}

		#btu,
		#btu1 {
			width: 100px;
			height: 50px;
			font-size: 15px;
			border-radius: 10px;
			cursor: pointer;
			margin: 10px 50px 0 50px;
			background-color: pink;
			border: none;
		}

		#btu:hover,
		#btu1:hover {
			background-color: #f28fa1;
		}

		.ch {
			position: relative;
			width: 150px;
			height: 50px;
			line-height: 50px;
			/* border-radius: 10px; */
			margin: 30px auto;
			border-bottom: 2px solid pink;
		}

		.luc {
			font-size: 20px;
			font-weight: bold;
			margin: 10px auto;
			text-align: center;
			color: green;
		}

		.name {
			font-size: 40px;
			font-family: '华文行楷';
		}
	</style>
</head>

<body>