前端 :用HTML ,JS写一个 双色球彩票中将机制,因为时间不够,加上本人懒没有用CSS美化界面,多包涵

news2025/2/26 8:03:56

1.HTML

<body>
		<div id="content">
			<div id = "top">
				<div id = "username">用户号码:</div>
				<div id = "qiu">
					<span id = "red">红球:</span>
					<input id = "redqiu1"/>
					<input id = "redqiu2"/>
					<input id = "redqiu3"/>
					<input id = "redqiu4"/>
					<input id = "redqiu5"/>
					<input id = "redqiu6"/>
					<span id = "blue">蓝球:</span>
					<input id = "blueqiu7"/>
				</div>
			</div>
			<div id = "center">
				<div id = "zjname">中奖号码:</div>
				<div id = "qiu1">
					<span id = "red1">红球:</span>
					<div class="redqiu" id = "red01"></div>
					<div class="redqiu" id = "red02"></div>
					<div class="redqiu" id = "red03"></div>
					<div class="redqiu" id = "red04"></div>
					<div class="redqiu" id = "red05"></div>
					<div class="redqiu" id = "red06"></div>
					<span id = "blue01">蓝球:</span>
					<div id = "blueqiu01"></div>
				</div>
			</div>
			<div id = "bottom">
				<div id ="outcome">结果为:</div>
				<div id="kai">开奖</div>
			</div>
		</div>
	</body>

2.JS

<script type="text/javascript">
	var nums= [];
	var b = 0;
	var usernums = [];
	var o = [];
	var l = 1;
	// var zjnum =[];
	function isSave(nums,len,tag)
	{
	    for(var i = 0;i < len;i++)
	    {
	        if(nums[i] == tag)
	        {
	            return 1;
	        }
	    }
	    return 0;
	}
	// function print( nums,len)
	// {
	//     for(int i = 0;i < len;i++)
	//     {
	//         cout << nums[i] << ",";
	//     }
	//     cout << endl;
	// }
	function zjnums(){
		for(var i = 0;i<7;i++)
		{
			if(i != 6)
			{
				var x = Math.random()*33+1;
				 x = Math.floor(x);
				var t = isSave(nums,6,x);
					if(t)
					{
						i--;
						continue;
					}
					else{
						// $("#redqiu").html(x);
						nums[i] = x;
					}
			}else{
					var y = Math.random()*16+1;
					 y = Math.floor(y);
					// $("#blueqiu01").html(y);
					nums[6] = y;
					}
		$("#redqiu").html("机选的号码为"+ ":" + nums);
		}
	}
	function xz(s,w){
		if(w == 6){
			if(s<0 || s >16){
				$("#outcome").html("号码有误");
				return 0;
			}else{
				usernums[w] = s;
				return 1;
			}
			
		}else{
			if(s<0 || s > 33){
				$("#outcome").html("号码有误");
				return 0;
			}else{
				usernums[w] = s;
				return 1;
			}
		}
	}
	function getusernums(){
		o[0] = xz($("#redqiu1").val(),0);
		o[1] = xz($("#redqiu2").val(),1);
		o[2] = xz($("#redqiu3").val(),2);
		o[3] = xz($("#redqiu4").val(),3);
		o[4] = xz($("#redqiu5").val(),4);
		o[5] = xz($("#redqiu6").val(),5);
		o[6] = xz($("#blueqiu7").val(),6);
	}
	function timezjnum(){
		var x = Math.random()*33+1;
		 x = Math.floor(x);
		var y = Math.random()*16+1;
		 y = Math.floor(y);
		if(b<20){
			$("#red01").html(x);
		}
		else if(b ==20){
			$("#red01").html(nums[0]);
		}
		else if(b < 40){
			$("#red02").html(x);
		}
		else if(b == 40){
			$("#red02").html(nums[1])
		}
		else if(b<60){
			$("#red03").html(x);
		}
		else if(b == 60){
			$("#red03").html(nums[2])
		}
		else if(b<80){
			$("#red04").html(x);
		}
		else if(b == 80){
			$("#red04").html(nums[3])
		}
		else if(b<100){
			$("#red05").html(x);
		}
		else if(b == 100){
			$("#red05").html(nums[4])
		}
		else if(b<120){
			$("#red06").html(x);
		}
		else if(b == 120){
			$("#red06").html(nums[5])
		}
		else if(b<140){
			$("#blueqiu01").html(y);
		}
		else if(b == 140){
			$("#blueqiu01").html(nums[6])
		}else{
			b=0;
			clearInterval(id);
			zhong();
			console.log(nums);
			console.log(usernums);
		}
		b++;
		
	}
	function zhong(){
		var x = 0;
		for (var i = 0; i < 7; i++) {
			for(var j = 0;j<7;j++){
				if(nums[i] == usernums[j]){
					x++;
				$("#zjname").html(zjnums[i]);	
				}
			}
		}
		
		switch(x)
		{
			case 3:
			$("#outcome").html("5元");
			break;
			case 4:
			$("#outcome").html("50元");
			break;
			case 5:
			$("#outcome").html("500元");
			break;
			case 6:
			$("#outcome").html("50000元");
			break;
			case 7:
			$("#outcome").html("20000000元");
			break;
			default:
			$("#outcome").html("谢谢惠顾");
			break;
		}
	}
	$("#kai").click(function(){
		nums= [];
		b = 0;
		usernums = [];
		o = [];
		l = 1;
		getusernums();
		for(var i = 0; i < 7; i++){
			if(o[i] == 0){
				l = 0;
			}	
		}
		if(l){
			id = setInterval(timezjnum,80);
			zjnums();
			
		}
		
		
		
		
	});
	
