用js数组做一个点名小程序

随机点名程序，为了省事我把代码直接复制过来了

效果：

 

 

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
    background: pink;
    outline:none;
}
#personName{
    width: 300px;
    height: 150px;
    border:solid #000;
    margin:30px 0 20px;
    font-size:80px;
    line-height:150px;
    color:#0f0;
}
#btn{
    width: 300px;
    height: 80px;
    font-size:40px;
    line-height: 80px;
    font-weight:bold;
    border:0;
    border:1px solid #999;
    background-color: #abcdef;
}
h1{
    font-size:100px;
}
</style>
<body>
<center>
    <h1>点名小程序</h1>
    <div id="personName">周杰伦</div>
    <button id="btn">开&nbsp;&nbsp;&nbsp;始</button>
</center>

</body>
<script type="text/javascript">
var arr  = ['胡歌','古天乐','刘亦菲','张国荣','梁家辉','王金宝','李连杰','成龙'];
var timer;
btn.onclick = function(){
    if(this.innerHTML == "开&nbsp;&nbsp;&nbsp;始"){
        this.innerHTML = "结&nbsp;&nbsp;&nbsp;束"
        timer = setInterval(function(){
            var index = parseInt(Math.random()*8);
            personName.innerText = arr[index];
        },50);
    }else{
        this.innerHTML = "开&nbsp;&nbsp;&nbsp;始"
        clearInterval(timer);
    }
}
console.log(parseInt(Math.random()*8));

</script>
</html>

 

posted @ 2020-04-15 10:48  结发授长生  阅读(354)  评论(0)    收藏  举报