vue双色球
来源：互联网 发布：微信加好友软件免费版 编辑：程序博客网 时间：2024/06/05 19:45
刚开始学习vue，还有bootstarp。写了一个双色球练练手。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>双色球</title><link rel="stylesheet" href="js/bootstrap.css"><script src="js/jquery.js"></script><script src="js/bootstrap.js"></script><script src="js/vue.js"></script><style>.dis{width: 150px;height: 150px;border:5px solid;border-radius:50%;font-size: 50px;font-weight: 700;display:inline-block;text-align: center;line-height: 140px;}.disr{border-color:red;color:red;}.disl{border-color:#03FFFD;color:#03FFFD;}td{font-size: 20px;}</style><script>$(function(){var vm=new Vue({el:'.container',data:{arr:['00','00','00','00','00','00'],sl:'00',timer:[null,null,null,null,null,null,null],qiu:[],end:[],onff:true,onff2:true},methods:{star:function(){if(this.onff){this.onff=false;this.onff2=true;$(".dis").css("background","#fff");for(var i=0;i<$(".disr").length;i++){qidong(i);}function qidong(i){ vm.timer[i]=setInterval(function(){while(true){var num=bu0(Math.ceil(Math.random()*33));if(indexoff(vm.arr,num)){continue;}vm.arr[i]=num;break;}},100);}this.timer[this.timer.length-1]=setInterval(function(){num=bu0(Math.ceil(Math.random()*16));vm.sl=num;},100); }},stop:function(){if(this.onff2){this.onff2=false;var i=0;var str='';var tim=setInterval(function(){clearInterval(vm.timer[i]);$(".dis").eq(i).css("background","#FFFFD4");if(i<6){str+=vm.arr[i]+' ';}else{str+=vm.sl;}i++;if(i==7){vm.end.push(str);vm.arr.sort();vm.onff=true;clearInterval(tim);}},100);}},delall:function(){this.end=[];for(var i=0;i<this.arr.length;i++){this.arr[i]='00';}this.sl='00';}}})function bu0(num){return num<10?'0'+num:num;}function indexoff(arr,num){var off=false;for(var i in arr){if(arr[i]==num){off=true;}}return off;}})</script></head><body><div class="container"><div class="dis disr" v-for="item in arr">{{item}}</div><div class="dis disl">{{sl}}</div><div class="form-group text-center"><table class="table table-bordered table-hover"><caption class="text-center">出球顺序</caption><tr class="text-center"><td><button class="btn btn-info btn-lg " @click="star()">开始</button></td><td><button class="btn btn-danger btn-lg " @click="stop()" style="margin:0 60px">结束</button></td></tr><tr v-for="(item,index) in end"><td class="text-center">第{{index+1}}期</td><td class="text-center">{{item}}</td></tr><tr v-show="end.length!=0"><td class="text-right" colspan="2" ><button class="btn btn-danger btn-sm" @click="delall()">清空历史数据</button></td></tr><tr v-show="end.length==0"><td class="text-center" colspan="2" >暂无历史数据</td></tr></table></div></div></body></html>
