vue完成大乐透界面和算法

最新推荐文章于 2024-07-07 16:26:36 发布
最新推荐文章于 2024-07-07 16:26:36 发布
阅读量570 收藏 1
点赞数
分类专栏： vue JS HTML 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31151123/article/details/127322776
版权
vue 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
HTML
5 篇文章 0 订阅
订阅专栏
JS
4 篇文章 0 订阅
订阅专栏

参考大乐透玩法分为手选和机选两种，手选可以选择多倍多期多注方式。

引用了uview框架进行开发需要提前引入使用，自行去uview官网下载资源包，引入代码如下

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
Vue.use(uView);

大乐透注数算法：

//大乐透注数算法
		factorial(num){
		    if(num <= 1) {
		         return 1;      
		    }else{
		          return num * this.factorial(num-1);   
		    }
		},
		
		combination(n,m){
			var divisor = this.factorial(n-m) * this.factorial(m);
			return this.factorial(n)/divisor;
		},
		count_zhu_superlottery(r,b){
			return this.combination(r,5) * this.combination(b,2);
		},

完整代码如下

<template>
	<div class="container">
		
		<view class="u-config-wrap">
			<view class="u-config-item">
				<view class="u-item-title">模式选择</view>
				<u-subsection :current="current" :list="['手选', '机选']" @change="modeChange"></u-subsection>
			</view>
		</view>
		<view class="lotto_all">
			<!-- 手选 -->
			<view class="lotto_manual" v-if="current==0">
				<view class="u-item-title">选择前区</view>
				<div>
					<ul class="lotto_front" >
						<li :id= "item" @click="lotto_front(item)" v-for="(item, index) in arrfront" :key="index">{{ item }}</li>
					</ul>
				</div>
				
				<view class="u-item-title">选择后区</view>
				<div>
					<ul class="back_front"  >
						<li :id= "item1" @click="lotto_back(item1)" v-for="(item1, index1) in arrback" :key="index1">{{ index1+1 }}</li>
					</ul>
				</div>
				<div id="s_lotto" class=select_area>
					您选了{{num}}注，共{{2*num}}.00元
				</div>
				<u-button type="success" @click="confirm_lotto" >确认选号</u-button>
				<u-popup v-model="show" mode="center" border-radius="14">
							<view>{{description}}</view>
							<view class="confrim-btn">
							<u-button @click="show = false;">知道了</u-button>
							</view>
				</u-popup>
				<view class="u-item-title">已选号码</view>
				<u-table>
						<u-tr>
							<u-th>类型</u-th>
							<u-th>红球</u-th>
							<u-th>篮球</u-th>
							<u-th>注数</u-th>
						</u-tr>
						<u-tr v-for="(item2,index2) in confirm_lottos" :key="index2">
							<u-td>{{item2.ltype}}</u-td>
							<u-td>{{item2.larrfront}}</u-td>
							<u-td>{{item2.larrback}}</u-td>
							<u-td>{{item2.nums}}</u-td>
						</u-tr>

					</u-table>
				
				
			</view>
			<!-- 机选 -->
			<view class="lotto_machine" v-if="current==1">
				<ul class="ssq_wrap" >
					
				</ul>
			</view>
		</view>
		<view>您选了{{nums}}注</view>
		<view class="beitou_area">
			倍投:<u-number-box v-model="multiple" :min="1" :max="150" @change="Multiple"></u-number-box>
		</view>
		<view >
			期数:<u-number-box v-model="periods" :min="1" :max="15" @change="valChange"></u-number-box>
		</view>
		<view  class="append">
			<u-checkbox-group >
						<u-checkbox name="append"  v-model="checked" @change="checkboxChange" >
							追加投注 <span>单注+1元，奖金最高可到1600万元</span>
						</u-checkbox >
					</u-checkbox-group>
		</view>
		<view>共 {{money}} 元 + 代买服务费：{{service_money}} 元 = {{moneys}} 元</view>
		<u-button type="success">提交订单</u-button>
	</div>
	
</template>

