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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python3处理word文档实例分析
2020/12/01 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
陈欧广告词
2014/03/14 职场文书
学生会竞聘书范文
2014/03/31 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python