HTML和CSS是我們Web前端開發中非常重要的兩個技術，HTML負責網頁結構和內容的展示，而CSS則負責美化我們的網頁。但是在學習過程中，我們可能會遇到測試點名的情況，今天我們就來介紹一下如何使用HTML和CSS來實現隨機點名。
<!DOCTYPE html>
<html>
<head>
<title>隨機點名</title>
<style>
/* 設置隨機點名的樣式 */
.roll-call {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
font-size: 24px;
}
/* 設置隨機點名按鈕的樣式 */
.roll-btn {
display: inline-block;
padding: 10px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>隨機點名程序</h1>
<div class="roll-call">
<p>張三</p>
<p>李四</p>
<p>王五</p>
<p>趙六</p>
<p>小紅</p>
<p>小明</p>
<p>小李</p>
<p>小白</p>
<p>小黑</p>
</div>
<button class="roll-btn" onclick="rollCall()">隨機點名</button>
<script>
function rollCall() {
var pList = document.querySelectorAll('.roll-call p');
var index = Math.floor(Math.random() * pList.length);
for (var i = 0; i < pList.length; i++) {
pList[i].style.backgroundColor = '';
}
pList[index].style.backgroundColor = '#008CBA';
}
</script>
</body>
</html>上面的代碼中我們使用了HTML的p標簽來包裹點名的名字，使用CSS中的樣式來美化點名的外觀。在代碼的最后我們使用了JavaScript來實現點名隨機的功能，代碼中我們使用了querySelectorAll方法來獲取所有p標簽，然后使用Math.random()方法生成一個隨機的下標，最后將隨機到的p標簽背景色設為藍色。
以上就是使用HTML和CSS實現隨機點名的方法，希望對大家有所幫助。
下一篇html和css重點