今天聽課聽到了Math對象中的隨機數方法random()，然后就想用它設計一個簡單的隨機點名系統。我記得之前高中的時候語文老師用過一個，是類似於名字滾動的那種，現在太菜就先不考慮這個了，后續有機會再研究吧。
先展示一下最終的效果圖。
下面是html代碼部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>隨機點名</title> 6 <!--引入reset.css用來清除瀏覽器的默認樣式--> 7 <link rel="stylesheet" type="text/css" href="css/reset.css"/> 8 <!--引入css--> 9 <link rel="stylesheet" type="text/css" href="css/page-index.css"/> 10 <script type="text/javascript"> 11 var nameArr = ["190101德牧","190102吉娃娃","190103哈士奇","190104金毛","190105田園","190106阿拉斯加", 12 "190107藏獒","190108柴犬","190109貴賓","190110博美","190111薩摩耶","190112拉布拉多"]; 13 14 15 /* 16 * 在MDN文檔中可以直接查詢到下面的函數 17 * ——可以得到位於兩個數之間（包括兩個數在內）的隨機整數 18 * ——此處隨機生成的數字作為數組下標，也就可以隨機顯示數組的內容 19 */ 20 function getRandom(min, max){ 21 return Math.floor(Math.random()*(max-min+1))+min; 22 } 23 /* 24 * getElementById()方法可以返回擁有指定ID的第一個對象的引用 25 * innerHTML可以設置或者返回表格行的開始和結束標簽之間的HTML 26 */ 27 function myFunction(){ 28 document.getElementById("name").innerHTML = nameArr[getRandom(0,nameArr.length-1)]; 29 } 30 31 32 </script> 33 </head> 34 <body> 35 <div id="container"> 36 <p id="title" class="text">**大學點名系統</p> 37 <p id="reminder" lass="text">讓我們看看是哪個幸運兒？？！！</p> 38 <div id="name" ></div> 39 <button onclick="myFunction()">開始</button> 40 41 <button>結束</button> 42 </div> 43 </body> 44 </html>
下面是css代碼部分
1 *{ 2 padding: 0; 3 margin: 0; 4 text-align: center; 5 } 6 /*設置整個的容器div*/ 7 #container{ 8 width: 600px; 9 height: 400px; 10 background-image: url(../img/bc.jpg); 11 margin: auto; 12 } 13 /*大學點名系統樣式設計*/ 14 #title{ 15 font: bold 50px "微軟雅黑"; 16 } 17 /*提示語*/ 18 #reminder{ 19 padding-top: 20px; 20 font: 25px "微軟雅黑"; 21 } 22 /*顯示名字的div*/ 23 #name{ 24 width: 160px; 25 height: 50px; 26 background-color: white; 27 margin: 50px 220px; 28 border-radius: 10px; 29 line-height: 50px; /*line-height設計的和height一樣，文字就可以顯示在中間,這一點自己經常忘*/ 30 } 31 /*按鈕設計*/ 32 button{ 33 width: 80px; 34 height: 40px; 35 font: 20px "微軟雅黑"; 36 background-color: gray; 37 }
總結來說，功能很簡單，實現很簡單，但是由於js剛入門好多東西還不懂，getElementById().innerHTML那個地方還是想了很久，另外就是結束按鈕在這里就是個擺設，只是為了對稱，沒有設計什么功能，也沒什么想法。
第一篇博客就這樣吧，“積一時之跬步，臻千里之遙程”，共勉！
2019-12-09 20:44:05