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、最终网页显示界面如下


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js HTML5手机刮刮乐代码

    手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view

  • 20行JS代码实现网页刮刮乐效果

    20行JS代码实现网页刮刮乐效果

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&

  • 移动端刮刮乐的实现方式（js+HTML5）

    移动端刮刮乐的实现方式（js+HTML5）

    程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐

  • 原生JavaScript实现刮刮乐

    本文实例为大家分享了JavaScript实现刮刮乐的具体代码,供大家参考,具体内容如下 原理 鼠标按住移动的时候,实现刮刮乐的效果,那就是鼠标按下的同时鼠标移动,那就清除画布.松开鼠标,鼠标移动不再清除画布了,那就得清除事件. canvas画布 1.获取画布元素 var canvas = document.getElementById('canvas'); 2.获取绘图对象getContext var ctx = canvas.getContext('2d'); 3.画线 ctx.lineWid

  • JavaScript实现刮刮乐效果

    刮刮乐怎么做? 本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码,供大家参考,具体内容如下 来这我教你 1.首先准备好编程软件webStorm或者eclipse都行 2.不会编写代码?给你准备好了 3.如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示

  • JavaScript canvas实现刮刮乐案例

    本文实例为大家分享了JavaScript canvas实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 HTML代码: <div class="ggk"> <span id="span">200元</span> <canvas id="canvas"></canvas> </div> css代码: .ggk { width: 200px; height: 100px

  • javascript+canvas实现刮刮卡抽奖效果

    运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

  • Android使用Canvas对象实现刮刮乐效果

    在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

  • 微信小程序canvas实现刮刮乐效果

    本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 设计流程 设计思路 canvas设置背景图,作为中奖图片: 在canvas上绘制刮的灰色涂层: 通过绑定的事件,清除对应区域的涂层: 最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚. 1.全局常量 获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,canvas的面积. const

  • Android刮刮乐效果-proterDuffXfermode的示例代码

    Android刮刮乐效果-proterDuffXfermode的示例代码

    先看看实现的效果 这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的. proterDuffXfermode 在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.PorterDuffXfermode的功能十分的强大,其他的

  • Android通过自定义view实现刮刮乐效果详解

    Android通过自定义view实现刮刮乐效果详解

    前言 已经有两个月没有更新博客了,其实这篇文章我早在两个月前就写好了,一直保存在草稿箱里没有发布出来.原因是有一些原理性的东西还没了解清楚,最近抽时间研究了一下混合模式,终于也理解了刮刮乐是怎么实现的,所以想继续分享一下自己的一些心得,先上效果图. 效果图: 实现原理 其实刮刮乐实现原理也不算很复杂,最关键的还是需要了解Paint的混合模式.因为刮刮乐是由两个bitmap组成的,一个是源图另一个是目标图,我们需要把目标图的颜色改成灰色,在源图上面盖上了一张灰色的目标图.当手指滑动屏幕时paint

随机推荐