效果:红色每次随机出现六个不相同的数字,从小到大排序且在1~31间,蓝色在1~16间
style部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:100px; width:100px; background:red; color:white; border-radius:50%; float:left; margin-right:20px; font-size:50px; text-align:center; line-height:100px; } section{ height:100px; width:100px; background:deepskyblue; color:white; border-radius:50%; float:left; font-size:50px; text-align:center; line-height:100px; } </style> </head> <body>
js部分: <script> window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var section=document.getElementsByTagName("section"); function distinct(arr){//传入一个随机数组进行去重 //建立一个空数组用来存值 var newArr=[]; //循环遍历数组 for(var i=0;i<arr.length;i++){ //当输入进来的数组不存在该值的时候添加该值,否则不添加 if(newArr.indexOf(arr[i])==-1){ //像新数组中添加值 newArr.push(arr[i]); } } //返回新数组 return newArr; } //num是输出个数,max是最大值 function random(num,max){ //建数组arr存用户输入的值 0到max var arr=[]; //建数组newarr存 arr中的随机数 var newarr=[]; //循环添加arr数组中的值,0到max之间所有值 for(var i=1;i<max;i++){ arr.push(i); } //循环次数是num,就是取多少次随机数添加到newarr中 for(var i=0;i<num;i++){ newarr.push(arr.splice(Math.floor(Math.random()*arr.length),1)); } //跟数组排序 var rua=newarr.sort(function(x,y){ return x-y; }); //返回排序后的数组 return rua; } //建变量生成随机数5个最大值33 var num=random(6,33); console.log(num); //循环div让他的innerHTML值等于数组中的数 for(var i=0;i<num.length;i++){ aDiv[i].innerHTML=num[i]; } //生成一个1到16的数 var xxx=random(1,16); //添加数值到section内 for(var i=0;i<xxx.length;i++){ section[i].innerHTML=xxx[i]; } } </script>
body部分: <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <section></section> </body> </html>