JavaScript实现刮刮乐效果
刮刮乐怎么做？
本文实例为大家分享了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>
4、这个部分的代码块文字内容可以自定义，改写成你想要显示的内容
5、最终网页显示界面如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. Docker 容器健康检查机制2. CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效3. ASP.NET MVC使用正则表达式验证手机号码4. vue+springboot+element+vue-resource实现文件上传教程5. PyTorch模型转TensorRT是怎么实现的?6. python正则表达式re.match()匹配多个字符方法的实现7. 解决VUE 在IE下出现ReferenceError: Promise未定义的问题8. Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页9. java 使用正则表达式去除前后空格10. vue自定义标签和单页面多路由的实现代码
网公网安备