vue滚动抽奖

最新推荐文章于 2024-09-19 20:43:49 发布

Mountain08

最新推荐文章于 2024-09-19 20:43:49 发布

阅读量2.4k

点赞数 2

分类专栏： vue js

本文链接：https://blog.csdn.net/mike_chen2stockings/article/details/113656066

版权

js 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

视频还在审核中。。。
HTML

<template>
<div id="app">
    <div id="container" class="container">
        <transition name="bounce">
            <template>
                <div v-show="luckyDrawShow" id="luckyDraw" class="luckyDraw">
                    <p class="title">一等奖<a @click="luckyDrawShow=false">关闭</a></p>
                    <div id="draw" class="draw">
                    <transition name="out-in">
                        <div :key="winner" v-cloak="">{{winner}}</div>
                    </transition>
                    </div>
                    <div class="btn-box">
                        <!-- <a @click="tabDraw">{{isActionTxt}}</a> -->
                        <a @click="start">开始</a>
                        <a @click="end">停止</a>
                    </div>
                </div>
            </template>
        </transition>
    </div>
    <div id="j_list" style="display:none">
        <p v-for="item in peopleList">
            <span class="name">{{item.teamCode}}</span>
            <span class="tell">{{item.siteName}}</span>
        </p>
    </div>
</div>
</template>```
**JS**

```javascript
<script>
export default {
  name: 'prizeList',
  data() {
    return {
        luckyDrawShow: true,
        winner: "", //获奖者
        timer: null, //定时器
        times: 50, //抽奖速度
        len: null, //抽奖人数
        wIndex: null, //抽奖者位置
        draw: [], //抽奖者
        peopleList:[
            {teamCode:'A001',siteName:'蒋欣'},
            {teamCode:'A002',siteName:'景甜'},
            {teamCode:'A003',siteName:'王祖贤'},
            {teamCode:'A004',siteName:'汤唯'},
            {teamCode:'A005',siteName:'李丽珍'},
            {teamCode:'A006',siteName:'赵奕欢'},
            {teamCode:'A007',siteName:'刘德华'},
            {teamCode:'A008',siteName:'范冰冰'},
            {teamCode:'A009',siteName:'GAI(周延)'},
            {teamCode:'A010',siteName:'郭富城'},
            {teamCode:'A011',siteName:'刘诗诗'},
            {teamCode:'A012',siteName:'杨幂'},
            {teamCode:'A013',siteName:'迪丽热巴'},
            {teamCode:'A014',siteName:'黄奕'},
            {teamCode:'A015',siteName:'马思纯'},
            {teamCode:'A016',siteName:'唐嫣'},
            {teamCode:'A017',siteName:'佟丽娅'},
            {teamCode:'A018',siteName:'苍井空'},
            {teamCode:'A019',siteName:'刘亦菲'},
            {teamCode:'A020',siteName:'古力娜扎'},
            {teamCode:'A021',siteName:'章子怡'},
            {teamCode:'A022',siteName:'伊妮'},
            {teamCode:'A023',siteName:'张馨予'},
            {teamCode:'A024',siteName:'张碧晨'},
            {teamCode:'A025',siteName:'李沁'},
            {teamCode:'A026',siteName:'江疏影'},
            {teamCode:'A027',siteName:'柳岩'},
            {teamCode:'A028',siteName:'王鸥'},
            {teamCode:'A029',siteName:'高圆圆'},
            {teamCode:'A030',siteName:'陈妍希'},
            {teamCode:'A030',siteName:'韩雪'},
        ],
        isAction:false,
        isActionTxt:'开始'
    }
  },
  methods: {
      tabDraw: function(){
          if(!this.isAction){
              if(this.isActionTxt === '再次抽奖'){//回到选择要抽的奖项状态

              }else{
                this.isAction = true
                this.isActionTxt = '停止'
                this.start()
              }
          }else{
             this.isAction = false
             this.isActionTxt = '再次抽奖'
             this.end() 
          }
      },
      start: function() { //开始抽奖
            this.len = this.len || this.draw.length; //获取抽奖人数
            if (!this.timer) { //如果抽奖不是正在进行中则开始抽奖
                this.getWinner();
                this.timer = setInterval(function() {
                    this.getWinner();
                }.bind(this), this.times)
            }
        },
        getWinner: function() { //根据随机数找到当前的中奖者 
            this.wIndex = this.GetRandom(0, this.len - 1);
            this.winner = this.draw[this.wIndex].name + " " + this.draw[this.wIndex].tel;
        },
        end: function() { //结束抽奖
            clearInterval(this.timer);
            this.timer = null;
        },
        GetRandom: function(Min, Max) { //随机数
            return Min + (Math.floor(Math.random() * (Max - Min)));
        }
  },
  watch: {
        luckyDrawShow: function() {
            if (!this.luckyDrawShow) { //弹窗关闭时，清除定时器与中奖者
                this.end();
                this.winner = "";
            }
        }
  },
  created() {
      
  },
  mounted() {
      var draws = document.getElementById("j_list").getElementsByTagName("p");
        for (var i = 0; i < draws.length; i++) {
            this.draw.push({
                name: draws[i].getElementsByClassName("name")[0].innerHTML,
                tel: draws[i].getElementsByClassName("tell")[0].innerHTML
            })
        }
  }
}
</script>

