用JS如何写一个简单的刮刮乐小游戏？
发布时间：2022-01-20 15:47:43 所属栏目：语言 来源：互联网
导读：刮刮乐怎么做？ 本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码，供大家参考，具体内容如下 来这我教你 1、首先准备好编程软件webStorm或者eclipse都行 2、不会编写代码？给你准备好了 3、如下 !DOCTYPE html html lang=en head meta charset=UTF-
|
刮刮乐怎么做？ 本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码，供大家参考，具体内容如下 来这我教你 1、首先准备好编程软件webStorm或者eclipse都行 2、不会编写代码？给你准备好了 3、如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 90px; width: 300px; margin: 0 auto; margin-top: 5px; } .box{ height: 70px; width: 70px; background-color: darkgray; line-height: 70px; text-align: center; display: inline-block; margin-left: 5px; } </style> </head> <body> <div class="outer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="outer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="outer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <script> var boxs = document.getElementsByClassName("box"); var item = ["一等奖","二等奖","三等奖","谢谢","谢谢","谢谢","谢谢","谢谢","谢谢",]; for (var i = 0;i<boxs.length;i++){ var box = boxs[i]; box.onclick = function (){ this.style.backgroundColor="red"; //this.innerText="一等奖"；//随即从数组中获取内容，并且不能重复！ var number = Math.floor(Math.random()*9); this.innerText = item[number]; this.style.color = "#fff"; this.style.verticalAlign = "top"; } } </script> </body> </html> （编辑：沧州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
