jquery实现随机点名(点名器)

最新推荐文章于 2024-08-16 16:05:06 发布

是小王啊i

最新推荐文章于 2024-08-16 16:05:06 发布

阅读量1.6k

点赞数

文章标签： js css3 javascript jquery

本文链接：https://blog.csdn.net/qq_45378970/article/details/108903118

版权

jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

这是一个使用jQuery编写的简单HTML页面，包含一个随机点名功能。页面中有一个开始点名和停止点名的按钮，点击开始按钮会随机选取列表中的名字并高亮显示，背景颜色也会随机变化。停止点名时，会将当前选中的名字显示在页面上。

摘要由CSDN通过智能技术生成

复制以下代码查看效果

(注:记得导入jquery.js代码)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				/* height: 400px; */
				/* border: 1px solid red; */
				margin: 100px auto;
				position: relative;
			}
			#box1{
				width: 498px;
				height: 75px;
				text-align: center;
				border: 1px solid red;
			}
			#ul{
				width: 498px;
				/* height: 100px; */
				/* background: red; */
				text-align: center;
				border: 1px solid red;
			}
			#ul li{
				list-style: none;
			}
			.current{
				width: 65px;
				height: 20px;
				line-height: 20px;
				border-width: 1px;
				border-style: solid;
				border-radius: 5px;
				text-align: center;
				display: inline-block;
				margin: 10px;
			}
		</style>
		<script src="./jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<button id="btn1">开始点名</button>
				<button id="btn2">停下来</button>
				<h3>随机点名</h3>
				<p id="p1"></p>
			</div>
			<ul id="ul"></ul>
		</div>
		<script type="text/javascript">
			$(function(){
				var arr=['***','***','小**','**','二狗','***','老帅','貂蝉','妲己','吕布','宫啊','香香','套猴子','你爷爷','奶奶的','爷爷','程咬金','你大爷','还是','你大爷'];
				//随机颜色rgb
				function color(){
					var r=Math.floor(Math.random()*255);
					var g=Math.floor(Math.random()*255);
					var b=Math.floor(Math.random()*255);
					var rgb='rgb('+r+','+g+','+b+')';
					return rgb;
				}
				$.each(arr,function(index,e){
					//创建li
					var li=$('<li>');
					li.html(arr[index]);
					li.css({
						'background':color(),
					})
					li.addClass('current');
					$('ul').append(li);
				})
				$('#btn1').click(function(){
					timer=setInterval(function(){
						random=Math.floor(Math.random()*arr.length);
						$.each(arr,function(index,e){
							$('#p1').html();
							$('li').eq(index).css('background',color());
							$('li').eq(random).css('background','hsl(255,75%,80%)');
						})
					},50)
				})
				$('#btn2').click(function(){
					clearInterval(timer);
					$('#p1').html($('ul li').eq(random).html())
				})
			})
		</script>
	</body>
</html>