刮刮乐,前端代码html+js实现,直接运行

简介: 刮刮乐,前端代码html+js实现,直接运行

1,介绍


刮刮乐实现,主要使用jquery.eraser.js实现擦除  在线预览

效果图如下:

2,代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <title>刮刮乐</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-image: url(ggbj.jpg);
    }
    #app {
      position: relative;
      top: 50%; /*偏移*/
      transform: translateY(-50%);
    }
    .title {
      color: #ffe519;
      padding-top: 20%;
    }
    .outBox {
      height: 500px;
      background-color: #ab0000;
      text-align: center;
      position: relative;
    }
    #scratch {
      position: relative;
      top: 45%;
      width: 200px;
      height: 70px;
      background: #AB945E;
      z-index: 100;
      margin: auto;
    }
    #card {
      width: 100%;
      height: 100%;
      font-size: 28px;
      line-height: 70px;
      color: #ff0000;
      text-align: center;
    }
    .guaguaImg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <div id="app" v-show="visible">
      <el-row type="flex" justify="space-around">
        <el-col :span="4" v-for="(index) in 5">
         <div class="outBox">
          <h1 class="title">惊喜刮刮乐</h1>
          <div id="scratch">
            <div id="card">{{prizeList[index]}}</div>
            <img class="guaguaImg" :id="ki(index)" src="./guagua.jpg">
          </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
    <script src="./jquery-2.1.0.min.js"></script>
    <script src="./jquery.eraser.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: function() {
        return { 
          visible: false,
          prizeList: ["上班免打卡", "男票一枚", "谢谢参与", "女票一枚", "带薪休假", "一百万"]
        }
        },
        mounted() {
        for(var i = 1; i < 6; i++) {
          this.initCard(i);
        }
        },
        created() {
        this.visible = true;
        },
        methods: {
          ki: function (i) {
            return "guaguaImg" + i
          },
          initCard(index) {
          $("#guaguaImg" + index).eraser({
            "size": 15,
            completeRatio: .4, //擦到百分之多少清屏
            completeFunction: function() {
              $("#guaguaImg" + index).eraser('clear');
            }
          });
          }
        }
      })
    </script>
  </body>
</html>


3,源代码下载

目录
相关文章
|
21天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
96 1
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
6月前
|
JavaScript 前端开发 API
|
4月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
74 0
|
6月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
470 9
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
894 14
|
12月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
237 0
|
12月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
358 6
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章