<script>
const NET = require('../../utils/request');
const API = require('../../config/api');
export default {
	components: {},
	data() {
		return {
			title: '',
			description: '',
			show:false,
			arr: [],
			control: true,
			current:0,//模式选择
			flag:true,//是否选中
			num:0,//注数
			nums:0,//总注数
			multiple:1,//倍数
			periods:1,//期数
			append:'',//追加
			checked:false,
			arrfront:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],
			arrback:[101,102,103,104,105,106,107,108,109,110,111,112],
			arrfront_confirm:[],//选择的红球
			arrback_confirm:[],//选择的篮球
			confirm_lottos :[],//选中的号
			money:'',//下注钱
			service_money:'',//服务费
			moneys:'',//总价

		};
	},
	mounted() {
		var that = this;
		setTimeout(() => {
			that.arr = [];
			function arrFun() {
				const numArr = [];
				const time = setInterval(() => {
					// 生成红球
					const redNum = Math.floor(Math.random() * (1 - 34) + 34);
					// 蓝球
					const blueNum = Math.floor(Math.random() * (1 - 17) + 17);
					numArr.push(redNum);
					// 红球去重
					const n = arrRemoval(numArr);
					for (let i = 1; i < n.length; i++) {
						// 获取当前遍历数字。
						const currentNum = n[i];
						// 拿到上一个索引值进行比较
						let prevIndex = i - 1;
						// 对红球进行排序
						while (prevIndex >= 0 && n[prevIndex] > currentNum) {
							n[prevIndex + 1] = n[prevIndex];
							prevIndex--;
						}
						n[prevIndex + 1] = currentNum;
					}
					if (n.length === 6) {
						n.push(blueNum);
						that.arr.push(n);
						clearInterval(time);
						// return n
					}
				}, 10);
				function arrRemoval(array) {
					const set = [...new Set(array)];
					return set;
				}
			}
			const intervalFun = setInterval(() => {
				arrFun();
				// 机选多组， n+1
				if (that.arr.length === 4) {
					clearInterval(intervalFun);
				}
			}, 100);
		}, 2000);
	},
	methods: {
		//模式选择
		modeChange(index) {
			this.control = true;
			if(index == 0) {
				this.current=0
				this.control = true;
			} else {
				this.current=1
				this.control = false;
			}


		},
		//获取点击的值
		
		lotto_front(item){
			this.flag=this.arrfront_confirm.includes(item);
			if(this.flag==true){
				document.getElementById(item).className="is-boll";
				this.arrfront_confirm.splice(this.arrfront_confirm.indexOf(item),1);
				let m=this.arrfront_confirm.length;
				let n=this.arrback_confirm.length;
				if(m>4&&n>1){
					document.getElementById("s_lotto").className="select_areas";
					console.log("sa",this.num)
					this.num= this.count_zhu_superlottery(m,n)
					//alert("sa",this.num)
				}
				if(m<5||n<2){
					document.getElementById("s_lotto").className="select_area";
				}
				console.log(document.getElementById(item).innerHTML);
			}
			else{
				document.getElementById(item).className="red-boll-active";
				let frontval=parseInt(document.getElementById(item).innerHTML);
				this.arrfront_confirm.push(frontval);
				let m=this.arrfront_confirm.length;
				let n=this.arrback_confirm.length;
				if(m>4&&n>1){
					document.getElementById("s_lotto").className="select_areas";
					console.log("sa",this.num)
					this.num= this.count_zhu_superlottery(m,n)
					//alert("sa",this.num)
				}
				console.log(this.arrfront_confirm);
			}
			
		},
		lotto_back(item1){
			
			this.flag=this.arrback_confirm.includes(item1-100);
			if(this.flag==true){
				document.getElementById(item1).className="is-boll";
				this.arrback_confirm.splice(this.arrback_confirm.indexOf(item1-100),1);
				let m=this.arrfront_confirm.length;
				let n=this.arrback_confirm.length;
				if(m>4&&n>1){
					document.getElementById("s_lotto").className="select_areas";
					console.log("sa",this.num)
					this.num= this.count_zhu_superlottery(m,n)
					//alert("sa",this.num)
				}
				if(m<5||n<2){
					document.getElementById("s_lotto").className="select_area";
				}
				console.log(this.arrback_confirm);
			}
			else{
				document.getElementById(item1).className="blue-boll-active";
				let frontval=parseInt(document.getElementById(item1).innerHTML);
				this.arrback_confirm.push(frontval);
				let m=this.arrfront_confirm.length;
				let n=this.arrback_confirm.length;
				if(m>4&&n>1){
					document.getElementById("s_lotto").className="select_areas";
					console.log("sa",this.num)
					this.num= this.count_zhu_superlottery(m,n)
					//alert("sa",this.num)
				}
				
				console.log(this.arrback_confirm);
			}
			
		},
		confirm_lotto(){
			if(this.arrfront_confirm.length<5){
				this.show=true;
				this.description="请至少选择5个红球"
			}
			else if(this.arrback_confirm.length<2){
				this.show=true;
				this.description="请至少选择2个蓝球"
			}
			else if(this.arrfront_confirm.length>5 ||this.arrback_confirm.length>2){
				this.confirm_lottos.push({ltype: "复式",larrfront: this.arrfront_confirm.toString(),
				larrback: this.arrback_confirm.toString(),nums: this.num,})
				this.nums+=this.num;
				this.money=this.nums*this.periods*this.multiple*2;
				this.service_money=Math.round(this.money * 100*0.02) / 100;
				this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
			}
			else{
				this.confirm_lottos.push({ltype: "单式",larrfront: this.arrfront_confirm.toString(),
				larrback: this.arrback_confirm.toString(),nums: this.num,})
				this.nums+=this.num;
				this.money=this.nums*this.periods*this.multiple*2;
				this.service_money=Math.round(this.money * 100*0.02) / 100;
				this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
			}
		},
		
		factorial(num){
		    if(num <= 1) {
		         return 1;      
		    }else{
		          return num * this.factorial(num-1);   
		    }
		},
		
		combination(n,m){
			var divisor = this.factorial(n-m) * this.factorial(m);
			return this.factorial(n)/divisor;
		},
		count_zhu_superlottery(r,b){
			return this.combination(r,5) * this.combination(b,2);
		},
		//是否多倍
		Multiple(e) {
			this.multiple=e.value
			console.log('当前值为: ' + e.value)
			this.money=this.nums*this.periods*this.multiple*2;
			this.service_money=Math.round(this.money * 100*0.02) / 100;
			this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
		},
		//是否多期
		valChange(e) {
			this.periods=e.value
			console.log('当前值为: ' + e.value)
			this.money=this.nums*this.periods*this.multiple*2
			this.service_money=Math.round(this.money * 100*0.02) / 100;
			this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
		},
		//是否追加
		checkboxChange(e) {
					 //console.log(e);
					 if(e.value==true){
						 this.money=this.nums*this.periods*this.multiple*3
						 this.service_money=Math.round(this.money * 100*0.02) / 100;
						 this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
					 }
					 else{
						 this.money=this.nums*this.periods*this.multiple*2
						 this.service_money=Math.round(this.money * 100*0.02) / 100;
						 this.moneys=Math.round(this.money * 100*0.02) / 100+this.money;
					 }
					
				},
	},
	
};
</script>

