本文主要是介绍使用JavaScript完成一个随机抽取观众的小网页应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
思路：
首先使用CSS布局，将网页背景和相关框架准备好，具体代码为
随机抽取观众
抽中名单
这是相关属性style部分
*{
margin:0;
padding:0;
}
#backgound{
width: 100%;
height: 100%;
background-image:url(../img/08.jpg);
}
#title{position: absolute;
top: 220px;
left: 610px;
}
#title1{position: absolute;
top: 230px;
right: 380px;
}
#title>p{
font-size: 1.8em;
}
#title1>p{
font-size: 1.4em;
}
#box{
display: inline-block;
position: absolute;
top: 250px;
left: 560px;
height: 160px;
width: 220px;
background-position: center;
padding:0.5em 1em;
color:black;
margin-top: 10px;
border: 2px solid;
color:darkgray;
font-family: "微软雅黑";
text-align: center;
letter-spacing: 4px;
font-size: 1.5em;
line-height:160px;
}
#remove{
display: inline-block;
position: absolute;
top: 250px;
left: 890px;
height: 170px;
width: 40px;
background-position: center;
padding:0.5em 1em;
color:black;
margin-top: 10px;
border: 2px solid;
color:darkgray;
font-family: "微软雅黑";
text-align: center;
font-size: 0.8em;
line-height:30px;
}
#button{
position: absolute;
top: 460px;
left: 650px;
width: 40px;
line-height: 10px;
text-align: center;
width:78px;
}
JS部分：
首先将具体名单用数据装好，使用Math的随机函数随机一个数据下标，即随机取到一个名字。然后再将取到的名字从数组中移除，再随机下一个名字
因为在网页上要显示滚动效果，所以使用了一个setTimeout函数，每个0.1秒显示出一个随机名字
一个开始函数和停止函数具体代码：
<script>
var box = document.getElementById('box');
var c;
var arr = new Array('王红梅',
'郭淑慧',
'马海娟',
'孙洪山',
'胡丹丹',
'胡书琴',
'李念儿',
'文彩依',
'柳婵诗',
'顾莫言',
'任水寒',
'金磨针',
'丁玲珑、',
'宋鹏凯',
'廖立文',
'张笛',
'徐超',
'戴文博'
);
function getCode(){
var index = Math.floor(Math.random()*arr.length);
code = arr[index];
box.innerHTML=code;
t = setTimeout("getCode()", 100);
c = code;
}
var x ='';
var g = 0;
function stop(){
g++;
if(g<4){
clearTimeout(t);
for(var i =0;i这篇关于使用JavaScript完成一个随机抽取观众的小网页应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
