教师节，给老师们写一个随机点名的网页

先上效果图

已实现功能

5s-6s随机出现名字；
鼠标点击爆炸特效；
未完待续…

开发环境

后面考虑加更多功能，所以用的angular框架，其实简单的随机点名一个html文件也可以做好。

Angular CLI: 8.3.29
Node: 10.17.0
OS: win32 x64
Angular: 8.2.14

随机点名代码

这段逻辑从网上bd找的，用ts语法做了简单转化

  onStart(){console.log(this.curClass)let choosedClass = this.data.allData.find(item=>item.className === this.curClass)if(!choosedClass || choosedClass.students.length<1){return}let arr = choosedClass.studentsclearTimeout(this.tout)if (this.state == 0) {//如果是0即开始随机，变为1时结束，不是0时执行elseclearInterval(this.t);this.t = setInterval( ()=>{// console.log(1);var sj = Math.round(Math.random() * (arr.length - 1));console.log(arr[sj].name);this.luckyName = arr[sj].name;}, 37)this.btnText = "结束"//更改按钮的内容this.state=1;this.tout = setTimeout(() => {this.state=0;clearInterval(this.t);this.btnText = '开始'}, 5000+Math.round(Math.random() * 1000));}else{this.state=0;clearInterval(this.t);this.btnText = '开始'}}

html代码

id=“lucky” 这行代码主要用于显示名字

<ng-container *ngIf="data.allData.length"><div class="container"><div class="choose"><nz-select [(ngModel)]="curClass" nzPlaceHolder="选择班级"><ng-container *ngFor="let item of data.allData"><nz-option [nzValue]="item.className" [nzLabel]="item.className"></nz-option></ng-container></nz-select></div><div id="lucky" (click)="onStart()"><span class="name">{{luckyName.trim()}}</span></div><!-- <button nz-button nzType="primary" nzSize="large" nzShape="round" (click)="onStart()">&nbsp;&nbsp;{{btnText}} &nbsp; &nbsp;</button> --></div></ng-container>

贴上全部的css

.container{background-image: url(../../../assets/pictures/name_bg1.jpg);// background-size:cover;background-repeat: no-repeat;background-size: 100% 100%;max-width: 900px;min-width: 660px;max-height: 640px;min-height: 460px;border-radius: 1rem;padding-bottom: 2rem;
}.choose {margin-right: 1rem;margin-top: 2rem;text-align: right;
}nz-select {width: 9rem;
}#lucky {width: 100%;height: 80%;// background-color: rgb(233, 248, 214);// border: 1px solid rgb(130, 216, 18);font-size: 5rem;font-weight: 600;font-family: 'Rig Bold Inline', sans-serif;line-height: 200px;text-align: center;margin: 40px auto 30px auto;padding: 1rem 2rem;border-radius: 10px;margin-top: 5rem;}span {display: block;color: #ded428;text-align: center;font-size: 118px;font-family: "Rig Bold Inline", sans-serif;text-shadow: 7px 7px 4px #636363;-webkit-text-stroke: 0.1px black;letter-spacing: -2.5rem;}@font-face {font-family:'Rig Bold Coarse'; src:url(../../../assets/font/Slidexiaxing-Regular.ttf);
}@font-face {font-family:'Rig Bold Extrude'; src:url(../../../assets/font/Slidexiaxing-Regular.ttf);
}@font-face {font-family:'Rig Bold Shadow'; src:url(../../../assets/font/Slidexiaxing-Regular.ttf);
}@font-face {font-family:'Rig Bold Face'; src:url(../../../assets/font/Slidexiaxing-Regular.ttf);
}@font-face {font-family:'Rig Bold Inline'; src:url(../../../assets/font/Slidexiaxing-Regular.ttf);
}

总结

简单的随机点名并不难，但是要把网页做的“好看”，并且适配各个尺寸屏幕需要花很多时间慢慢调试，今天抽空写的粗略了一点，后面有时间慢慢更新,考虑到学校用的内网，不一定能访问互联网，目前数据都是写死在一个配置文件，后面考虑增加功能：

服务器同步数据；
主题背景之类的切换；
录入成绩，并用echarts图展示；
简单的身份验证登录；
后台用php写个增删改查；，
持续更新，请关注git地址->

教师节，给老师们写一个随机点名的网页相关推荐

python编写一个软件-python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
怎么用python制作随机点名软件_python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
python随机点名程序图形化_python写一个随机点名软件，python随机点名,最近有个随机点名软件...
python写一个随机点名软件,python随机点名,最近有个随机点名软件最近有个随机点名软件的需求,故写了一个,上代码:github地址# -*- coding: utf-8 -*-# @Time ...
python写软件实例-python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
python随机点名程序图形化,python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
怎么用python制作随机点名软件_python写一个随机点名软件
#-*- coding: utf-8 -*-#@Time : 18-12-31 下午4:21#@Author : Felix Wang from tkinter import * importtkin ...
利用js随机数，写了一个随机点名的简单代码
一.问题或解决方法应用场景. 利用js写了一个随机点名的代码二.直接粘贴代码获取图片 1. 先写一个获取随机数的代码获取min-max 的随机整数,包括min,max function getRa ...
用JS实现一个随机点名系统（五）
用JS实现一个随机点名系统每次上课前10分钟,老师都会叫我们回答问题,奈何每次都是点学号,好像每次我都能中奖,我直接跟老师提议,老师,我用来JS来帮你写个随机点名的系统吧!这样就不会每次都抽到我了 ...
自动点名系统c语言,用C语言编写一个随机点名系统
/*编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中*/ #include /*standard input & output*/ #incl ...