项目简述

业务描述

点名器通过点击开始和停止按钮实现随机点名的效果
通过按钮控制遍历数组

设计思路及代码实现

概况

项目主要使用HTML、CSS、JavaScript技术栈，JavaScript部分使用市场主流框架Vue.js实践，使用此框架的目的是适应市场需求、拓宽自身技术面，做一个顺应潮流，学习能力较强的程序员。

程序的构成

  • index.html（模板文件）
  • index-vue.js（实现点名控制的逻辑代码）
  • style.css（页面元素的整体布局）

  • vue.global.js（vue.js的依赖文件）

    代码概述与效果展示

    index.html
    题词器的整体布局思路：

  • 一个大容器，用于容纳点名器本体

  • 大容器的组成部分：标题title、展示框box、用于装饰的图片容器decorate
  • 展示框由两部分组成：一个用于显示名字的区域text_area，一个用于操作开始或暂停的按钮btn ```html <!DOCTYPE html>
    → → → 课堂点名器 ← ← ←
    {{ display }}
    提词器实现 - 图1 
  3. style.css<br />效果制作思路概述：
  5. - 给背景设置渐变色，通过动画方式使背景实现动态变化；
  6. - 设置可视宽高，通过栅格布局控制大容器位置；
  7. - 大容器通过控制外边距`margin`来使其保持居中，设置一些样式使其美观。如通过`border-radius`设置圆角边框，通过`box-shadow`设置盒子阴影等；
  8. - 标题按照一般的设置进行样式调整，通过对标题容器的控制使标题处于合适的位置；
  9. - 小盒子用于容纳显示名字的区域和控制按钮，背景使用径向渐变`radial-gradient`，让颜色从左往中心渐变,使用`text-align`属性使盒子内带文字的元素居中；
  10. - 显示名字的区域使用了浮动布局，使区域内元素实现水平居中和垂直居中，使用文字阴影使文字的显示更炫酷；
  11. - 按钮部分使用了`HTML`自带的按钮，首先是清除其自身自带的样式，按钮背景的设置使用线性渐变`Linear-gradient`使背景色实现从左往右的变化，接着设置内边距控制按钮的高度，最后就是通过盒子阴影、圆角边框、鼠标指向样式等优化按钮样式；
  12. - 底部图片通过定位使其转移至右下角。
  13. ```css
  14. * {
  15.   box-sizing: border-box;
  16.   margin: 0;
  17.   padding: 0;
  18.   font-family: Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
  19. }
  21. body {
  22.   opacity: 1;
  23.    /* 设置两种渐变色,每种渐变色由两种颜色组成 */
  24.   background: linear-gradient(
  25.     135deg,
  26.     hsl(170deg, 80%, 70%),
  27.     hsl(190deg, 80%, 70%),
  28.     hsl(250deg, 80%, 70%),
  29.     hsl(320deg, 80%, 70%)
  30.   );
  31.   /* 使用background-size在X轴和Y轴上把背景尺寸扩大两倍 */
  32.   background-size: 200% 200%;
  33.   animation: gradient-move 15s ease alternate infinite;
  34. }
  36. /* 通过移动背景的元素实现 */
  37. /* 然后使用动画属性通过background-position移动背景位置,
  38. 在X轴Y轴上分别从0%移动到100% */
  39. @keyframes gradient-move {
  40.   0% {
  41.     background-position: 0% 0%;
  42.   }
  43.   100% {
  44.     background-position: 100% 100%;
  45.   }
  46. }
  48. #app {
  49.   /* vw,vh是可视宽高 */
  50.   width: 100vw;
  51.   height: 100vh;
  52.   max-width: 100%;
  53.   /* 使用栅格布局 */
  54.   display: grid;
  55.   /* 控制所有元素的对齐方式(对齐) */
  56.   place-items: center;
  57. }
  59. .container{
  60.   width:700px;
  61.   height:500px;
  62.   border-radius: 4px;
  63.   margin: 100px auto 0 auto;
  64.   background: #fefefe;
  65.   position: relative;
  66.   /* 设置盒子阴影  */
  67.   box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
  68. }
  70. .container .title{
  71.   width: 100%;
  72.   height: 60px;
  73.   font-size: 40px;
  74.   font-weight: 700;
  75.   text-align: center;
  76.   line-height: 60px;
  77.   color: #00b894;
  78. }
  80. .box{
  81.   width: 100%;
  82.   height: 300px;
  83.   /* 使在小盒子内的文字元素居中 */
  84.   text-align: center;
  85.   /* margin-top: 50px; */
  86.   /* 线性渐变 参数：渐变方向(可用角度为单位) 颜色一 颜色二 */
  87.   background-image: radial-gradient(
  88.     at center left, 
  89.     #b2bec3 0.6000000000000001px,
  90.     #636e72 0.6000000000000001px
  91.   );
  93. }
  95. .text_area{
  96.   width:100%;
  97.   height:80%;
  98.   display: flex;
  99.   justify-content: center;
  100.   align-items: center;
  101.   color: #e493d0;
  102.   font-size: 40px;
  103.   text-shadow: #e493d0 10px 10px 10px;
  104. }
  106. .btn {
  107.   width: 150px;
  108.   /* 清除按钮自带样式 */
  109.   border: none;
  110.   /* 线性渐变 参数：渐变方向(可用角度为单位) 颜色一 颜色二 */
  111.   background: linear-gradient(
  112.     90deg,
  113.     hsl(240deg, 50%, 50%),
  114.     hsl(280deg, 50%, 50%)
  115.   );
  116.   padding: 10px 15px;
  117.   border-radius: 4px;
  118.   box-shadow: 5px 5px 5px rgba(149, 64, 191, .5);
  119.   color: white;
  120.   cursor: pointer;
  121. }
  124. /* 使用绝对定位控制图片位置 */
  125. .decorate{
  126.   position: absolute;
  127.   right: 0;
  128. }

