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

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

时间：2023-08-05 20:47:59

这个故事是这样开始的，新学期伊始，我们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){//停止执行函数timeclearInterval(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>