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; 字体阴影
最后麻烦大家点个赞在走啊,谢谢!!!
作品详细代码请关注作者后在空间里面自行下载
如有侵权问题私聊作者