javascript網頁隨機點名實現過程解析
阿新 • • 發佈:2020-11-26
主要知識點涉及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>
點選結束按鈕 ,按鈕變成開始按鈕
切換按鈕:判斷按鈕狀態,如果按鈕為開始按鈕,將按鈕變成結束按鈕;
如果按鈕為結束按鈕,將按鈕變成開始按鈕。
<body> <script type="text/javascript"> // 獲取按鈕物件 var btn = document.getElementsByTagName("button")[0]; // 給按鈕新增單擊事件 btn.onclick = function(){ if(btn.innerText=="開始"){ btn.innerHTML="結束" }else{ btn.innerHTML="開始" } }; </script> </body>
定義一個數組用來儲存人名,點選開始按鈕,隨機選擇人名;
點選停止按鈕,頁面不再發生變化。
<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( )之間的區別
<!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>
-------------------------------------------------------------------------------------------
innerText、innerHTML 向指定元素新增內容
innerHTML :設定元素內容,包括標籤和文字 一般用於修改元素物件,獲取文字內容和標籤
innerText:設定元素文字,只能設定文字 一般用於獲取元素物件,只能獲取到文字內容,
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援碼農教程。