這篇文章主要為大家展示了JS+CSS實現隨機點名的方法，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“JS+CSS實現隨機點名的方法”這篇文章吧。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
HTML代碼結構
<body> <div id="box">隨機點名</div> <span id="span">開始</span> </body>
CSS代碼結構
<style>
#box {
width: 30%;
height: 200px;
background-color: rgb(233, 248, 214);
border: 1px solid rgb(130, 216, 18);
font-size: 40px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
line-height: 200px;
text-align: center;
margin: 25px auto;
border-radius: 10px;
}
span {
display: block;
width: 30%;
height: 44px;
line-height: 44px;
background-color: rgb(6, 158, 64);
border-radius: 10px;
color: #fff;
text-align: center;
margin: 0 auto;
font-size: 18px;
font-family: 華文細黑;
}
span:hover {
background-color: rgb(4, 190, 76);
}
</style>JS代碼結構
<script>
var arr = ["西施", "馬超", "曜", "云中君", "瑤", "豬八戒", "嫦娥", "伽羅", "盾山", "司馬懿", "孫策", "元歌", "米萊狄", "狂鐵", "弈星", "裴擒虎",
"楊玉環", "公孫離", "明世隱", "女媧", "夢奇", "蘇烈", "百里玄策", "百里守約", "鎧", "鬼谷子", "干將莫邪", "東皇太一", "大喬", "黃忠", "諸葛亮",
"哪吒", "太乙真人", "蔡文姬", "雅典娜", "楊戩", "成吉思汗", "鐘馗", "虞姬", "李元芳", "張飛", "劉備", "后羿", "牛魔", "孫悟空", "亞瑟", "橘右京",
"娜可露露", "不知火舞", "張良", "花木蘭", "蘭陵王", "王昭君", "韓信", "劉邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蟬", "關羽", "老夫子",
"武則天", "項羽", "達摩", "狄仁杰", "馬可波羅", "李白", "宮本武藏", "典韋", "曹操", "甄姬", "夏侯惇", "周瑜", "呂布", "羋月", "白起", "扁鵲",
"孫臏", "鐘無艷", "阿軻", "高漸離", "劉禪", "莊周", "魯班七號", "孫尚香", "嬴政", "妲己", "墨子", "趙云", "小喬", "廉頗"
]
var box = document.getElementById("box");
var span = document.getElementById("span");//獲取元素
var state = 0;//定義狀態，開始和結束
var t;
span.onclick = function () {
if (state == 0) {
//如果是0即開始隨機，變為1時結束，不是0時執行else
clearInterval(t);
t = setInterval(function () {
// console.log(1);
var sj = Math.round(Math.random() * (arr.length - 1));
console.log(arr[sj]);
box.innerHTML = arr[sj];
}, 3)
span.innerHTML = "結束"//更改按鈕的內容
state=1;
}else{
state=0;
clearInterval(t);
span.innerHTML = "開始"
}
}
</script>效果預覽
以上就是關于“JS+CSS實現隨機點名的方法”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
