原生JS实现随机点名项目的实例代码
程序员文章站
2023-10-28 20:57:34
核心思想
•随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。
所用知识
•math.random() * num:...
核心思想
•随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。
所用知识
•math.random() * num: 产生从0到num的随机数
•math.floor(): 向下取整
•简单的dom操作等
技术扩展
•扩展人数
•添加停止键等
效果
代码如下
•html:
<div class="container"> <section class="demo"> <ul> <li></li> <li></li> <li></li> </ul> </section> <section class="students"><ul></ul></section> <section class="buttonlist"> <ul> <li><button type="button">随机选一个</button></li> <li><button type="button">随机选两个</button></li> <li><button type="button">随机选三个</button></li> </ul> </section> </div>
•css:
<style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { width: 100%; height: 100%; background: url("images/bg.jpg") no-repeat; background-size: cover; } button { border: none; background-color: transparent; color: #fff; font-size: 20px; } .container { width: 1200px; height: 700px; margin: 10px auto; } .container .demo, .container .buttonlist { width: inherit; height: 25%; } .container .students { width: inherit; height: 50%; } .container .students li { margin-right: 50px; margin-bottom: 30px; text-align: center; border-radius: 10px; font-size: 20px; font-weight: bold; } .container .students li:nth-child(5n) { margin-right: 0; } .container .buttonlist li button { float: left; width: 200px; height: 60px; background-color: #4caf5085; margin-right: 150px; text-align: center; line-height: 60px; border-radius: 10px; margin-top: 50px; font-weight: bold; } .container .buttonlist li button:hover { background-color: #4caf50; } .container .buttonlist li:nth-child(1) { margin-left: 150px; } .container .demo li { width: 200px; height: 150px; background-color: #4caf5085; float: left; margin-right: 150px; border-radius: 50%; margin-top: 10px; line-height: 150px; font-weight: bold; color: #fff; font-size: 60px; text-align: center; } .container .demo li:first-child { margin-left: 150px; } </style>
•javascript:
<script type="text/javascript"> var stuarray = ["小方", "小田", "小明", "小红", "小吕", "小于", "小美", "小绿", "李华", "小李", "小胡", "小夏", "小徐", "小小", "小吴", "小陈", "小狗", "小许", "小熊", "小新"]; var stulist = document.queryselector(".students").queryselector("ul"); var buttonlist = document.queryselectorall("button"); var demolist = document.queryselector(".demo").queryselectorall("li"); for (var i = 0; i < stuarray.length; i++) { var li = document.createelement("li"); stulist.appendchild(li); li.innerhtml = stuarray[i]; li.style.cssfloat = "left"; li.style.width = 200 + "px"; li.style.height = 60 + "px"; li.style.backgroundcolor = "#4caf5085"; li.style.color = "#fff"; li.style.lineheight = 60 + "px"; } var stuarraylist = stulist.queryselectorall("li"); function chooseone () { for (var i = 0; i < stuarraylist.length; i++) { stuarraylist[i].style.background = "#4caf5085"; } for (var i = 0; i < demolist.length; i++) { demolist[i].innerhtml = ""; } var interid = setinterval(function () { var x = math.floor(math.random() * stuarray.length); stuarraylist[x].style.backgroundcolor = "green"; demolist[1].innerhtml = stuarraylist[x].innerhtml; var timeid = settimeout(function () { stuarraylist[x].style.backgroundcolor = "#4caf5085"; }, 100); var y = math.floor(math.random() * stuarray.length); if (y == x) { cleartimeout(timeid); clearinterval(interid); stuarraylist[y].style.backgroundcolor = "green"; } }, 100); } function choosetwo () { for (var i = 0; i < stuarraylist.length; i++) { stuarraylist[i].style.background = "#4caf5085"; } for (var i = 0; i < demolist.length; i++) { demolist[i].innerhtml = ""; } var interid = setinterval(function () { do { var x1 = math.floor(math.random() * stuarray.length); var x2 = math.floor(math.random() * stuarray.length); } while (x1 == x2); stuarraylist[x1].style.backgroundcolor = "green"; stuarraylist[x2].style.backgroundcolor = "green"; demolist[0].innerhtml = stuarraylist[x1].innerhtml; demolist[2].innerhtml = stuarraylist[x2].innerhtml; var timeid = settimeout(function () { stuarraylist[x1].style.backgroundcolor = "#4caf5085"; stuarraylist[x2].style.backgroundcolor = "#4caf5085"; }, 100); var y1 = math.floor(math.random() * stuarray.length); var y2 = math.floor(math.random() * stuarray.length); if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 == x1)) { cleartimeout(timeid); clearinterval(interid); stuarraylist[x1].style.backgroundcolor = "green"; stuarraylist[x2].style.backgroundcolor = "green"; } }, 100); } function choosethree () { for (var i = 0; i < stuarraylist.length; i++) { stuarraylist[i].style.background = "#4caf5085"; } for (var i = 0; i < demolist.length; i++) { demolist[i].innerhtml = ""; } var interid = setinterval(function () { do { var x1 = math.floor(math.random() * stuarray.length); var x2 = math.floor(math.random() * stuarray.length); var x3 = math.floor(math.random() * stuarray.length); } while (x1 == x2 || x2 == x3 || x1 == x3); stuarraylist[x1].style.backgroundcolor = "green"; stuarraylist[x2].style.backgroundcolor = "green"; stuarraylist[x3].style.backgroundcolor = "green"; demolist[0].innerhtml = stuarraylist[x1].innerhtml; demolist[1].innerhtml = stuarraylist[x2].innerhtml; demolist[2].innerhtml = stuarraylist[x3].innerhtml; var timeid = settimeout(function () { stuarraylist[x1].style.backgroundcolor = "#4caf5085"; stuarraylist[x2].style.backgroundcolor = "#4caf5085"; stuarraylist[x3].style.backgroundcolor = "#4caf5085"; }, 100); var y1 = math.floor(math.random() * stuarray.length); var y2 = math.floor(math.random() * stuarray.length); var y3 = math.floor(math.random() * stuarray.length); if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 == y1)) { cleartimeout(timeid); clearinterval(interid); stuarraylist[x1].style.backgroundcolor = "green"; stuarraylist[x2].style.backgroundcolor = "green"; stuarraylist[x3].style.backgroundcolor = "green"; } }, 100); } buttonlist[0].addeventlistener("click", function () {chooseone()}, false); buttonlist[1].addeventlistener("click", function () {choosetwo()}, false); buttonlist[2].addeventlistener("click", function () {choosethree()}, false);
总结
以上所述是小编给大家介绍的原生js实现随机点名项目的实例代码,希望对大家有所帮助
上一篇: 一个人嘴上上在乎你