【前端学习项目】web前端#001网页点名器（html+css+js实现用户交互）

最新推荐文章于 2024-05-06 19:36:11 发布

小橙子Wu

最新推荐文章于 2024-05-06 19:36:11 发布

阅读量1.3k

点赞数 2

分类专栏： web 文章标签： css html5 html javascript

本文链接：https://blog.csdn.net/zbcwmq/article/details/120523779

版权

web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这个故事是这样开始的，新学期伊始，我们java老师为了检测学生的java基础水平，留下了这么一份作业：实现全班32个人随机点名的小程序，当然以我的入门基础只能用随机类Random生成一个随机数，然后取取数组中的元素，这是最简单也是最傻瓜的作法，虽然我有心想让这个程序看起来更高级一些，可是有心无力呀！偶然有一天，上着前端课，突然就想试试能否用前端来实现，这样就会有一个比较美观的界面，不像先前用java实现的只能在控制台输出，最终就实现了有着用户交互功能的网页点名器。

首先先把学生一个一个的放到数组中
（萌新不会其他方法）
其次遍历这个数组
（当然数组是会遍历完的，我们希望数组能一直遍历下去，所以用了一个标志j,如果当j遍历到数组最后一个，我们就让j回到数组开头，开始一个新的循环）
然后按钮事件触发
可能在web中不叫按钮触发，但是这个叫法个人认为还是蛮贴切的，我们通过建立一个函数，当用户点击按钮时，执行这个函数，当然我们也不想按钮点了一次之后，再点击之后没有效果，我们希望按钮点了一次之后，也就是遍历暂停了，再去点击按钮的时候，能够重新开始遍历，开始新一轮的点名过程 也就是实现遍历—暂停----遍历----暂停—遍历—暂停…这个过程）

   //输出学生姓名的函数
	 function  myFunction() { 
		p.textContent=students[j];
		j++;
		//遍历完全班同学，又从头开始重新遍历
		if(j==32){
			j=0;
		}
	 }

function click(){
	//点击按钮控制点名和重新开始点名,异步函数
	 if(button.onclick){
		count++;
	 }
	 //偶数次开始遍历学生
	 if(count%2==0){
	 //间隔10毫秒执行myFunction函数
		 time=setInterval(myFunction,10);
	 }
	 //奇数次闪现停止
	 if(count%2!=0){
	 //停止执行函数time
		clearInterval(time);
	 }
	}

最后附上完整代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>点名器</title>
  <style type="text/css">
	body{
	border : 2px solid ;
	width : 500px ;
	text-align : center;
	}
	
	p{
	 font-size :4em;
	 color : blue ;
	}
	h1{
	font-size: 5em;
	color : red;
	}
	input{
	font-size:2em;
	}
  </style>
  <script type="text/javascript">
  <!--	
  </script>
  </head>
  <body>
  <h1>点名器</h1>
  <p>
  &nbsp
  </p>
  <input type="button" value="点名">
  <script type="text/javascript">
  <!--
    var students=["卢香","蔡欣彤","陈俊安","邓祥"," 胡冬","姜鑫高",
                     " 乐康明","李鹏辉","刘恒欣","罗丽昕","张新继",
					 "王梦菲","曾庆洪"," 陈治江","董志旭","黄腾",
					 "刘俊辰","罗宇","张福珍","张昱江","钟庄才","温慧",
					 "吴畏","吴永明","荣佳丽","王露露","吴梦琪","肖李花",
					 "颜毅杰","张晨伟","岑智松","吴雪玉"                  
        ];
	//p是指向p对象的指针，button是指向按钮对象的指针
	 var p=document.querySelector("p");
	 var button=document.querySelector("input");
	 var j=0;
	 //输出学生姓名的函数
	 function  myFunction() { 
		p.textContent=students[j];
		j++;
		//遍历完全班同学，又从头开始重新遍历
		if(j==32){
			j=0;
		}
	 }
	 
	//间隔10ms输出姓名，开始闪现
	var time=setInterval(myFunction,10);
	var count=0;
	button.onclick=click;
	function click(){
	//点击按钮控制点名和重新开始点名,异步函数
	 if(button.onclick){
		count++;
	 }
	 //偶数次开始遍历学生
	 if(count%2==0){
		 time=setInterval(myFunction,10);
	 }
	 //奇数次闪现停止
	 if(count%2!=0){
		clearInterval(time);
	 }
	}
	
	

  </script>
 </body>
</html>

最后的实现

见bilibili视频附上链接：

https://www.bilibili.com/video/BV1Q44y14783/

小橙子Wu

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【前端学习项目】web前端#001网页点名器（html+css+js实现用户交互）

目录首先先把学生一个一个的放到数组中其次遍历这个数组然后按钮事件触发最后附上完整代码：最后的实现这个故事是这样开始的，新学期伊始，我们java老师为了检测学生的java基础水平，留下了这么一份作业：实现全班32个人随机点名的小程序，当然以我的入门基础只能用随机类Random生成一个随机数，然后取取数组中的元素，这是最简单也是最傻瓜的作法，虽然我有心想让这个程序看起来更高级一些，可是有心无力呀！偶然有一天，上着前端课，突然就想试试能否用前端来实现，这样就会有一个比较美观的界面，不像先前用java实现的只
复制链接

扫一扫