前端使用JavaScript实现彩票机选随机出票
首先,彩票站的机选出票是怎么实现的?重点就是随机出彩票号码。
JavaScript如果要实现随机出彩票号码需要怎么做?
我们先想一下,在JavaScript里面有那些方法可以使用:
1、数组:数组作为红号的主要容器
2、for循环:for循环实现6位的随机红号
3、Math.floor/Math.random方法:实现彩票号码的随机出现
4、JavaScript函数封装
想清楚上面这些方法,我们现在就可以写demo了。
首先上代码,代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>按规律出数字</title>
<script src="jquery-1.9.0.min.js"></script>
<style>
.tzc_cp{
width: 100%;
height: 300px;
font-size: 65px;
line-height: 300px;
color: white;
background: rgba(57, 206, 252, 0.699);
font-weight: 600;
text-align: center;
margin: 0 auto;
}
#tzc_button{
width: 300px;
height: 50px;
background: red;
color: white;
font-weight: 600;
font-size: 30px;
line-height: 50px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="tzc_cp">机选彩票号码出票</div>
<button id="tzc_button">出票</button>
<script>
//js简单实现彩票按规律出票
function lottery() {
var arr_cs=[];
var j_cs=Math.floor(Math.random()*14+1);
for (let i = 0; i < 6; i++) {
var i_cs=Math.floor(Math.random()*30+1);
arr_cs.push(i_cs);
}
$(".tzc_cp").html(arr_cs+"+"+j_cs);
}
$("#tzc_button").on("click",function(){
lottery();
})
</script>
</body>
</html>
效果图如下:
喜欢的就点个赞,欢迎关注up主