【项目笔记】抽奖笔记

data

index: -1,
timer: null,
value: '',
status: true,
arrList: []

抽奖js

start () {
     if (this.status) {
       console.log('我开始抽奖')
       this.value = ''
       this.arrList = this.shuffle(this.arrList)
       setTimeout(() => {
         this.recursive()
       }, 800)
       this.status = !this.status
     }
   },
   end () {
     console.log('结束抽奖')
     if (this.status) {
       return
     }
     clearTimeout(this.timer) // 停止抽奖
     this.index = this.randomIndex()
     this.value = this.arrList[this.index]
     // 发送到后台中奖信息

     this.status = !this.status
   },
   randomIndex: function () {
     this.index = Math.floor(Math.random() * this.arrList.length)
     return this.index
   },
   remove: function () {
     this.arrList.splice(this.randomIndex(), 1)
   },
   shuffle (array) {
     const length = array == null ? 0 : array.length // 数组长度
     if (!length) {
       // 如果数组长度为0，返回空数组
       return []
     }
     let index = -1 // 循环索引
     const lastIndex = length - 1 // 数组的最后一个元素的索引
     const result = this.copyArray(array) // 复制一份原始数组作为结果数组
     // console.log(result)
     while (++index < length) {
       // 循环数组长度次
       const rand =
         index + Math.floor(Math.random() * (lastIndex - index + 1))
       // 生成随机索引，每一次的范围都比上一次少一个
       const value = result[rand] // 结果数组中对应随机索引的值先存下来，然后和result[index]互换位置
       result[rand] = result[index]
       result[index] = value
     }
     return result // 返回打乱顺序后的新数组
   },
   copyArray (source, array) {
     let index = -1 // 循环索引
     const length = source.length // source数组长度

     array || (array = new Array(length)) // 如果没有array参数，就新建一个和source长度一样的数组作为array
     while (++index < length) {
       // 循环source，复制source的元素到array里
       array[index] = source[index]
     }
     return array // 返回array
   },
   recursive () {
     clearTimeout(this.timer)
     this.timer = setTimeout(() => {
       this.value = this.arrList[this.randomIndex()]
       this.recursive()
     }, 200)
   }

按钮及其css样式

.gift-main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  .select-lucky {
    width: 100%;
    height: 10%;
  }
  .gift-lucky {
    width: 100%;
    height: 60%;
    .gift-img {
      border-radius: 100%;
      width: 320px;
      height: 320px;
    }
  }
  .button-lucky {
    //margin:0 auto;
    height: 20%;
    width: 100%;
  }
}

.headImg {
  display: inline-block;
  margin-top: 10px;
  height: 100%;
  overflow: auto;
  .circleImg{
    padding: 12px 12px 12px;
    margin-top: px;

    width:70px;
    height:70px;
    position: relative;
    border-radius:50%;
    -webkit-animation: ani 2s linear infinite;
}
  // .circleImg {
  //   padding: 12px 12px 12px;
  //   margin-top: px;
  //   border-radius: 100%;
  //   width: 70px;
  //   height: 70px;
  //   position: relative;
  // }
  .luckyImg {
    background-color: #ffff7a;
    transform: scale(1.5);
    z-index:999;
  }

  .luckyImg{
    width:70px;
    height:70px;
    border-radius:50%;
    -webkit-animation: ani 2s linear infinite;
}

@keyframes ani {
   0%{
        box-shadow: 0 0 0px #ff8329
   }
   25%{
        box-shadow: 0 0 10px #ff8329
   }
    50%{
        box-shadow: 0 0 20px #ff8329
   }
   75%{
        box-shadow: 0 0 10px #ff8329
   }
   100%{
    box-shadow: 0 0 0px #ff8329
   }
}

}
.headImg::-webkit-scrollbar {
  width: 10px;
  height: 200px;
}

/*滚动条滑块*/
.boheadImgx::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #d8d8d8;
  background: #d8d8d8;
}

/*滚动条轨道*/
.headImg::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #d8d8d8;
  border-radius: 10px;
  background: #ffff7a;
}
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      color: #ffff00;
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-main-lucky {
    width: 82%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-lucky {
    width: 18%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmctc-right-lucky {
    width: 35%;
  }

  .rmctc-lucky-1 {
    height: 40%;
  }
  .rmctc-lucky-2 {
    height: 60%;
  }
}

/* 3D Button */
.btn-3d {
  position: relative;
  display: inline-block;
  font-size: 22px;
  padding: 20px 60px;
  color: white;
  margin: 20px 10px 10px;
  border-radius: 6px;
  text-align: center;
  transition: top 0.01s linear;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.btn-3d.red:hover {
  background-color: #e74c3c;
}
.btn-3d.yellow:hover {
  background-color: #f0d264;
}
.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 8px 0 0 #c24032, 0 8px 0 1px rgba(0, 0, 0, 0.4),
    0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.btn-3d.yellow {
  background-color: #f0d264;
  box-shadow: 0 0 0 1px #f0d264 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 8px 0 0 rgba(196, 172, 83, 0.7), 0 8px 0 1px rgba(0, 0, 0, 0.4),
    0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #f0d264 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

nav {
  margin: auto;
  margin-top: 20px;
  position: relative;
  min-width: 20px;
  height: 240px;
}

nav h2 {
  border-radius: 2px;
  position: relative;
  background: tomato;
  height: 40px;
  text-transform: uppercase;
  color: ivory;
  font-weight: 200;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  box-shadow: 4px 4px 20px -2px rgba(0, 0, 0, 0.35);
  transition: all 0.4s;
}

nav:hover h2 {
  transform: translateY(-2px);
  box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.35);
}
nav:hover:active h2 {
  transform: translateY(10px);
  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.35);
}

input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  height: 40px;
}

#toggle:checked ~ ul {
  height: 0%;
}

nav ul {
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
  list-style: none;
  overflow: hidden;
  text-align: right;
  margin-bottom: 22px;
  text-align: center;
  transition: all 0.4s ease-out;
  height: 100%;
}
nav ul li {
  border-radius: 2px;
  position: relative;
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
  width: 100%;
  margin: 0;
  margin-bottom: 5px;
  background: tomato;
  transition: background 3s;
  box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.35);
}

nav ul li:hover {
  background: mediumorchid;
  transition: background 0.45s;
}

nav ul li:hover a:active,
li {
  color: tomato;
}

nav ul a {
  display: block;
  color: ivory;
  text-transform: lowercase;
  font-size: 18px;
  font-weight: 200;
  text-decoration: none;
  transition: color 0.3s;
}