双色球随机选号

最新推荐文章于 2024-05-26 12:10:26 发布

gjx549358153

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量3.4k

点赞数

分类专栏： Web 文章标签： html JavaScript ViewUI

本文链接：https://blog.csdn.net/gjx549358153/article/details/84701006

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

双色球大家估计都买过，每次也是瞎选几个号，就想着做个随机选号的小程序。 :)
[b]先上图：[/b]
[img]http://dl2.iteye.com/upload/attachment/0105/9500/c2907782-4513-3235-bf29-b29795ed9ef5.png[/img]
[b]上代码：[/b]


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>双色球选号</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<style type="text/css">
.layoutTable {
	border-collapse: collapse;
	border-spacing: 0;
}

.layoutTable tr td {
	padding: 5px 10px;
}

.layoutTable tr td .ball {
	width: 50px;
	height: 50px;
	border-radius: 25px;
}

.layoutTable tr td .num {
	height: 50px;
	line-height: 50px;
	display: block;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
}

.layoutTable tr td .redBg{
	border: 2px solid red;
}
.layoutTable tr td .blueBg{
	border: 2px solid blue;
}

.layoutTable tr td .redBgSelected{
	background-color: red;
}
.layoutTable tr td .blueBgSelected{
	background-color: blue;
}
.layoutTable tr td .redBgSelected .num,.layoutTable tr td .blueBgSelected .num{
	color: white;
}

.left{
	float: left;
	padding-left: 100px;
}

.right{
	float: right;
	padding-right: 100px;
}
</style>

</head>
<body>

	<h1 style="text-align: center;">双色球随机选号</h1>
	<div style="padding-left: 100px;">
		<input type="button" value="生成一注" onclick="randomNums()"/>
		<span id="numStr"></span>
	</div>
	<div class="left">
		<h2>红球</h2>

		<!-- <td>
			<div class="redBallBg">
				<span class="num">1</span>
			</div>
		</td> -->

		<table id="redBalls" class="layoutTable">

		</table>

		<h2>蓝球</h2>

		<table id="blueBalls" class="layoutTable">

		</table>
	</div>

	<div class="right">
		<h2>选号记录</h2>
		<textarea id="numsList" rows="20" cols="35"></textarea>
	</div>
	<script type="text/javascript">
		$(function() {
			initBall();
		});

		//选号记录计数器
		var counts = 1;

		//产生的号码
		var nums = {
			redNums:[],
			blueNums:[]
		}

		/**
		 * 初始化
		 */
		function initBall() {

			//生成红球
			var redBalls = $("#redBalls");
			var tr = $("<tr></tr>");
			for(var i = 1;i<=33;i++){
				if(i % 10 == 1){
					var tr = $("<tr></tr>");
					redBalls.append(tr);
				}
				var td = $("<td></td>");
				tr.append(td);
				var div = $("<div></div>");
				td.append(div);
				var span = $("<span></span>")
				div.append(span);

				div.addClass("ball redBg");
				span.addClass("num");
				span.text(i);
			}

			//生成篮球
			var blueBalls = $("#blueBalls");
			var tr = $("<tr></tr>");
			for(var i = 1;i<=16;i++){
				if(i % 10 == 1){
					var tr = $("<tr></tr>");
					blueBalls.append(tr);
				}
				var td = $("<td></td>");
				tr.append(td);
				var div = $("<div></div>");
				td.append(div);
				var span = $("<span></span>")
				div.append(span);

				div.addClass("ball blueBg");
				span.addClass("num");
				span.text(i);
			}

		}

		function createRandNum(start,end){
			var num = Math.round(Math.random()*(end-start))+start;
			return num;
		}

		/**
		 * 生成一注号码(6+1)
		 */
		function randomNums(){

			var redBalls = $("#redBalls");
			var blueBalls = $("#blueBalls");
			var rs = redBalls.find(".num");
			var bs = blueBalls.find(".num");

			//清空上一注状态
			nums.redNums = [];//清空红球
			nums.blueNums = [];//清空蓝球
			//重置红球选中状态
			$.each( rs, function(i, n){
				$(n).parent().removeClass("redBgSelected");
			});
			$.each( bs, function(i, n){
				$(n).parent().removeClass("blueBgSelected");
			});

			while (nums.redNums.length <6) {
				var redNum = createRandNum(1, 33);
				if(checkNum(nums.redNums,redNum)){
					nums.redNums.push(redNum);
				}
			}

			while (nums.blueNums.length <1) {
				var blueNum = createRandNum(1, 16);
				if(checkNum(nums.blueNums,blueNum)){
					nums.blueNums.push(blueNum);
				}
			}

			//显示产生的数字
			$("#numStr").text("【" + nums.redNums.join(",") + "】 + " + nums.blueNums.join(","));
			$("#numsList").html($("#numsList").html()+("序号"+(counts++) + "："+$("#numStr").text())+"\n");

			//选中红球
			$.each( rs, function(i, n){
				for(var i = 0;i<nums.redNums.length;i++){
					if($(n).text() == nums.redNums[i]){
						$(n).parent().addClass("redBgSelected");
					}
				}

			});
			//选中蓝球
			//blueBalls
			//选中红球
			$.each( bs, function(i, n){
				for(var i = 0;i<nums.blueNums.length;i++){
					if($(n).text() == nums.blueNums[i]){
						$(n).parent().addClass("blueBgSelected");
					}
				}

			});
		}


		function checkNum(arr,num){
			var result = true;
			for(var i = 0;i<arr.length;i++){
				var temp = arr[i];
				if(num == temp) {
					result = false;
				}
			}
			return result;
		}

	</script>
</body>
</html>

只引用了Jquery。保存到本地即可运行。

gjx549358153

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
双色球随机选号

双色球大家估计都买过，每次也是瞎选几个号，就想着做个随机选号的小程序。 :) [b]先上图：[/b][img]http://dl2.iteye.com/upload/attachment/0105/9500/c2907782-4513-3235-bf29-b29795ed9ef5.png[/img][b]上代码：[/b][code="html"]双色球选号...
复制链接

扫一扫