</script>

效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1148382.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一体化模型图像去雨+图像去噪+图像去模糊(图像处理-图像复原-代码+部署运行教程)

本文主要讲述了一体化模型进行去噪、去雨、去模糊&#xff0c;也就是说&#xff0c;一个模型就可以完成上述三个任务。实现了良好的图像复原功能&#xff01; 先来看一下美女复原.jpg 具体的&#xff1a; 在图像恢复任务中&#xff0c;需要在恢复图像的过程中保持空间细节…

基于深度学习的安全帽识别检测系统(python OpenCV yolov5)

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、研究的内容与方法二、基于深度学习的安全帽识别算法2.1 深度学习2.2 算法流程2.3 目标检测算法2.3.1 Faster R-CNN2.3.2 SSD2.3.3 YOLO v3 三 实验与结果分析3.1 实验数据集3.1.1 实验数据集的构建3.1.2 数据…

大数据-Storm流式框架(八)---Storm案例

中国移动项目部署文档 一、项目架构 二、启动集群 1、启动Zookeeper集群 2、启动Hbase&#xff08;完全分布式需要先启动Hadoop集群&#xff09; 在conf/hbase-env.sh中设置JAVA_HOME 在conf/hbase-site.xml中&#xff0c;仅需要指定hbase和zookeeper写数据的本地路径。默…

【Python学习】—Python基础语法(七)

一、异常 当检测到一个错误时&#xff0c;Python解释器无法继续执行&#xff0c;反而出现一些提示错误。 基本语法&#xff1a; try:可能发生的错误 except:如果出现异常执行的代码二、异常的传递 三、模块 import time print("你好") time.sleep(5) print("…

知识管理的PSCA循环

前言&#xff1a;在PMP备考第二章《环境》部分&#xff0c;面对项目的复杂性&#xff0c;提到了知识管理的PSDA循环&#xff0c;本篇博客主要谈一下什么是PSDA循环&#xff0c;以及我们面对复杂的环境&#xff0c;如何提升自己的学习能力和认知水平。 目录 知识的冰山模型 P…

我的架构复盘

1、背景 我目前公司研发中心担任软件研发负责人&#xff0c;研发中心分为3组&#xff0c;总共有30多人。研发中心主要开发各类生产辅助工具&#xff0c;比如巡检、安全教育等系统。系统不对外&#xff0c;只在公司内部使用。 就我个人来说&#xff0c;作为研发负责人&#xf…

高级深入--day44

Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架&#xff0c;但是不支持分布式&#xff0c;Scrapy-redis是为了更方便地实现Scrapy分布式爬取&#xff0c;而提供了一些以redis为基础的组件(仅有组件)。 pip install scrapy-redis Scrapy-redis提供了下面四种组件&a…

STM32G030F6P6 芯片实验 (一)

