学习js十天了，写了第一个有点用处的小程序，发表文章纪念一下，里面有一些好听的钢琴曲，奉献给大家。随机点名，我的第一个小程序。
```html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #fffaf0;
}
.box {
position: relative;
overflow: hidden;
width: 800px;
margin: 10px auto;
}
h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
text-align: center;
font-size: 24px;
font-weight: 400;
}
button {
position: absolute;
top: 10px;
right: 30px;
width: 50px;
height: 30px;
cursor: pointer;
outline: none;
border: 0;
border-radius: 15px;
color: #fff;
background-color: green;
}
ul {
margin-top: 30px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: center;
width: 800px;
height: 450px;
}
li {
user-select: none;
list-style: none;
float: left;
padding: 10px 15px;
margin: 10px;
border-radius: 20px;
background-image: -webkit-linear-gradient(left top, #eee, #999);
}
li:hover {
background-image: -webkit-linear-gradient(left top, #fff1eb, #ace0f9);
color: #000;
}
/* 给被选中的li加背景色 */
.bgc {
background-image: -webkit-linear-gradient(left top, #243949, #517fa4);
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<h2>随机点名</h2>
<button>开始</button>
<ul>
<li>卡农</li>
<li>雨的印记</li>
<li>天空之城</li>
<li>雪之梦</li>
<li>悲怆</li>
<li>星空</li>
<li>秋日私语</li>
<li>寂静之声</li>
<li>泪之曲</li>
<li>克罗地亚狂想曲</li>
<li>梦中的雪</li>
<li>夜的钢琴曲</li>
<li>风居住的街道</li>
<li>菊次郎的夏天</li>
<li>神秘园之歌</li>
<li>梦中的婚礼</li>
<li>致爱丽丝</li>
<li>土耳其进行曲</li>
<li>春之歌</li>
<li>夏日的幻想</li>
<li>月光奏鸣曲</li>
<li>D大调卡农</li>
<li>天鹅湖</li>
<li>小夜曲</li>
<li>平沙落雁</li>
<li>杜鹃圆舞曲</li>
<li>横笛协奏曲1号</li>
<li>欢乐颂</li>
<li>汉宫秋月</li>
<li>海顿小夜曲</li>
<li>罗密欧与朱丽叶</li>
<li>阿妮莎的微笑</li>
<li>水边的阿狄丽娜</li>
<li>千与千寻</li>
<li>虫儿飞</li>
<li>童话镇</li>
<li>两个人的心情</li>
<li>天空之城</li>
<li>最初的梦想</li>
<li>秋日私语</li>
<li>与你同在</li>
<li>镜夜</li>
<li>夜莺</li>
<li>萤火虫之光</li>
</ul>
</div>
</body>
<script>
// 1 获取元素
let btn = document.querySelector('button');
let list = document.querySelectorAll('li');
// 声明一个定时器变量
let timer;
// 生成随机数
function getRandom(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a;
}
// 创建一个star()，用setInterval()方法来重复里面的函数，再点击开始的时候调用
function star() {
timer = setInterval(function () {
// 里面的函数是给随机的li加背景颜色的类名，来表示被选中，加类名之前先排除其他li
// 的样式，排他思想
for (let i = 0; i < list.length; i++) {
list[i].className = '';
}
list[getRandom(0, list.length - 1)].className = 'bgc';
}, 100) // 设置重复时间差100ms
}
// 取消setInterval()，在点击结束的时候调用
function stop() {
clearInterval(timer);
}
// 点击事件
btn.onclick = function () {
// 先判断按钮的value值是不是开始，是的话就执行if里面的代码块，不是执行else的代码
// 块
if (this.innerHTML === '开始') {
// 点击开始就调用star()，把按钮的value值改为结束，顺便改一下背景色
star();
this.style.backgroundColor = 'red';
this.innerHTML = '结束';
} else {
// 当点击开始的时候，按钮可以选择是否停止了，点击停止就调用stop()，把按钮的value值改为开始
stop();
this.style.backgroundColor = '';
this.innerHTML = '开始';
}
}
</script>
</html>