<style lang="scss" scoped>
page {
	background: #cccccc;
}
.container {
	margin: 0 auto;
}
.lotto_all{
	.lotto_manual{
		ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			flex-direction: row;
			list-style: none;
		}
		ul li{
			width: 68rpx;
			height: 68rpx;
			border-radius: 68rpx;
			line-height: 68rpx;
			text-align: center;
			margin: 6rpx;
			background-color: #ffffff;
		}
		.is-boll{
			color: #000;
			background: white;
		}
		.red-boll-active{
			color: #fff;
			background: red;
		}
		.blue-boll-active{
			color: #fff;
			background: blue;
		}
	}
	.select_area{
		display: none;
	}
	.select_areas{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: block;
	}
	
	.confirm_area{
		    border: #ccc 1px solid;
		    min-height: 120px;
		    padding: 6px;
		    background: #fff;
	}
	
	
}
.beitou_area{
		background: #ffffff;
		display: flex;
		flex-direction: row;
	}
.append{
		//height: 40rpx;
		padding:10rpx 10rpx ;
		background: #ffffff;
		span{
			font-size: 24rpx;
			color: red;
		}
	}

</style>

最终效果展示图如下，后续不断优化代码和界面样式

 

 

variation8
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue 刮刮乐抽奖H5项目
weixin_62908035的博客
08-16 930
vue 刮刮乐H5项目
Vue实现福利彩票机选号码，彩票号码生成思路
益添的博客
07-23 4170
彩票号码机选生成思路与实现概述1、基本变量准备2、随机数生成方法3、生成红区数组号码4、对生成的数组进行排序检验数据生成效果页面显示效果 概述 今天看了彩票开奖，想到买彩票时有自选和机选两种，于是想了一想彩票号码的生成思路，觉得有些意思就做来玩玩。只要有思路，用什么语言实现都无所谓，最近用Vue比较多，就以这个作为一个例子。 1、基本变量准备 为了方便后续的程序拓展，我们先定义几个常用参数： 红...
python大乐透算法,测试大le透算法
weixin_34460380的博客
03-26 2238
0x01 背景最近在补python的课程写了下大乐透的生成算法 (适用于其他的中奖游戏)0x02 贴代码from random import randintdef getRandomList(start,stop,count):list1 = []while len(list1)rand_number = randint(start,stop)if rand_number in list1:con...
VUE多用户竞彩体彩店管理系统源码分享,SAAS架构
最新发布
greenlot的专栏
07-07 570
u-search :showAction="false" placeholder="请输入关键字" v-model="keyword" @search='search' :animation="true"></u-search>-- <u-search :showAction="showBtn" placeholder="请输入关键字" v-model="keyword" @search='search'></u-search> -->textNoMore: '--已经到底了哦--',
体彩 超级大乐透(C++) 测测你的中奖概率
qq_51110792的博客
05-13 1332
体彩超级大乐透中奖概率如何，c++模拟彩票，你是否是被光选中的人。
uniapp(vue)：js实现双色球开奖走势图带连线
sunluyi的博客
03-14 2446
uniapp(vue)：js实现双色球开奖走势图带连线
基于Vue和TypeScript的物流数据大屏界面设计源码
04-05
本资源提供了一套基于Vue和TypeScript的物流数据大屏界面的设计源码，包含42个文件，其中包括16个PNG图片文件，12个Vue组件文件，以及4个TypeScript源代码文件。此外，还包括3个JSON配置文件，2个JavaScript脚本文件...
基于Vue3和Typescript的数据大屏练习项目设计源码
04-12
本数据大屏练习项目基于Vue3和Typescript开发，包含45个文件，包括SVG图形、JSON配置文件、TypeScript源代码、CommonJS模块文件、Vue组件、开发模式和生产模式配置文件、测试文件、ESLint忽略文件和GIT忽略文件。...
基于Vue和Echart的大数据可视化大屏展示模板设计源码
04-12
本大数据可视化大屏展示模板基于Vue和Echart框架开发，包含46个文件，包括Vue组件、JavaScript脚本、PNG图片、SCSS样式表、JSON配置文件、GIT忽略文件、LICENSE文件、Markdown文档、ICO图标和HTML页面。系统实现了...
基于SpringBoot和Vue的推荐算法电商平台源码
03-25
项目概述：基于SpringBoot和Vue.js的电商平台，集成了协同过滤推荐算法，致力于提供个性化的网上购物体验。该项目使用Java为主要开发语言，辅以Vue.js、JavaScript、CSS和HTML等技术栈。 技术构成： - Java文件：共...
详解vue的diff算法原理
08-27
在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新节点？ 当数据发生变化...
Lottery-project:彩票项目
04-28
#彩票应用# 一款彩票购买webapp,内含双色球、大乐透、福彩、排列三、排列五、七乐彩、七星彩 &应用技术 vue+vue-router+vuex+ES6+webpack+css3 &项目简述 该项目有30多个页面，应用组件化开发，页面切换动画效果，摇一摇机选等 demo效果预览
Vue实现刮刮乐项目
FGGIT的博客
02-02 983
Vue实现刮刮乐项目
Vue2按钮组件（Button）
Mr Dear的博客
12-07 7140
Vue2封装的按钮组件
综合设计ui 彩票设计基础界面搭建
被推倒的穹妹的专栏
05-10 575
1.先搭建基础界面   TabBarController上添加5个NavigationController 由于给定的图片是直接加上文字的  所以这里要重写TabBarController TabBarController   可以看成一个View加上5个按钮    注意点 （1）首先要移除系统自带的tabbar  因为系统的tabbar是readonly  不移除不能重新创建  （2）UI
前端 Vue实现彩票走势图
fengGer的博客
08-30 1681
Vue结合Jq以及canvas的使用，完成简单的彩票走势图
大乐透号码随机生成与排序
axwh43098的博客
10-30 3507
前面两篇介绍了两个非常简单的排序算法，本篇介绍排序算法的一个简单应用——对大乐透随机号码进行排序。 由于工作中涉及很多前端的开发，所以对前端技术有一定了解，前端的一个好处是可以直观地看到页面的布局。每次下班回家的路上总会路过一家彩票代售点，偶尔和同事一起去买几注机选的，所谓机选，其实就是机器随机生成的号码，而且是已经排序好的随机号码。于是就萌生了写一个大...
python 爬取大乐透开奖结果
o0o0o0D的博客
05-04 2339
#coding=utf-8 #下面中文注释不支持 所以开头加 "#coding=utf-8" # 获取近期大乐透开奖结果, 并给出自己猜中的个数 import requests # 这个API能够免费得到近期开奖结果, url里的-20代表获取近20期的开奖信息 url = "http://f.apiplus.net/dlt-20.json" req = requests.get(u...
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
ejunda的博客
06-30 7879
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

variation8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值