STM32G030F6P6 芯片实验 (一) 淘宝搞了几片, 没试过 G系列, 试试感觉. 先搞片小系统版: 套 STM32F103C8T6小系统板格式. 原理图: (1) Ref 有点跳, 从 STM32F103C8T6 系统板改的, 没重编号. (2) Type-C 纯给电, 砍了 16pin的, 直接换 6pin的。 (3) 测试LED放 B2。 (4) 测试底…

Java基于SpringBoot+Vue的网上图书商城管理系统(附源码,教程)

文章目录 1. 简介2 技术栈3 系统功能4系统设计4.1数据库设计 5系统详细设计5.1系统功能模块5.1系统功能模块5.2管理员功能模块 源码下载地址 1. 简介 本次设计任务是要设计一个网上图书商城&#xff0c;通过这个系统能够满足网上图书商城的管理功能。系统的主要功能包括首页、…

javascript中各种风骚的代码

1.判断数值符号是否相同 function numericSymbolsIsEqual(x: number, y: number): boolean {return (x ^ y) > 0}console.log(numericSymbolsIsEqual(1, 1))console.log(numericSymbolsIsEqual(-1, 1))console.log(numericSymbolsIsEqual(1, -1))console.log(numericSymbols…

利用STM32CubeMX和keil模拟器,3天入门FreeRTOS(0) —— 创建工程

前言 &#xff08;1&#xff09;FreeRTOS是我一天过完的&#xff0c;由此回忆并且记录一下。个人认为&#xff0c;如果只是入门&#xff0c;利用STM32CubeMX是一个非常好的选择。学习完本系列课程之后&#xff0c;再去学习网上的一些其他课程也许会简单很多。 &#xff08;2&am…

spring-代理模式

代理模式 一、概念1.静态代理2.动态代理 一、概念 ①介绍 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标 方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类间接调用。让不…

Centos虚拟机安装配置与MobaXterm工具及Linux常用命令

目录 一、Centos操作系统 1.1 Centos介绍 1.2 Centos虚拟机安装 1.3 配置centos的镜像 1.4 虚拟机开机初始设置 1.4.1 查看网络配置 1.4.2 编辑网络配置 二、MobaXterm工具 2.1 MobaXterm介绍 2.2 MobaXterm安装 2.3 切换国内源 三、Linux常用命令和模式 3.1 …

leetCode 260.只出现一次的数字 ||| + 位运算

260. 只出现一次的数字 III - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答案。你必须设计并实现线性时间复杂度的算法且…

微信小程序 人工智能志愿者服务活动报名系统uniAPP+vue

基于java语言设计并实现了人工智能志愿者服务APP。该APP基于B/S即所谓浏览器/服务器模式&#xff0c;应用SpringBoot框架与HBuilder X技术&#xff0c;选择MySQL作为后台数据库。系统主要包括用户、志愿活动、活动报名、活动签到、服务职责、服务排行等功能模块。 本文首先介绍…

C++之回调函数使用和不使用using、typedef、function定义总结(二百五十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

prometheus服务发现

Consul简介 ◼ 一款基于golang开发的开源工具&#xff0c;主要面向分布式&#xff0c;服务化的系统提供服务注册、服务发现和配置管理 的功能 ◼ 提供服务注册/发现、健康检查、Key/Value存储、多数据中心和分布式一致性保证等功能 部署 curl -LO https://releases.hashicorp…

单片机与进制数

目录 一:数字系统的由来 A:二进制 1: 基础概念 2: 二进制运算 3:二进制的计算 B:八进制 1:基础概念 C:16进制表 四:单片机中的进制数 一:数字系统的由来 1:远古时代:结绳计数 2:非位置化数字系统: 罗马数字 非位置化数字系统: 一个符号在不同的位置只会表达同样的意思…

Gitee 发行版

Gitee 发行版 1、Gitee 发行版管理2、项目仓库中创建发行版本3、项目中导入3.1 gradle配置3.2 dependencies执行正常&#xff0c;包没有下载 1、Gitee 发行版管理 Gitee 发行版&#xff08;Release&#xff09;管理 2、项目仓库中创建发行版本 按照Gitee官网操作就行 3、项目…

N-130基于springboot,vue校园社团管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plus 本系…