On Teacher's Day, write a random roll call page for teachers

First on the renderings

Implemented function

1. 5s-6s random names appear;
2. Mouse click explosion effect;
3. To be continued...

development environment

I will consider adding more functions later, so the angular framework used, in fact, can also be done simply by randomly naming an html file.

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

random call code

I found this logic from bd on the Internet, and made a simple conversion with ts syntax

  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 code

id="lucky" This line of code is mainly used to display the name

<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>

Paste all the 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);
}

Summarize

Simple random roll call is not difficult, but it takes a lot of time to slowly debug the webpage to make it "good-looking" and adapt to screens of various sizes. I took the time to write a rough one today, and I will update it later when I have time. Considering the school The intranet used may not be able to access the Internet. At present, the data is hard-coded in a configuration file. We will consider adding functions later:

1. Server sync data;
2. Switching of themes and backgrounds;
3. Enter the score and display it with echarts;
4. Simple authentication login;
5. Use php to write a CRUD in the background;,
   continuous update, please pay attention to the git address ->