网页主界面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成随机数网页</title>
<style type="text/css">
div{
text-align:center;
}
a:hover{
color:gold;
}
a:active{
color:Cyan;
}
.copyright{
font-size: small;
font-weight:lighter;
}
</style>
</head>
<body style="background-color: #D0D0D0">
<hr style="border:1;height:1px" />
<table border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td><h1>欢迎来到随机数生成屋</h1></td>
</tr>
</table>
<hr style="border:1;height:1px" /><br><br>
<table boder="1" style="margin-left:auto;margin-right:auto;">
<tr>
<td><h1><b>屋子内的魔法（使用说明）</b></h1>
<h2><dl>
<dt>1:按钮随机</dt>
<dd>- 点击一个button元素后提供一个0-9的随机整数并展示在屏幕上</dd>
<dt>2:数值随机</dt>
<dd>- 设置一个数值n，可以生成n个随机数并分别展示在屏幕上</dd>
<dt>3:时间随机</dt>
<dd>- 设置一个时间间隔t，每过t时间则自动生成随机数并展示在屏幕上</dd>
<dt>4:开心麻花</dt>
<dd>- 魔法屋的盲盒😍</dd>
</dl></h2>
</td>
</tr>
</table>
<hr style="border:1;height:1px" /><br><br>
<div>
<h1>
<a href="test.html">0:小屋首页</a>
<a href="fun1.html">1:按钮随机</a>
<a href="fun2.html">2:数值随机</a>
<a href="fun3.html">3:时间随机</a>
<a href="fun4.html">4:开心麻花</a>
</h1>
</div>
<br><br><hr style="border:1;height:1px" />
<div class="copyright">
<p>Copyright@Morley</p>
</div>
</body>
</html>功能1界面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fun1</title>
<style type="text/css">
div{
text-align:center;
}
a:hover{
color:gold;
}
a:active{
color:Cyan;
}
button{
width:100px;
height:100px;
background-color: cyan;
border-radius:10px;
}
.copyright{
font-size: small;
font-weight:lighter;
}
</style>
</head>
<body style="background-color: #D0D0D0">
<hr style="border:1;height:1px" />
<table border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td><h1>欢迎来到魔法屋的第一个房间</h1></td>
</tr>
</table>
<hr style="border:1;height:1px" /><br><br>
<script>
function random1(){
let ret=Math.floor(Math.random()*(10-0)+0);
//alert(ret);
document.getElementById("randomint").innerHTML="恭喜你抽到"+ret;
}
</script>
<div>
<p><b>点击下面的按钮，即可获得随机数！</b></p>
<h2 id="randomint"></h2>
<br>
<button type="button" onclick="random1()"><h1>GO!</h1></button>
</div>
<br><br><hr style="border:1;height:1px" /><br><br>
<div>
<h1>
<a href="test.html">0:小屋首页</a>
<a href="fun1.html">1:按钮随机</a>
<a href="fun2.html">2:数值随机</a>
<a href="fun3.html">3:时间随机</a>
<a href="fun4.html">4:开心麻花</a>
</h1>
</div>
<br><br><hr style="border:1;height:1px" />
<div class="copyright">
<p>Copyright@Morley</p>
</div>
</body>
</html>功能2界面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fun2</title>
<style type="text/css">
div{
text-align:center;
}
a:hover{
color:gold;
}
a:active{
color:Cyan;
}
.copyright{
font-size: small;
font-weight:lighter;
}
</style>
</head>
<body style="background-color: #D0D0D0">
<hr style="border:1;height:1px" />
<table border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td><h1>欢迎来到魔法屋的第二个房间</h1></td>
</tr>
</table>
<hr style="border:1;height:1px" /><br><br>
<div>
<p><b>请在下面输入框中输入需要输出的随机数个数n！</b></p>
<p>PS：随机数范围为0~100内的整数</p><br>
<input type="text" id="n" onblur="checkNum()" style="text-align:center;height:100px;width:100px;font-size:x-large;background-color: cyan;border-radius: 10%;">
<h2 id="randomint"></h2>
</div>
<script>
function checkNum(){
var Num=parseInt(document.getElementById("n").value);
if(!(Num>=0 && Num<=100)){
document.getElementById("randomint").innerHTML="非法输入，请重试！";
}
else{
var arr=[],cnt=0,sum="";
if(Num==0){
sum="（一个你看不见的空集）";
}
while(cnt<Num){
var temp=Math.floor(Math.random()*(100-0)+0);
if(cnt==0){
arr[cnt++]=temp;
sum+=temp;
sum+=" ";
}
else{
var flag=1;
for(var i=0;i<cnt;i++){
if(arr[i]==temp){
flag=0;
break;
}
}
if(flag==1){
arr[cnt++]=temp;
sum+=temp;
sum+=" ";
}
}
}
document.getElementById("randomint").innerHTML=sum;
}
}
</script>
<br><br><hr style="border:1;height:1px" /><br><br>
<div>
<h1>
<a href="test.html">0:小屋首页</a>
<a href="fun1.html">1:按钮随机</a>
<a href="fun2.html">2:数值随机</a>
<a href="fun3.html">3:时间随机</a>
<a href="fun4.html">4:开心麻花</a>
</h1>
</div>
<br><br><hr style="border:1;height:1px" />
<div class="copyright">
<p>Copyright@Morley</p>
</div>
</body>
</html>功能3界面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fun3</title>
<style type="text/css">
div{
text-align:center;
}
a:hover{
color:gold;
}
a:active{
color:Cyan;
}
.copyright{
font-size: small;
font-weight:lighter;
}
</style>
</head>
<body style="background-color: #D0D0D0">
<hr style="border:1;height:1px" />
<table border="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td><h1>欢迎来到魔法屋的第三个房间</h1></td>
</tr>
</table>
<hr style="border:1;height:1px" /><br><br>
<div>
<p><b>请在下面输入框中输入生成随机数的间隔时间t！</b></p>
<p>PS：默认的时间单位为毫秒，随机生成0~100内的整数</p>
<p>如果您需要转换：1s=1000ms</p><br>
<input type="text" id="n" onblur="checkTime()" style="text-align:center;height:100px;width:100px;font-size:x-large;background-color: cyan;border-radius: 10%;">
<br><br>
<button id="btn">Start</button>
<h2 id="randomint"></h2>
</div>
<script>
var testNum=true;
var flag=false;
btn.onclick=function(){
if(testNum & flag){
start();
btn.innerHTML='Stop';
testNum=false;
}
else{
stop();
btn.innerHTML='Start';
testNum=true;
}
}
var timer;
function start(){
if(flag){
document.getElementById("randomint").innerHTML=Math.round(Math.random()*100);
var t=parseInt(document.getElementById("n").value);
timer=setInterval(function(t){
var temp=Math.round(Math.random()*100);
document.getElementById("randomint").innerHTML=temp;
},t);
}
}
function stop(){
clearInterval(timer);
}
function checkTime(){
var t=parseInt(document.getElementById("n").value);
if(!(t>0)){
document.getElementById("randomint").innerHTML="非法输入，请重试！";
flag=false;
}
else{
document.getElementById("randomint").innerHTML="请点击Start按钮";
flag=true;
}
}
/*
function print(t){
//document.getElementById("randomint").innerHTML=t;
var epoch=1000;//最大刷新次数
//version 1.1
for(var i=0;i<epoch;i++){
(function(i){
setTimeout(function(){
var temp=Math.floor(Math.random()*(100-0)+0);
document.getElementById("randomint").innerHTML=temp;
},t*i);
})(i);
}//输出不稳定，且没解决在输出完epoch之前重新输入t后要改变输出状态的问题
//version 1.0
for(var i=0;i<epoch;i++) {
(function(t){
setTimeout(_ => {
var temp=Math.floor(Math.random()*(100-0)+0);
document.getElementById("randomint").innerHTML=temp;
},1000);
})(i);
}
}
*/
</script>
<br><br><hr style="border:1;height:1px" /><br><br>
<div>
<h1>
<a href="test.html">0:小屋首页</a>
<a href="fun1.html">1:按钮随机</a>
<a href="fun2.html">2:数值随机</a>
<a href="fun3.html">3:时间随机</a>
<a href="fun4.html">4:开心麻花</a>
</h1>
</div>
<br><br><hr style="border:1;height:1px" />
<div class="copyright">
<p>Copyright@Morley</p>
</div>
</body>
</html>
更多推荐
【前端小工程HTML+CSS+JS】随机数生成屋（简易随机数生成器）
发布评论