效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>活动中心</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: none;
width: 100%;
}
body {
background-color: #F6FBF7;
}
.textinput {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 5px;
}
.container {
border-radius: 5px;
border: solid 1px #ECECEC;
font-weight: bold;
background-color: white;
text-align: left; /* 确保文本居左 */
margin: 20px auto;
width: 90%;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px; /* 调整子元素之间的间距 */
}
.number {
background-color: #f0f0f0;
padding: 10px 20px;
border-radius: 5px;
width: calc((100% / 4) - 48px); /* 每行4个，减去间距 */
text-align: center;
}
</style>
</head>
<body>
<div style="border: solid 1px #ECECEC;font-weight:bold;background-color:white;line-height:50px;text-align:center;margin:0px auto;width:100%;">随机数</div>
<div style="border-radius: 5px; border: solid 1px #ECECEC; font-weight: bold; background-color: white; text-align: center; margin: 20px auto; width: 90%; padding: 10px;">
<div style="display:flex;justify-content:space-between;align-items:center;line-height:45px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<div style="width: 100px;">最小值：</div>
<input id="txt_min" type="text" class="textinput" />
</div>
<div style="display:flex;justify-content:space-between;align-items:center;">
<div style="width: 180px; ">最大值：</div>
<input id="txt_max" type="text" class="textinput" />
</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; line-height: 45px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<div style="width: 100px; ">个数：</div>
<input id="txt_count" type="text" class="textinput" />
</div>
<div style="display:flex;justify-content:space-between;align-items:center;">
<div style="width:180px;">运行重复：</div>
<div style="display: flex; justify-content:flex-start; align-items: center;">
是<input id="txt_repeat_yeas" name="txt_repeat" type="radio" />
否<input id="txt_repeat_no" name="txt_repeat" checked type="radio" />
</div>
</div>
</div>
<button id="btn_generate" style="margin-top: 10px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px;">生成</button>
</div>
<div class="container">
<!-- 这里将动态生成数字 -->
<div class="number">暂无</div>
</div>
<script src="~/Content/ApiClound/Js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn_generate').click(function () {
var min = parseInt($('#txt_min').val(), 10);
var max = parseInt($('#txt_max').val(), 10);
var count = parseInt($('#txt_count').val(), 10);
var allowRepeat = $('#txt_repeat_yeas').is(':checked');
if (isNaN(min) || isNaN(max) || isNaN(count)) {
alert('请输入有效的数字');
return;
}
if (min > max) {
alert('最小值不能大于最大值');
return;
}
if (count > (max - min + 1) && !allowRepeat) {
alert('生成的个数不能大于区间范围');
return;
}
var numbers = [];
while (numbers.length < count) {
var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
if (!allowRepeat && numbers.includes(randomNumber)) {
continue;
}
numbers.push(randomNumber);
}
$('.container').empty();
numbers.forEach(function (number) {
$('.container').append('<div class="number">' + number + '</div>');
});
});
});
</script>
</body>
</html>