编程 Javascript

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实现刮刮乐效果

- Author -

蓝小安

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一行代码告别document.getElementById

Jun 01 Javascript

js如何实现设计模式中的模板方法

Jul 23 Javascript

jquery Tab效果和动态加载的简单实例

Dec 11 Javascript

js实现的点击div区域外隐藏div区域

Jun 30 Javascript

js获取checkbox值的方法

Jan 28 Javascript

基于jQuery Tipso插件实现消息提示框特效

Mar 16 Javascript

Angular2搜索和重置按钮过场动画

May 24 Javascript

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

Oct 19 jQuery

JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

Jun 07 Javascript

ES6基础之解构赋值(destructuring assignment)

Feb 21 Javascript

Vue实现图片与文字混输效果

Dec 04 Javascript

js代码编写无缝轮播图

Sep 13 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