javascript網頁隨機點名實現過程解析

更新時間：2019年10月15日 08:26:17 作者：入夢歸來

這篇文章主要介紹了javascript實現網頁隨機變色及實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

主要知識點涉及if選擇結構判斷語句、數組的定義、定時器、清除定時器、日期對象的使用。

1.HTML結構

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>隨機點名</title>
  <style type="text/css">
    .box{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
    #uname{
      width: 100px;
      height: 50px;
      background: pink;

      /* 設置div塊 水平居中*/
      margin: 0 auto;
      margin-top: 30px;
      

      text-align: center; /* 設置文本水平居中 */
      line-height: 50px; /* 設置文本垂直居中 */
      font-weight: bold; /* 字體加粗 */
      font-size: 20px; /* 設置字體大小 */
    }
    button{
      display: block; /* 將元素轉換成行內塊元素 */
      margin: 10px auto;
    }
  </style>
</head>
<body>

<div class="box">
  <div id="uname">姓名</div>
  <button>開始</button>
</div>

</body>
</html>

頁面如下圖所示：

2.js代碼

1）在開始按鈕和結束按鈕之間相互轉換

點擊開始按鈕，將按鈕中的內容修改為結束

<body>
<script type="text/javascript">
  // 獲取按鈕對象
  var btn = document.getElementsByTagName("button")[0];
  // 給按鈕添加單擊事件
  btn.onclick = function(){
    btn.innerHTML="結束"
  };
</script>
</body>

點擊結束按鈕，按鈕變成開始按鈕

切換按鈕：判斷按鈕狀態(tài)，如果按鈕為開始按鈕，將按鈕變成結束按鈕；

如果按鈕為結束按鈕，將按鈕變成開始按鈕。

<body>

<script type="text/javascript">
  // 獲取按鈕對象
  var btn = document.getElementsByTagName("button")[0];
  // 給按鈕添加單擊事件
  btn.onclick = function(){
    if(btn.innerText=="開始"){
      btn.innerHTML="結束"
    }else{
      btn.innerHTML="開始"
    }
    
  };
</script>
</body>

定義一個數組用來存儲人名，點擊開始按鈕，隨機選擇人名；

點擊停止按鈕，頁面不再發(fā)生變化。

<body>

<div class="box">
  <div id="uname">姓名</div>
  <button>開始</button>
</div>
<script type="text/javascript">
  // 定義數組 存儲人名
  var arr = ['李白','杜甫','韓愈','柳宗元','歐陽修','蘇洵','蘇軾','蘇轍','王安石','曾鞏','陶淵明','辛棄疾','李賀','陸游'];
  // 獲取id="uname"的元素對象
  var Uname = document.getElementById("uname");
  var flag = null; // 給定時器添加一個標識符

  // 獲取按鈕對象
  var btn = document.getElementsByTagName("button")[0];
  // 給按鈕添加單擊事件
  btn.onclick = function(){
    if(btn.innerText=="開始"){
      btn.innerHTML="結束";
      // 添加多次定時器
      flag = setInterval(function(){
      var num = rand(0,arr.length-1); //隨機獲取數組的索引
      // 通過索引獲取人名
      var uname = arr[num];
      // 將取出來的人名 寫入到頁面當中
      Uname.innerHTML=uname;
      },100)
      
    }else{
      btn.innerHTML="開始";
      // 清除多次定時器
      clearInterval(flag);
    }
    
  };


  // 封裝一個隨機函數
  function rand(n,m){
    return Math.floor(Math.random()*(m-n+1));
  }
</script>
</body>

頁面最終顯示如下圖所示：

3.innerText( )和innerHTML( )之間的區(qū)別

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>

<p>余生<em>山海</em>遠闊，愿你隨心所向。</p>
<script type="text/javascript">
  // 獲取元素對象
  var cont = document.getElementsByTagName("p")[0];
  // 獲取元素內容
  console.log(cont.innerText);
  console.log(cont.innerHTML);
</script>
</body>
</html>