JavaScript实现刮刮乐效果


Posted in Javascript onNovember 01, 2020

刮刮乐怎么做?

本文实例为大家分享了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、这个部分的代码块文字内容可以自定义,改写成你想要显示的内容

JavaScript实现刮刮乐效果

5、最终网页显示界面如下
JavaScript实现刮刮乐效果
JavaScript实现刮刮乐效果
JavaScript实现刮刮乐效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
You might like
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
初探nodeJS
2017/01/24 NodeJs
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python读大数据txt
2016/03/28 Python
python 排序算法总结及实例详解
2016/09/28 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
django删除表重建的实现方法
2019/08/28 Python
Python随机数函数代码实例解析
2020/02/09 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
什么是唯一索引
2015/07/05 面试题
群众路线调研报告范文
2014/11/03 职场文书
电工实训报告总结
2014/11/05 职场文书
功夫熊猫观后感
2015/06/10 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
如何获取numpy array前N个最大值
2021/05/14 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Golang 对es的操作实例
2022/04/20 Golang