index-vue.js
这段逻辑主要实现点名器的随机点名效果和控制开始与暂停的功能。
大致思路：

  • 设置4个变量存入data，display是显示名字的变量，nameList是存储名字的数组，timer为计时器，state记录程序的运行状态
  • computed为计算属性，控制标签文字的变化，这里介绍一下其特点：
    • 使用computed配置项定义计算属性
    • 每个计算属性都是一个函数
    • 函数里可以使用this访问data或其他配置项中的值
    • 这里为什么要用computed而不使用Vue提供的函数存放区methods?
      • computed自带缓存，作为被调用的函数它有缓存，使用的时候调用一次即可；
      • 如果一个页面中多次使用label中的逻辑，而且使用methods存储函数并调用的话，就会出现点击一次函数就执行一次的情况，这种操作是很耗费系统性能。而在computed中执行此类操作则不需要重复调用。
  • 通过在methods中的choiceClick方法实现随机抽取名字。通过state的变化决定函数接下来的操作:
    • 如果state为0，将会设置一个定时器，每100毫秒执行一次函数切换显示的名字，名字的切换显示通过随机数方法确定数组下标，然后通过赋值的方式赋给display变量，可以使其通过模板语法渲染在页面上；
    • 如果state为1，将会把定时器置于停止状态。
      1. const app = Vue.createApp({
      2. data() {
      3.    return {
      4.        display: '你准备好了吗？',
      5.        nameList: ['黎剑向', '石元涛', '张志', '彭启荣', '杨福林','王志超'],
      6.        timer: null,
      7.        state: 0,
      8.    }
      9. },
      10. // 使用计算属性控制标签文字
      11. computed: {
      12.    label() {
      13.        return this.state ? '结束' : '开始'
      14.    },
      15. },
      16. methods: {
      17.    choiceClick() {
      18.        // 使用state表示状态：结束为1，开始为0
      19.        if (this.state == 0) {
      20.            // 每100毫秒执行一次函数切换显示的名字，直到通过clearInterval()来停止
      21.            this.timer = setInterval(() => {
      22.                // 通过random函数计算的结果确定要显示的元素下标
      23.                let item = Math.round(Math.random() * (this.nameList.length - 1))
      24.                // 把数组里的值赋给data
      25.                this.display = this.nameList[item]
      26.            }, 100)
      27.            // 修改为开始状态
      28.            this.state = 1
      29.        } else {
      30.            // 清除定时器
      31.            clearInterval(this.timer)
      32.            // 修改为结束状态
      33.            this.state = 0
      34.        }
      35.    },
      36. },
      37. })
      38. app.mount('#app')

效果展示

image.png