年会抽奖页面html,index.html

年会抽奖

rel="stylesheet"

href="js/element-ui@2.4.11/lib/theme-chalk/index.css"

/>

{{ awards[currentAward].name }}({{result[currentAward].length}}/{{

awards[currentAward].count

}})

>, 奖品：{{ awards[currentAward].award }}

>

{{ item.name }}

@click="onKick(item, index)"

class="lucky-dog"

v-for="(item, index) in result[currentAward]"

:key="index"

>

{{ item.name }}

换个现代浏览器吧！

• {{ tag.name }}

v-for="(item, index) in awards"

:key="index"

:label="item.name"

:value="index"

>

{{

buttonText

}}

下一轮

size="small"

:disabled="running"

type="warning"

size="small"

class="el-icon-refresh"

@click="onReplay"

circle

>

{{players.length}}

new Vue({

el: '#app',

data: {

running: false,

awards: [],

currentAward: 0,

result: [],

players: [],

batchPlayers: [],

members: [],

},

watch: {

currentAward: function() {

this.batchPlayers = [];

},

},

computed: {

buttonDisabled: function() {

return (

this.result[this.currentAward].length >=

this.awards[this.currentAward].count || this.players.length === 0

);

},

goOn: function() {

return (

this.result[this.currentAward].length <

this.awards[this.currentAward].count &&

this.result[this.currentAward].length > 0

);

},

buttonText: function() {

if (this.running) {

return '停止';

}

if (this.goOn) {

return '继续';

}

return '开始';

},

},

methods: {

toggle: function() {

if (this.running) {

this.stop();

} else {

this.start();

}

},

getSpeed: function() {

return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];

},

start: function() {

this.running = true;

TagCanvas.SetSpeed('myCanvas', [5, 1]);

},

stop: function() {

this.running = false;

TagCanvas.SetSpeed('myCanvas', this.getSpeed());

var total = this.awards[this.currentAward].count;

this.result[this.currentAward] =

this.result[this.currentAward] || [];

var todo = total - this.result[this.currentAward].length;

var N = +localStorage.getItem('batchNumber') || 20;

var batchPlayers = [];

for (var i = 0, ln = Math.min(N, todo, this.players.length); i < ln; i++) {

var index = this.getRandomInt(0, this.players.length - 1);

batchPlayers.push(this.players.splice(index, 1)[0]);

}

//

// if (this.players.length === 0) {

// this.players = this.copy(this.members);

// this.$alert('所有人员都已中奖，剩余奖品将在现场所有人里抽取', '提示')

// }

this.batchPlayers = batchPlayers;

this.result.splice(

this.currentAward,

1,

this.result[this.currentAward].concat(batchPlayers)

);

localStorage.setItem('players', JSON.stringify(this.players));

localStorage.setItem('result', JSON.stringify(this.result));

TagCanvas.Reload('myCanvas');

},

onNext: function() {

this.batchPlayers = [];

if (this.currentAward < this.awards.length - 1) {

this.currentAward += 1;

}

},

getRandomInt: function(min, max) {

min = Math.ceil(min);

max = Math.floor(max);

return Math.floor(Math.random() * (max - min + 1)) + min;

},

init: function() {

try {

TagCanvas.Start('myCanvas', 'tags', {

textColour: null,

dragControl: 1,

decel: 0.95,

textHeight: 14,

minSpeed: 0.01,

initial: [

0.1 * Math.random() + 0.01,

-(0.1 * Math.random() + 0.01),

],

});

} catch (e) {

// something went wrong, hide the canvas container

document.getElementById('myCanvasContainer').style.display =

'none';

}

},

onReplay: function() {

var vm = this;

this.$confirm('重新抽奖会清空当前奖项的结果，无法撤销！', '确定要重新抽奖吗？', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning',

}).then(function() {

vm.batchPlayers = [];

var p = vm.result.splice(vm.currentAward, 1, []);

vm.players = vm.players.concat(p[0]);

localStorage.setItem('players', JSON.stringify(vm.players))

localStorage.setItem('result', JSON.stringify(vm.result));

});

},

onKeyup: function(e) {

console.log(e);

// 空格或回车键

if (e.keyCode === 13 || e.keyCode === 32) {

this.$refs.action.$el.click();

}

},

copy: function(obj) {

return JSON.parse(JSON.stringify(obj));

},

onKick: function(player) {

var vm = this;

var index = vm.result[vm.currentAward].indexOf(player);

this.$confirm('去掉后可继续抽一名', '去掉这名中奖者吗？', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning',

}).then(function() {

if (vm.batchPlayers.indexOf(player) > -1) {

vm.batchPlayers.splice(vm.batchPlayers.indexOf(player), 1);

}

vm.result[vm.currentAward].splice(index, 1);

localStorage.setItem('result', JSON.stringify(vm.result));

});

},

},

created: function() {

this.awards = JSON.parse(localStorage.getItem('awards')) || [];

if (this.awards.length === 0) {

location.href = 'setting.html';

}

var result = JSON.parse(localStorage.getItem('result')) || [];

for (var i = 0; i < this.awards.length; i++) {

result[i] = result[i] || [];

}

this.result = result;

this.choosed = JSON.parse(localStorage.getItem('choosed')) || {};

console.log(this.choosed);

var awards = JSON.parse(localStorage.getItem('awards')) || [];

this.rewards = awards.map(function(item, index) {

return {

level: index + 1,

name: item.name,

count: item.count,

editing: {},

};

});

console.log(this.rewards);

},

mounted: function() {

var members = JSON.parse(localStorage.getItem('members')) || window.members;

this.players = JSON.parse(localStorage.getItem('players')) || members;

this.members = this.copy(members);

localStorage.setItem('players', JSON.stringify(this.players));

var canvas = this.$refs.canvas;

canvas.width = document.body.offsetWidth;

canvas.height = document.body.offsetHeight;

this.$nextTick(function() {

this.init();

});

document.body.addEventListener('keyup', this.onKeyup)

},

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史