JS+CSS實現隨機點名(實例代碼)

更新時間：2019年11月04日 09:31:12 作者：Pride°

本文通過js html和cass代碼實現了隨機點名效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧

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 = ["西施", "馬超", "曜", "云中君", "瑤", "豬八戒", "嫦娥", "伽羅", "盾山", "司馬懿", "孫策", "元歌", "米萊狄", "狂鐵", "弈星", "裴擒虎",
    "楊玉環(huán)", "公孫離", "明世隱", "女媧", "夢奇", "蘇烈", "百里玄策", "百里守約", "鎧", "鬼谷子", "干將莫邪", "東皇太一", "大喬", "黃忠", "諸葛亮",
    "哪吒", "太乙真人", "蔡文姬", "雅典娜", "楊戩", "成吉思汗", "鐘馗", "虞姬", "李元芳", "張飛", "劉備", "后羿", "牛魔", "孫悟空", "亞瑟", "橘右京",
    "娜可露露", "不知火舞", "張良", "花木蘭", "蘭陵王", "王昭君", "韓信", "劉邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蟬", "關羽", "老夫子",
    "武則天", "項羽", "達摩", "狄仁杰", "馬可波羅", "李白", "宮本武藏", "典韋", "曹操", "甄姬", "夏侯惇", "周瑜", "呂布", "羋月", "白起", "扁鵲",
    "孫臏", "鐘無艷", "阿軻", "高漸離", "劉禪", "莊周", "魯班七號", "孫尚香", "嬴政", "妲己", "墨子", "趙云", "小喬", "廉頗"
  ]
  var box = document.getElementById("box");
  var span = document.getElementById("span");//獲取元素
  var state = 0;//定義狀態(tài)，開始和結束
  var t;
  span.onclick = function () {
    if (state == 0) {
      //如果是0即開始隨機，變?yōu)?時結束，不是0時執(zhí)行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 = "結束"http://更改按鈕的內容
      state=1;
    }else{
      state=0;
      clearInterval(t);
      span.innerHTML = "開始"
    }
  }
</script>

效果預覽