今天听课听到了math对象中的随机数方法random()，然后就想用它设计一个简单的随机点名系统。我记得之前高中的时候语文老师用过一个，是类似于名字滚动的那种，现在太菜就先不考虑这个了，后续有机会再研究吧。
先展示一下最终的效果图。
下面是html代码部分
1 <!doctype html> 2 <html> 3 <head> 4 <meta chart="utf-8" /> 5 <title>随机点名</title> 6 <!--引入ret.css用来清除浏览器的默认样式--> 7 <link rel="stylesheet" type="text/css" href="css/ret.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可以设置或者返回表格行的开始和结束标签之间的html26 */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">3不定式短语6 <p id="title" class="text">**大学点名系统</p>37 <p id="reminder" lass="text">让我们看看是哪个幸运儿？？！！</p>38 <div id="na成就的近义词me" ></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
本文发布于:2023-04-07 07:32:03，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0a993397cfb9c8a717e1996238d136b1.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：随机点名.doc
本文 PDF 下载地址：随机点名.pdf
| 留言与评论（共有 0 条评论） |
