master

分支 (1)

管理

管理

master

all_project
/
苏光正-点名.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <!--
    1.Math.random ->Math.ceil()/Math.floor()
    2.定义数组
    3.快速改变索引
    setTimeout()
    setInterval()
    4.将数组的元素放入页面{{}}
    5.点击按钮暂停
-->
    <div id="app">
        {{student_name}}
        <br>
        <button @click='stop'>{{anNiu[flag]}}</button>
    </div>
        <script>
             new Vue({
                 el:'#app',
                 data(){
                    return {
                        student:['苏光正','符文峰','王焱','黄文斌','黄业帝','尤昊'],
                        student_name:'',
                        id:0,
                        flag:1,
                        anNiu:['开始','暂停'],
                    }
                 },
                 //在页面加载完毕之后立即调用某个方法
                 created() {
                    this.get_name()
                 },
                 methods:{
                    //获取学生姓名
                  get_name(){
                        this.id = setInterval(()=>{
                             var index = Math.floor(Math.random()*6)
                            //  console.log(this.student[index]);
                             this.student_name=this.student[index];
                        },30)
                    },
                    //暂停定时器
                    stop(){
                        if(this.flag){
                            clearInterval(this.id)
                            this.flag = 0;

                        }else{
                            this.get_name();
                            this.flag=1;
                        }
                    }
                 }
             })
         </script>
</body>
</html>