CSS:

<style scoped>
/*-----------------------------------------*/
/***********公用样式**************/
/*-----------------------------------------*/
.clear-both::after {
	clear:both;
	content:".";
	display:block;
	visibility:hidden;
	height:0;
}
.lf {
	float:left;
}
.rt {
	float:right;
}
.transition {
	-webkit-transition:all .5s ease;
	-o-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
.transform-scale {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}
.hover-transform-scale {
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}
.ellipsis {
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align:middle;
}
.text-ban {
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}
.track-list {
	scrollbar-face-color:#c7c7c7;
	scrollbar-highlight-color:#c7c7c7;
	scrollbar-3dlight-color:#c7c7c7;
	scrollbar-darkshadow-color:#c7c7c7;
	scrollbar-Shadow-color:#c7c7c7;
	scrollbar-arrow-color:#c7c7c7;
	scrollbar-track-color:#ebebeb;
}
.track-list::-webkit-scrollbar {
	width:7px;
	height:9px;
}
.track-list::-webkit-scrollbar-button:end:increment,.track-list::-webkit-scrollbar-button:start:decrement {
	display:block;
	height:0;
	background-color:transparent;
}
.track-list::-webkit-scrollbar-track-piece {
	-webkit-border-radius:0;
	-webkit-border-bottom-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	background:#ebebeb;
}
.track-list::-webkit-scrollbar-thumb:vertical {
	height:50px;
	background-color:rgba(0,0,0,0.4);
	-webkit-border-radius:4px;
}
.track-list::-webkit-scrollbar-thumb:horizontal {
	width:50px;
	background-color:rgba(0,0,0,0.2);
	-webkit-border-radius:4px;
}
/*-----------------------------------------*/
/***********元素样式**************/
/*-----------------------------------------*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
	color:#fff;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	background:#eff3f5;
	background:-webkit-linear-gradient(left,#f6ad36,#cf5a5d);
	/* Safari 5.1 - 6.0 */
    background:-o-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Opera 11.1 - 12.0 */
    background:-moz-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Firefox 3.6 - 15 */
    background:linear-gradient(to right,#f6ad36,#cf5a5d);
	/* 标准的语法 */
}
/** 清除内外边距 **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0;
}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
input,select,textarea {
	font-size:100%;
}
/* 去掉各 table cell 的边距并让其边重合 */
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* IE bug fixed:th 不继承 text-align */
th {
	text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
	border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
	display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
	border:0;
	font-variant:normal;
}
/* 一致的 del 样式 */
del {
	text-decoration:line-through;
}
i {
	font-style:normal;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500;
}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th {
	text-align:left;
}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500;
}
h1 {
	font-size:24px;
}
h2 {
	font-size:16px;
}
h3,h4,h5,h6 {
	font-size:14px;
}
/* 解决ie下重复最后字符 */
q:before,q:after {
	content:'';
}
/* 统一上标和下标 */
sub,sup {
	position:relative;
	font-size:75%;
	line-height:0;
	vertical-align:baseline;
}
sup {
	top:-0.5em;
}
sub {
	bottom:-0.25em;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
	text-decoration:none;
}
/** 设置默认字体 **/
body,button,input,select,textarea {
	font:14px helvetica neue,arial,hiragino sans gb,microsoft yahei,sans-serif;
}
address,cite,dfn,em,var {
	font-style:normal;
}
/* 将斜体扶正 */
code,kbd,pre,samp {
	font-family:courier new,courier,monospace;
}
/* 统一等宽字体 */
small {
	font-size:12px;
}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul,ol {
	list-style:none;
}
/** 重置文本格式元素 **/
a {
	text-decoration:none;
	cursor:pointer;
	color:#333;
	-webkit-transition:all .5s ease;
	-o-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
a:hover {
	color:#9ebee7;
}
/** 清除选中状态蓝色边框 **/
a,img,input,select,textarea {
	outline:none;
	border:none;
}
/** 定义布局方式 **/
* {
	box-sizing:border-box;
}
input[type=submit] {
	-webkit-appearance:none;
}
/**************************/
/********页面样式***********/
/**************************/
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}
body {
	min-width:1000px;
	margin:0 auto;
	background-size:100% auto;
}
.begin-btn {
	position:fixed;
	bottom:50px;
	left:50%;
	width:240px;
	margin-left:-120px;
	height:40px;
	line-height:40px;
	font-size:16px;
	font-weight:bold;
	border-radius:5px;
	color:#fff;
	background-color:#e4393c;
	box-shadow:2px 3px 8px rgba(0,0,0,0.8);
	text-align:center;
}
.begin-btn:hover {
	color:#fff;
}
.luckyDraw {
	position:fixed;
	top:50%;
	left:50%;
	width:600px;
	height:428px;
	margin-top:-214px;
	margin-left:-300px;
	border-radius:5px;
	background-color:#fff;
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	overflow:hidden;
	z-index:9999;
}
.luckyDraw .title {
	height:50px;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	background:#eff3f5;
	background:-webkit-linear-gradient(left,#f6ad36,#cf5a5d);
	/* Safari 5.1 - 6.0 */
    background:-o-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Opera 11.1 - 12.0 */
    background:-moz-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Firefox 3.6 - 15 */
    background:linear-gradient(to right,#f6ad36,#cf5a5d);
	/* 标准的语法 */
    position:relative;
}
.luckyDraw .title a {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:50px;
	height:50px;
	font-size:12px;
	color:#fff;
}
.luckyDraw .draw {
	position:relative;
	height:200px;
	font-size:40px;
	font-weight:bold;
	text-align:center;
	color:#e4393c;
}
.luckyDraw .draw > div {
	position:absolute;
	top:30px;
	bottom:30px;
	line-height:140px;
	width:100%;
}
.luckyDraw .speed {
	width:100%;
	padding-top:40px;
	line-height:20px;
	font-size:14px;
	color:#333;
	text-align:center;
}
.luckyDraw .speed span {
	font-size:16px;
	font-weight:bold;
}
.luckyDraw .speed .cover {
	display:inline-block;
	width:240px;
	margin:0 10px;
	vertical-align:top;
	position:relative;
}
.luckyDraw .speed em {
	position:absolute;
	bottom:-20px;
	width:50px;
	margin-left:-25px;
}
.luckyDraw .speed input {
	width:100%;
}
.luckyDraw .btn-box {
	text-align:center;
}
.luckyDraw .btn-box a {
	display:inline-block;
	width:180px;
	height:40px;
	margin:0 20px;
	font-size:16px;
	font-weight:bold;
	line-height:40px;
	border-radius:3px;
	color:#fff;
	background-color:#e4393c;
}
/**********************************/
/**以下代码结合vue transition的name使用**/
/**********************************/

/**数字变化的动画**/
.out-in-enter {
	-webkit-transform:translateY(30px);
	-moz-transform:translateY(30px);
	-ms-transform:translateY(30px);
	-o-transform:translateY(30px);
	transform:translateY(30px);
	opacity:0.5;
}
.out-in-leave-to {
	-webkit-transform:translateY(-30px);
	-moz-transform:translateY(-30px);
	-ms-transform:translateY(-30px);
	-o-transform:translateY(-30px);
	transform:translateY(-30px);
	opacity:0.5;
}
.out-in-enter-active,.out-in-leave-active {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
}
/**弹框出现隐藏的动画**/
.bounce-enter-active {
	animation:bounce-in .5s;
}
.bounce-leave-active {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
}
.bounce-leave-to {
	opacity:0.5;
	height:0;
}
@keyframes bounce-in {
	0% {
	transform:translateX(9%);
}
16.6% {
	transform:translateX(-9%);
}
33.33% {
	transform:translateX(6%);
}
50% {
	transform:translateX(-6%);
}
66.6% {
	transform:translateX(3%);
}
83.33% {
	transform:translateX(-3%);
}
100% {
	transform:translateX(0);
}
}
</style>
``