js 点名起

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yjgbk/p/10139034.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<style type="text/css">
		body {
			font-size: 12px;
		}
		
		* {
			margin: 0;
			padding: 0;
		}
		
		ul li,
		ol li {
			list-style: none;
		}
		
		.fl {
			float: left;
		}
		
		.cl:after {
			display: block;
			clear: both;
			content: "";
			visibility: hidden;
			height: 0
		}
		
		.cl {
			zoom: 1
		}
		
		.main {
			width: 500px;
			margin: auto;
		}
		
		.addName {
			margin: 20px 0;
		}
		
		.addName input {
			width: 200px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid #ddd;
			margin-right: 5px;
			padding-left: 10px;
		}
		
		.addName .btn {
			width: 80px;
			height: 32px;
			border-radius: 5px;
			border: 1px solid #ddd;
		}
		
		.allName {
			max-height: 300px;
			overflow: auto;
			padding: 10px;
		}
		
		.allName li {
			padding: 0 10px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid #ddd;
			margin-right: 10px;
			margin-bottom: 10px;
			line-height: 30px;
			float: left;
			position: relative;
		}
		
		.allName li i {
			font-style: normal;
			font-size: 10px;
			width: 16px;
			height: 16px;
			background: #FF0000;
			line-height: 16px;
			text-align: center;
			color: #fff;
			border-radius: 50%;
			position: absolute;
			right: -4px;
			top: -4px;
			cursor: pointer;
		}
		
		.spotName {
			font-size: 50px;
			text-align: center;
			margin-top: 20px;
			font-weight: bold;
		}
		
		.startBtn {
			width: 100px;
			height: 50px;
			border: 2px solid #ddd;
			border-radius: 5px;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			cursor: pointer;
			margin: auto;
			margin-top: 30px;
			font-weight: bold;
			color: #666;
		}
	</style>

	<body>
		<div class="main">
			<div class="addName cl">
				<input class="input-name fl" type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')" />
				<button class="btn fl">确定</button>
			</div>
			<ul class="allName cl"></ul>
			<div class="spotName"></div>
			<div class="startBtn">开始</div>
		</div>

		<script>
			$(function() {
				var arr = [], //数组
					myreg = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,500}$/, //名字正则
					stime,	
					falg = true;
				
				
				//添加名字
				$(".btn").click(function() {
					var InputVal = $(".input-name").val();

					if(InputVal != '') {
						
						if(!myreg.test(InputVal)) {
							alert('名字格式不正确') 
						} else { 
							arr.push(InputVal);
							$(".allName").html('');
							$(".input-name").val('');
							for(var i = 0; i < arr.length; i++) {
								$(".allName").append('<li><span>' + arr[i] + '</span><i>X</i></li>')
							} 
						}
						
					} else {
						alert('名字不能为空');
					} 
				});

				//删除名字
				$(".allName").on('click', 'li i', function() {
					$(this).parent('li').remove();
					for(var i = 0; i < arr.length; i++) {
						if(arr[i] == $(this).parent('li').find('span').html()) {
							arr.splice(i, 1); //从下标为i的元素开始，连续删除1个元素
							i--; //因为删除下标为i的元素后，该位置又被新的元素所占据，所以要重新检测该位置
						}
					}
				})
 				
 				//开始随机按钮
				$(".startBtn").click(function() {
					if(arr.length != 0) {
						if(falg) {
							stime = setInterval(function(){
								var randomName = arr[Math.floor(Math.random() * arr.length)];  //这个是核心
								$(".spotName").html(randomName);
							}, 10)
							$(this).html('结束'); 
							falg = false;
						} else {
							clearInterval(stime);
							stime = null;
							$(this).html('开始'); 
							falg = true;
						}
					} else {
						alert('请输入名字');
					}
				})

			})
		</script>
 
		 
	</body>

</html>

转载于:https://www.cnblogs.com/yjgbk/p/10139034.html