实现效果图：
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩票</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
position: relative;
}
#inner1{
position: absolute;
left: 100px;
top: 100px;
}
#inner2{
width: 200px;
height: 30px;
background-color: red;
color: white;
position: absolute;
left: 100px;
top: 130px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
#inner3{
position: absolute;
left: 115px;
top: 165px;
}
#inner3 li{
width: 30px;
height: 30px;
background-color: lightblue;
border-radius: 50%;
line-height: 30px;
text-align: center;
margin-top: 5px;
}
</style>
<body>
<div id="box">
<div id="inner1">
<input type="button" value="begin">
<input type="button" value="pause">
<input type="button" value="reset">
</div>
<div id="inner2">0</div>
<ul id="inner3">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
var inputs=document.getElementById("inner1").getElementsByTagName("input");
var inner2=document.getElementById("inner2");
var lis=document.getElementById("inner3").getElementsByTagName("li");
// 1、创建随机数
function rand(min,max){
return parseInt(Math.random()*(max-min)+min);
}
// 排序
function sortNum(a,b){
return a-b;
}
// 19、给小于10的随机数前面补零
function bl(n){
return n<10?"0"+n:n;
}
//2、创建一个空数组存放随机数
var arr=[];
// 10、将下面的内容进行封装
function myFunction(){
// 13、每次重新调用这个函数时都要重新给这个数组赋值，即要清除这个数组里的元素——就是给这个数组重新赋上空值
arr=[];
//3、将随机数存放到数组中
while(arr.length<lis.length){
// 将1~30的随机数存放到一个定义的变量a中
// 调用补零函数
var a=bl(rand(1,30));
// 5、去重
for(var i=0;i<arr.length;i++){
if(a==arr[i]){
// 6、将每一个新得到的a的值与数组里面的数进行比较，若与其相等，则直接退出循环
break;
}
}
// 7、当for循环走完了，新得到的a没有与数组中的元素重复，则将此a加到数组里，得到新的数组
if(i==arr.length){
// 将a添加到arr中
arr.push(a);
}
// 8、将数组中的元素进行排序——利用sort()
arr=arr.sort(sortNum);
// 9、将数组中的元素添加到每个小球里面
for(var i=0;i<lis.length;i++){
lis[i].innerHTML=arr[i];
}
}
// 4、将数组中的元素存放到浏览器中
inner2.innerHTML=arr;
// console.log(arr)
}
// 11、利用定时器点击begin按钮开始随机取数
// 12、定义一个变量存放定时器
var timer=null;
inputs[0].onclick=function(){
// 15、避免连续点击后，再点击暂停按钮不在管用
clearInterval(timer);
timer=setInterval(function(){
myFunction();
},200);
}
// 14、点击pause暂停定时器
inputs[1].onclick=function(){
clearInterval(timer);
}
// 15、点击重置reset回到初始状态
inputs[2].onclick=function(){
// 16、给arr赋值为原来的元素
arr=[0,1,2,3,4,5,6];
// 17、将数组里的元素分别赋给小球里面的数
for(var i=0;i<lis.length;i++){
lis[i].innerHTML=arr[i];
}
// 18、返回inner2里面的数
return inner2.innerHTML=0;
}
</script>
</body>
</html>