网页点名器（移动端、pc端）

最新推荐文章于 2024-04-19 16:15:52 发布

DataPulse-辉常努腻

最新推荐文章于 2024-04-19 16:15:52 发布

阅读量3.3k

点赞数 11

分类专栏： Web 文章标签： javascript css3 html5 jquery es6

本文链接：https://blog.csdn.net/qq_43900956/article/details/114038734

版权

Web 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了一种使用内联CSS和JavaScript实现的舒适可分享的点名器，通过动态效果提升用户体验。核心内容包括CSS样式设计和JavaScript交互逻辑，以及如何实现实时添加名字和随机抽取名字的功能。

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

因为希望观赏舒适，故将css,javascript写成了内联

辉常努腻的网页点名器-可搬运-分享无碍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>辉常努腻的点名器-可搬运-分享无碍</title>
		<style type="text/css">
		/*css样式*/
			#h1{
				font-family: "楷体";
				width: 150px;
				text-align: center;
				line-height: 60px;
				font-size: 35px;
				color: #8232CD ;
				height: 60px;
				background: #32CDA7 ;
				display: block;
				margin: auto ;
			}
			#b1{
				width: 70px;
				height: 30px;
				display: block;
				margin: auto;
			}
			p{
				
				text-align: center;
				/*letter-spacing: 2px;*/
				font-size: 12px;
				background: lightskyblue;
				width: 150px;
				height: 20px;
				line-height: 20px;
				margin:20px auto;

			}
			#xia{
				
				margin:20px auto;
				font-size: 40px;
				text-align: center;
			}
			.body{
				margin:300px auto 0
			;
				display: none;
				transform: scale(2);
			}
			.positiopn{
				margin: auto;
				width: 300px;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<section class="positiopn">
				<!--名字区域-->
				<h1 id="h1">X&nbsp;X&nbsp;X</h1>
			</section>
			<p id="p1">准备好了吗，开车咯</p>
			<!--点名器按钮-->
			<button id="b1">开&nbsp;始</button>
		</div>
		<div id="xia">
			↓
		</div>
			<!--添加名字区域  可F12查看-->
		<input type="text" name="" placeholder="push()" id="a1" value="" style="transform: scale(2) translateY(20px) translateX(45px); border: solid #8232CD 2px;"/>
		
		<script src="js/jquery-2.0.3.min.js" type="text/javascript">	
		//Jquery 插件
		</script>
		
		<script type="text/javascript">
			//JavaScript / Jquery 部分
			$("#xia").click(function(){
				$(".body").slideToggle(300)
				$(this).fadeToggle()
			})
			
			$("#b1").click(function(){
				$("#h1").slideToggle(700)
			})
			//js原生代码获取元素
			var h1=document.getElementById("h1")
			var b1=document.getElementById("b1")
			var p1=document.getElementById("p1")
			var a1=document.getElementById("a1")
			var a2=document.getElementById("a2")
			var a=0
			var c=null;
			var timer;//定时器
			
			//添加姓名 push事件
			window.onkeydown=function(event){
				// var e = event || window.event || arguments.callee.caller.arguments[0];
				if(event.keyCode==13 && a1.value==""){
					alert("请输入名字后按回车")
				}else if(event.keyCode==13 ){
					arr.push(a1.value)
					console.log(arr)
					a1.value=""
				}
				// a1.value=""
			}
			//点名器 姓名列表-可在网页中及时添加
			
			var arr = ["安雪辰", "曹胜龙","陈子怡","丁&emsp;浩","樊彧豪","高&emsp;宇","顾子良","韩阔","郝廉庆","胡博魁","霍瑞坤",
						"贾鑫博","金泽宇","李博豪","李嘉豪","李少轩","李亚辉","李振寅","刘德旺","刘佳欣","刘&emsp;帅","陈&emsp;君",
						"刘星雨","刘梓博","吕永辉","马晓倩","孟巾富","牛栋梁","齐少佳","屈向阳","芮坎尚","时浩杰","张淇军",
						"宋华金","孙晨旭","孙&emsp;茜","王鹤铭","王&emsp;铠","王&emsp;文","王亚乾","王云鹤","谢继然","徐&emsp;博",
						"薛丁华","杨成财","于浩旺","占俊杰","张观智","张&emsp;华","张凯旋","张雪丰","张毅辉"];
						
				//点名器按钮		
			b1.onclick=function(){
				if(a==0){
					timer=setInterval("jisuan()",50)
					a=1
					b1.innerHTML="停&nbsp;止"
					p1.innerHTML="别紧张,指不定是谁呢！"
				}else{
					a=0
					b1.innerHTML="开&nbsp;始"
					p1.innerHTML="恭喜你！"
					clearInterval(timer)
				}
			}
			//控制台查看该列表明细
			console.log(arr.length)
			
			//随机抽取名字
			function jisuan(){
				var i=Math.floor(Math.random()*arr.length)
				h1.innerHTML=arr[i]
				console.log(Math.random())
			}
		</script>
	</body>
</html>