简单的JavaScript+HTML随机点名器

JavaScript 编写简单的随机点名器

这是一次使用 JavaScript来编写随机点名器的静态网页页面。如果你想学习如何使用JavaScript等知识的话可以关注本公众号,后面我会写一下入门学者的可以很好入手的JavaScript作品

随机点名器

随机点名器是我们大学里面最恐怖的软件，每一次上课提问的时候每个人都是心惊胆战的看着屏幕，现在我就带大家了解一下随机点名器的代码原理：

1. 界面的设计
   我这里用的是表格形式写的随机点名框
   

// 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>

2. 按钮使用 ———— 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;

1. background-color: limegreen; 设置按钮的内部颜色
2. border:1px solid #d2a000;t; 设置按钮边框颜色
3. text-shadow:2px 3px 2px #333; 字体阴影

最后麻烦大家点个赞在走啊，谢谢！！！

作品详细代码请关注作者后在空间里面自行下载
如有侵权问题私聊作者