JavaScript 撰寫簡單的隨機點名器

這是一次使用 JavaScript來撰寫隨機點名器的靜態網頁頁面，如果你想學習如何使用JavaScript等知識的話可以關注本公眾號,后面我會寫一下入門學者的可以很好入手的JavaScript作品

隨機點名器

隨機點名器是我們大學里面最恐怖的軟體，每一次上課提問的時候每個人都是心驚膽戰的看著螢屏，現在我就帶大家了解一下隨機點名器的代碼原理：

界面的設計
我這里用的是表格形式寫的隨機點名框

// An highlighted block
<table border="1" width="1000" class="tdB">
    <tr>
        <td>18</td>
		<td>17</td>
        <td>16</td>
        <td>15</td>
        <td>14</td>
        <td>13</td>
        <td>12</td>
        <td>11</td>
        <td>10</td>
    </tr>
    <tr>
        <td>9</td>
        <td>8</td>
        <td>7</td>
        <td>6</td>
        <td>5</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
    </tr>
</table>

按鈕使用 ———— input

// An highlighted block
 <input type="button" value="開始" onclick="start()" class="put1">

JavaScript的使用

我這里使用的是內部方法：

JavaScript代碼：

// An highlighted block
    <script>
        var timer = null;


        function start(){

            timer = setInterval(function(){

                var allTd = document.getElementsByTagName("td");

                var num = parseInt(Math.random()*18);


                for (var i=0; i<allTd.length; i++) {

                    if (i == num) {
                        allTd[i].className = "tdBg";
                    } else {
                        allTd[i].className = "";
                    }
                }
            }, 100);
        }

        function end(){
            clearInterval(timer);
        }

    </script>

記住JavaScript在HTML5里面必須使用 script作為宣告

開始點名：

Math.random()*18定義亂數的范圍，最后的100代表計時器的時間間隔

1.getElementsByTagName()：方法的用途是尋找有著給定標簽名的所有的元素，

2.ramdom模塊提供了一個亂數的函式:random() 它可以回傳一個隨機生成的實數我們這里取的是18，因為我只寫了18個表格

3.parseInt（）能對括號里面的亂數進行決議并回傳數字，

// An highlighted block
 function start(){

            timer = setInterval(function(){

                var allTd = document.getElementsByTagName("td");

                var num = parseInt(Math.random()*18);


                for (var i=0; i<allTd.length; i++) {

                    if (i == num) {
                        allTd[i].className = "tdBg";
                    } else {
                        allTd[i].className = "";
                    }
                }
            }, 100);
        }

結束點名：

注意：clearInterval(timer)和timer = null都可以達到關閉關閉定時器的作用我這里使用的是第一種

// An highlighted block
function end(){
            clearInterval(timer);
        }

css內容

input的css編碼

// An highlighted block
 width: 160px;
        line-height: 60px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow:2px 2px 2px #333;
        border-radius: 50px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
        background-color: limegreen;
        border:1px solid #d2a000;
        box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
	    margin-left: 550px;

background-color: limegreen; 設定按鈕的內部顏色
border:1px solid #d2a000;t; 設定按鈕邊框顏色
text-shadow:2px 3px 2px #333; 字體陰影