js实现彩票开奖效果与实现 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.box {
				height: 600px;
				background: rgba(216, 205, 205, 1);
			}

			.content {
				height: 70%;
				padding-top: 100px;
				text-align: center;
			}

			.context {
				margin: 20px 0;
			}

			.context span {
				display: inline-block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				border-radius: 50%;
				color: #fff;
				background: rgba(192, 42, 42, 1);
				margin-right: 15px;
			}

			.context span:nth-child(5) {
				margin-right: 30px;
			}

			.context span:nth-child(7) {
				margin-right: 0;
			}

			.context span:nth-child(6),
			.context span:nth-child(7) {
				background: rgba(47, 40, 153, 1);
			}

			.button {
				width: 100%;
			}

			.button input {
				width: 180px;
				height: 40px;
				line-height: 40px;
				display: block;
				margin: 0 auto;
				background: rgba(192, 42, 42, 1);
				color: #fff;
				font: normal 400 14px '微软雅黑';
				border-radius: 5px;
				outline: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				<h3>客官, 来两注?</h3>
			</div>
			<div class="button">
				<input type="button" value="随机五注" onclick="fiveNumStr()">
			</div>
		</div>
		<script type="text/javascript">
			// 定义 randomNumber方法, 随机输出数组
			function randomNumber(num) {
				// 定义 strArr方法, 生成数组
				function strArr(num) {
					var numberAarry = []
					for (var i = 0; i < num; i++) {
						numberAarry[i] = i + 1
					}
					return numberAarry
				}
				// 获得数组
				var numberAarry = strArr(num)
				// 将数组元素随机排序
				numberAarry.sort(function() {
					return 0.5 - Math.random()
				})
				// 小于10，前面加0
				for (var i = 0; i < numberAarry.length; i++) {
					if (numberAarry[i] < 10) {
						numberAarry[i] = '0' + numberAarry[i]
					} else {
						numberAarry[i] = String(numberAarry[i])
					}
				}
				return numberAarry
			}

			// 用 fiveIsClick 限制用户频繁点击按钮
			var fiveIsClick = true

			function fiveNumStr() {
				if (fiveIsClick) {
					// 设为false, 不可再次点击
					fiveIsClick = false
					var content = document.getElementsByClassName('content')[0]
					var innerText = content.getElementsByClassName('context')
					var ulNode = content.getElementsByTagName('ul')[0]
					// 先删除已创建的ul及其字节点, 再新增
					// 为什么要删除再添加节点呢, 是因为不增删节点只改变数字虽然渲染更快, 但是区别太小, 失去了动态效果
					// 当然, 如果你不需要删除再添加节点也行, 以下代码稍改动一下就好了
					if (ulNode) {
						content.removeChild(ulNode)
					}
					var ul = document.createElement('ul')
					// 用ul节点长度判断是否存在ul
					var ulLength = content.getElementsByTagName('ul').length
					var index = 0
					// 计时器，每隔0.5秒新增一组
					var interval = setInterval(function() {
						index++
						if (ulLength < 1) {
							var li = document.createElement('li')
							li.setAttribute('class', 'context')
							ul.appendChild(li)
							content.appendChild(ul)
							// 遍历li节点
							var context = document.getElementsByClassName('context')[index - 1]
							// 得到顺序被打乱的前区35个数字数组
							var randomLeft = randomNumber(35)
							// 大乐透前区数组
							var leftNum = [randomLeft[0], randomLeft[1], randomLeft[2], randomLeft[3], randomLeft[4]]
							// 从小到大排序
							leftNum.sort(function(a, b) {
								return a - b
							})
							// 得到顺序被打乱的后区12个数字数组
							var randomRight = randomNumber(12)
							// 大乐透后区数组
							var rightNum = [randomRight[0], randomRight[1]]
							rightNum.sort(function(a, b) {
								return a - b // 从小到大排序
							})
							// 节点模版，用于给每个球添加样式
							var spanNode = "<span>" + leftNum[0] + "</span>" + "<span>" + leftNum[1] + "</span>" + "<span>" + leftNum[2] +
								"</span>" +
								"<span>" + leftNum[3] + "</span>" + "<span>" + leftNum[4] + "</span>" + "<span>" + rightNum[0] + "</span>" +
								"<span>" + rightNum[1] + "</span>"
							// 节点已添加，再添加spanNode节点模版
							context.innerHTML = spanNode
							// li节点数量达到5个，就停止计时器
							if (index >= 5) {
								clearInterval(interval)
							}
						}
					}, 500)
					// 阻止按钮重复点击，间隔3秒
					setTimeout(function() {
						fiveIsClick = true
					}, 3000)
				}
			}
		</script>
	</body>
</html>

 

posted @ 2020-04-01 22:19  JackieDYH  阅读(54)  评论(0)  编辑  收藏  举报  来源