项目效果

项目实现

html

就用了一个根容器进行包裹
里面就是一个标题盒子，一个名字盒子，一个按钮，都是常用的标签

  <div class="random-click-container">
    <h2>随机点名系统</h2>
    <div>{{username}}</div>
    <button @click="clickBtnFn">{{btn}}</button>
  </div>

script

随机点名系统数据一般是在数据库中存储的，数据比较小，我就自己写在data里
逻辑比较简单，只需注意Math.random() * 数组长度就行
提示都写在代码旁边

data () {
    return {
      nameArr: [
        '骚白', '孤影', '赖神', 'Gemini',
        '拖米', '剑仙', '韩跑跑', '天赐',
        '王小贱', '听安', '桑杰', '德华',
        '耀阳', '北慕', '可杰', '韩小星'], // 数据
      username: '骚白', // 名字
      btn: '开始', // 按钮
      timer: null // 定时器
    }
  },
  methods: {
    clickBtnFn () {
      if (this.btn === '开始') {
        this.btn = '结束' // 替换文字
        this.timer = setInterval(() => { // 开启定时器
          const i = Math.floor(Math.random() * 16) // 16数组长度
          this.username = this.nameArr[i] // i 数组索引
        }, 100) // 100是每个时间
      } else {
        this.btn = '开始' // 替换文字
        clearInterval(this.timer) // 清除定时器
      }
    }
  }

css

vw单位可以根据窗口的宽度自动改变大小，“1vw”是窗口宽度的“1%”
vh单位也是根据窗口的高度自动改变大小。
其他就是一些常用的属性

body {
  width: 100vw;
  height: 100vh;
  background: -webkit-linear-gradient(left, #2b6876, #09203f); 
  // -webkit-能够在以webkit为内核的浏览器中正常使用。
  font-family: 'KaiTi';
}
.random-click-container{
    margin: 20px auto;
    text-align: center;
    color: #fff;
    button{
        padding: 5px 10px;
        margin-top: 20px;
        background: pink;
        border: 1px solid red;
        border-radius: 10px; // 圆角
    }
}

vue超简单随机点名系统

项目效果

项目实现

html

script

css