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

先上效果图

请添加图片描述

已实现功能

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.students
    clearTimeout(this.tout)
    if (this.state == 0) {
      //如果是0即开始随机，变为1时结束，不是0时执行else
      clearInterval(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地址->