阅读量:0
效果图
<!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>