JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。
- HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
- CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
- JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
一.实现功能：
1.给抽奖机的开始和停止按钮绑定点击事件 2.通过点击事件来启动循环定时器，并通过循环定时器来获取随机数字 3.将随机号码显示在屏幕上 4.设置抽奖号码 5.将抽奖号码与随机数字进行比对，如果相等则为中奖，不相等则没有中奖。
二.部分重要功能代码：
1.body页面：
<body>
<div class="father">
<span class="son"></span>
<span class="son"></span>
<span class="son"></span>
<div class="btnfather">
<button class="btn btn1">开始</button>
<button class="btn btn2">停止</button>
</div>
</div>
</body>
2.通过点击事件来显示随机号码：
<script>
var spans=document.getElementsByClassName("son");
var btn1=document.getElementsByClassName("btn1")[0];
var btn2=document.getElementsByClassName("btn2")[0];
var timer;
btn1.onclick=function(){
timer=setInterval(function(){
for(var i=0;i<spans.length;i++){
var spanText=Math.floor(Math.random()*10);
spans[i].innerHTML=spanText;
}
},50)
}
</script>
3.设置中奖号码：
var prizeArr=[];//中奖号码
for(var i=1;i<1000;i++){
if(i%111==0){
prizeArr.push(i);
}
}
4.判断是否中奖的方法
function prize(){//判断是否中奖的方法
var phone="";//普通号码
for(var i=0;i<spans.length;i++){
phone+=spans[i].innerHTML;
}
var flag=false;
for(var i=0;i<prizeArr.length;i++){
if(prizeArr[i]==phone){
alert("恭喜您中间了，中奖号码是"+phone);
flag=true;
}
}
if(flag==false){
alert("很遗憾，没有中奖，再接再厉！");
}
console.log(phone);
}
三.全部代码实现：
<!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>Document</title>
<style>
html{
background-color: #9CBADE;
}
.father{
width: 500px;
height: 300px;
background-color: rgb(198,33,33);
position: absolute;
top:50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
text-align: center;
}
.son{
width: 100px;
height: 100px;
box-sizing: border-box;
border-radius: 10%;
border: 5px rgb(255,224,101) solid;
background-color: aquamarine;
margin-top: 80px;
margin-left: 20px;
display: inline-block;
font-size: 30px;
line-height: 100px;
}
.btnfather{
width: 100%;
margin-top: 20px;
}
.btnfather .btn{
display: inline-block;
margin: 0 auto;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="father">
<span class="son"></span>
<span class="son"></span>
<span class="son"></span>
<div class="btnfather">
<button class="btn btn1">开始</button>
<button class="btn btn2">停止</button>
</div>
</div>
</body>
<script>
var spans=document.getElementsByClassName("son");
var btn1=document.getElementsByClassName("btn1")[0];
var btn2=document.getElementsByClassName("btn2")[0];
var timer;
btn1.onclick=function(){
timer=setInterval(function(){
for(var i=0;i<spans.length;i++){
var spanText=Math.floor(Math.random()*10);
spans[i].innerHTML=spanText;
}
},50)
}
btn2.onclick=function(){
clearInterval(timer)
prize();
}
var prizeArr=[];//中奖号码
for(var i=1;i<1000;i++){
if(i%111==0){
prizeArr.push(i);
}
}
function prize(){//判断是否中奖的方法
var phone="";//普通号码
for(var i=0;i<spans.length;i++){
phone+=spans[i].innerHTML;
}
var flag=false;
for(var i=0;i<prizeArr.length;i++){
if(prizeArr[i]==phone){
alert("恭喜您中间了，中奖号码是"+phone);
flag=true;
}
}
if(flag==false){
alert("很遗憾，没有中奖，再接再厉！");
}
console.log(phone);
}
</script>
</html>
