一个简单的web点名程序（基于javascript）

最新推荐文章于 2022-08-24 17:38:18 发布

rainsoul18

最新推荐文章于 2022-08-24 17:38:18 发布

阅读量4.7k

点赞数

分类专栏： web前端“ ”javascript 文章标签： javascript

本文链接：https://blog.csdn.net/rainsoul18/article/details/77149988

版权

”javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

web前端“

0 篇文章 0 订阅

订阅专栏

通过一星期的web前端知识学习，自己完成了一个简单的点名程序。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.head {
				width: 100%;
				text-align: center;
				background-image: url(img/bg.jpg);
				background-attachment: fixed;
				top: 0;
				font-size: 1.5em;
				padding: 10px;
				color: rgb(255, 255, 255);
			}
			
			.container {
				position: absolute;
				width: 100%;
				height: 614px;
				background: url(img/bd2.jpg) no-repeat;
			}
			
			.title {
				position: absolute;
				left: 0;
				right: 0;
				text-align: center;
			}
			
			.btn {
				margin-top: 20px;
				padding: 10px 20px;
				border: 1px solid rgba(255, 255, 255, 0.5);
				cursor: pointer;
				color: #fff;
				font-size: 1.1em;
				font-family: "微软雅黑";
				background-color: rgb(1, 216, 103);
				transition: all 1s linear;
				border-radius: 20px;
			}
			
			.btn:hover {
				background-color: #D84C29;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			}
			
			.tip{
				display: inline-block;
				animation: sc 5s infinite linear;
			}
			
			#showbox {
				position: absolute;
				left: 0;
				right: 0;
				top: 50%;
				color: white;
				font: bold 3em "myfont";
				text-align: center;
			}
			/*自定义动画*/
			
			@-webkit-keyframes sc {
				0% {
					transform: scale(1.0);
				}
				50% {
					transform: scale(1.5);
				}
				100% {
					transform: scale(1.0);
				}
			}
			
			@font-face {
				font-family: "myfont";
				src: url('font/FZLTXHJW.TTF');
			}
		</style>
	</head>

	<body>
		<header class="head">
			欢迎使用点名系统
		</header>
		<div class="container">
			<div class="title">
				<span><button class="btn" id="btn" οnclick="start()">随机点名</button></span>
				<span><button class="btn" οnclick="stop()">停止</button></span>
			</div>
			<div id="showbox">
				<span class="tip"></span>
			</div>
		</div>
		<script>

			var arr = [

			//这里填写姓名(如：'张三','李四')
			];

			var code = '';

			var int;

			function genCode() {
				code = '';
				var index = Math.floor(Math.random() * arr.length);
				code += arr[index];
				$('showbox').innerHTML = code;
			}
			//开始随机点名
			function start() {
				int = self.setInterval("genCode()", 50);
				$('showbox').className='showbox';
				return int;
			}
			//停止点名
			function stop() {
				int = window.clearInterval(int);
				$('showbox').className = 'tip';
			}

			function $(id) {
				return document.getElementById(id);
			}
		</script>
	</body>

</html>