vue抽奖弹框

浏览：1328次- 评论：1次- 发布时间：2017-12-07

Html

Css


    开始抽奖
    
        
    


    
    罗俊182****3297
    卢鑫139****7900
    邹欢军135****3652
    韩新利186****4415
    郁梦梦134****1086
    吴永青151****2568
    周超134****9281
    张俊荣137****4556
    郑文明134****1047
    刘昕茹135****1156
    卢鑫139****7900
    胡祖慧138****9800
    郁梦梦134****1086
    陈杰130****7529
    宋向东182****8008
    王冬霞151****9806
    郑荣贵186****7399
    陈红丹135****4530
    胡俊谟150****1391
    唐金娟159****6414
    王梓涵139****1758
    王丽娜137****9023
    夏美菊132****0312
    周江权136****8163
    胡江浩158****5799
    叶金寿133****1980
    胡丽丽136****6419
    黄香139****4141
    王文君159****8099
    李丽187****3821
    徐迎158****2203
    裘刘139****3035
    熊萍159****5297
    俞红庆135****9533
    谢静156****8239
    华平137****4888
    徐俊瑶152****6220
    李贵虹151****4711
    方利勇138****0609
    李婷137****7074
    王文龙135****1946
    祝庆娟132****3820
    马爱育180****1002
    陈鸿昌137****1882
    盛丽娟187****5227
    陈智燕137****8523
    张丽萍131****1251
    柴倩151****6990
    徐文豪173****8171
    王强135067853
    BIGBIGWANG156****1919
    方金英159****7586
    王冉英133****3568
    赵群135****9847
    周江权136****8163
    浦寅姗158****3323
    王冉英133****3568
    鲁海芬159****8195
    叶青137****7755
    赵珍130****9181
    李巍利137****8030
    余丹187****4544
    沈德军189****9733
    苏培勇186****6897
    楼萍萍159****9912
    李成钢181****8288
    钱超南182****5050
    董虹霞150****1358
    陆永131****0716
    庄建红138****9118

/*-----------------------------------------*/
/***********公用样式**************/
/*-----------------------------------------*/
.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;
}
.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;
}
.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;
	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);
}
}

new Vue({
    el: "#container",
    data: {
        luckyDrawShow: false,
        winner: "", //获奖者
        timer: null, //定时器
        times: 500, //抽奖速度
        len: null, //抽奖人数
        wIndex: null, //抽奖者位置
        draw: [] //抽奖者
    },
    methods: {
        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: {
        times: function() { //抽奖速度被调整后
            if (this.timer) { //如果正在抽奖中，则需要重启定时器，不然速度无法改变
                clearInterval(this.timer);
                this.timer = setInterval(function() {
                    this.getWinner();
                }.bind(this), this.times)
            }
        },
        luckyDrawShow: function() {
            if (!this.luckyDrawShow) { //弹窗关闭时，清除定时器与中奖者
                this.end();
                this.winner = "";
            }
        }
    },
    created: function() { //创建实例之后获取学员名单
        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
            })
        }
    }
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3