随机点名器
***为了更好的理解解释 代码中的注释写在代码后部 此处为了方便并没有遵守规范，只是为了更好的理解。
style样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var chooseName = ["赵一","钱二","孙三","李四","周五","郑六","王七","冯八","程九","楚十","魏零"];
</script>
<style>
div.d1{
z-index: -1;//将div.d1置于最底层
position: absolute;//定位属性：absolute为绝对定位
background-color: coral;//设置背景颜色
width: 400px;//宽度400px
height: 300px;//高度300px
border-radius: 10px;//圆角设置
}
div.d2{
position:relative;//定位属性：relative为相对定位
top:100px;//距离上部边界距离
left: 125px;//距离左部边界距离
width: 150px;
height: 50px;
background-color: #ddd;
text-align: center;//文字居中
line-height: 50px;//行高
border-radius: 10px;
}
div.d3{
z-index: 99999;
position:relative;
margin-top: 200px;
width: 50px;
height: 20px;
background-color: green;
border-radius: 5px;
}
</style>
<H1 id="hid">随机点名器</H1>
</head>
body排列内容
<body>
<div class="d1"></div> //最大的背景块
<div id="d2" class="d2" style="vertical-align: middle;">随机点名器</div>//随机点名的块
<div id="d3">
<input type="button" value="开始" id="btn" style="margin-left: 175px;margin-top: 200px;">
</div>//开始按钮
</body>
java script 代码
<script>
var btn = document.getElementById("btn");//将 id：btn 赋值给btn
btn.onclick = function(){//btn即开始按钮的点击事件函数
if(this.value == "开始"){//此处的this为btn 当btn.value值为“开始时”则开始下列函数run（）
function run(){
btn.style.backgroundColor = "red";//改变背景颜色
//开始随机变换名字
m = 0;
m = Math.floor(Math.random()*chooseName.length);//随机数字
document.getElementById("d2").innerHTML= chooseName[m];//显示chooseName数组中m下标的名字
}
this.value = "停止"//将btn.value的值改为停止
timer = setInterval(run,2);//定义定时器的作用域
}else{
clearInterval(timer);//停止计时
this.value = "开始";//将btn.value值重新改为开始
this.style.backgroundColor = "green";//更改背景颜色
}
}
以上就是我经过学习和请教后写出的代码。如有重复，纯属水平有限[捂脸]。 本人只是java学习中的小学生，有更好的想法请说明并解释，不然我怕我看不懂[捂脸]。
