天天看點

原生H5實作觀音抽簽祈福效果

<!DOCTYPE html>
<html lang="en">
<head style="overflow: hidden!important;">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv=X-UA-Compatible content="ie=edge">
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-touch-fullscreen content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
  <meta name=format-detection content="telephone=no">
  <meta name=format-detection content="email=no">
  <meta name=renderer content=webkit>
  <meta name=screen-orientation content=portrait>
  <meta name=x5-orientation content=portrait>
  <meta name=x5-fullscreen content=true>
  <meta name=full-screen content=yes>
  <meta name=keywords content="">
  <meta name=description content="">
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <script src="../../js/vue.js"></script>
  <script>
        (function (doc, win) { // 移動端适配
            var docEl = doc.documentElement,
                isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                dpr = window.top === window.self ? dpr : 1, //被iframe引用時,禁止縮放
                dpr = 1,
                scale = 1 / dpr,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
            docEl.dataset.dpr = dpr
            var metaEl = doc.createElement('meta')
            metaEl.name = 'viewport'
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale
            docEl.firstElementChild.appendChild(metaEl)
            var recalc = function () {
                var width = docEl.clientWidth
                if (width / dpr > 375) {
                    width = 375 * dpr
                }
                // 乘以100,px : rem = 100 : 1
                docEl.style.fontSize = 100 * (width / 375) + 'px'
            }
            recalc()
            if (!doc.addEventListener) return
            win.addEventListener(resizeEvt, recalc, false)
        })(document, window)
  </script>
</head>      
<body style="font-size: 0.05rem;background: rgb(210, 36, 56);">
<div id="app" style="overflow: hidden!important;">
  <audio src="../../img/pray/yaoqian.mp3" preload="auto" ref="audioSrc" id="mp3"></audio>
  <!--抽到的簽文-->
  <div v-if="getQian" class="flex justify-center"
     style="z-index: 99999;position: relative;animation: cq_two-data-v-ce8ed35e 1.5s linear;">
    <div style="position: absolute;top: 0.82rem;left: 0.55rem;-webkit-animation: yuncai1 2s linear infinite;animation: yuncai1 2s linear infinite;">
      <img style="width: 0.87rem;height: 0.23rem;" :src="downFive">
    </div>
    <div style="-webkit-animation: yuncai2 2s linear infinite;animation: yuncai2 2s linear infinite;position: absolute;top: 2.67rem;left: 2.36rem">
      <img style="width: 0.9rem;height: 0.19rem;" :src="downFour">
    </div>

    <div style="position: absolute;top: 0.36rem;left: 0;width: 100%;text-align: center">
      <img style="width: 0.64rem;height: 2.68rem;" :src="qianImg">

    </div>
    <div style="position: absolute;top: 3.19rem;left: 0;width: 100%;text-align: center">
      <img style="width: 2.97rem;height: 0.96rem;" :src="ssq">
    </div>
    <div style="position: absolute;top: 4.48rem;left: 0;width: 100%;text-align: center">
      <img @click="chakan" style="width: 1.87rem;height: 0.48rem;" :src="ck">
    </div>
  </div>
  <!--蒙版-->
  <div v-show="modalStatus" class="mio-modal-mask"></div>
  <!--首頁-->
  <div v-show="true" style="position: relative;">
    <img style="z-index: 1;" :src="gy" class="full-width-height">
    <div style="z-index: 3;position: absolute;top: 1.81rem;left: 0;width: 100%;text-align: center;">
      <img style="width: 2.06rem;height: 2.07rem" :src="yuanpan">
    </div>
    <div style="z-index: 5;position: absolute;top: 1.24rem;left: 0;width: 100%;text-align: center;">
      <img class="xuanzhun" style="width: 3.16rem;height: 3.2rem" :src="guang">
    </div>
    <div style="z-index: 7;position: absolute;top: 2.29rem;text-align: center;left: 0;width: 100%">
      <img style="width: 2.87rem;height: 4.15rem;" :src="guanyin">
    </div>
  </div>
  <div v-show="true">
    <div style="position: fixed;bottom: 0;z-index: 8;">
      <img style="width: 3.75rem;height: 2.02rem" :src="kaishi">
    </div>
    <div style="position: fixed;bottom: 0.27rem;z-index: 9;text-align: center;left: 0;width: 100%">
      <img @click="lot" style="animation:scale-upOne 2s infinite linear;width: 1.12rem;height: 0.44rem;"
         :src="ksBtn">
    </div>
  </div>
  <!--抽簽動畫-->
  <div v-if="qianStatus" style="position: fixed;top: 60%;left: 50%;transform: translate(-50%, -50%);z-index: 999;">
    <div class="qianhe" style="width: 1.1rem;-webkit-transform-origin: center bottom;transform-origin: center bottom;
       -webkit-animation: qianhe 1s linear 0s;animation: qianhe 1s linear 0s;">
      <img style="z-index: 99;" :src="qt">
    </div>
    <div class="getQian2"
       style="position: absolute;width: 0.25rem;right: 0.3rem;top: 0.2rem;font-size: 0;opacity: 0;-webkit-animation: qian 1s linear 2s;animation: qian 1s linear 1s;">
      <img style="z-index: 88;" :src="qian">
    </div>
  </div>
</div>      
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                downFour: '../../img/pray/download-4.png',
                downFive: '../../img/pray/download-5.png',
                ssq: '../../img/pray/shangshangqian.png',
                ck: '../../img/pray/chakan.png',
                gy: '../../img/pray/[email protected]',
                yuanpan: '../../img/pray/[email protected]',
                guang: '../../img/pray/[email protected]',
                guanyin: '../../img/pray/[email protected]',
                kaishi: '../../img/pray/[email protected]',
                ksBtn: '../../img/pray/[email protected]',
                qt: '../../img/pray/qiantong.png',
                qian: '../../img/pray/qian.png',
                qianStatus: false,
                show: false,
                modalStatus: false,
                qianImg: '',
                getQian: false,
                num: ''
            }
        },
        created() {
            document.body.addEventListener('touchmove', function (evt) { // 禁止微信浏覽器拖動
                evt.preventDefault()
            }, {passive: false})
        },
        methods: {
            lot() {
                this.$refs.audioSrc.play()
                this.modalStatus = true
                this.qianStatus = true
                this.num = this.randomNum(1, 24)
                this.qianImg = `../../img/pray/qian/q${this.num}.png`
                setTimeout(() => {
                    this.qianStatus = false
                    this.getQian = true
                }, 1500)
                setTimeout(() => {
                    // this.chakan()
                }, 5000)
            },
            randomNum(min, max) { // 生成随機數 min<=num<=max
                return Math.floor(Math.random() * (max - min + 1)) + min
            },
            chakan() {
                window.location.href = `http://192.168.3.99:8888/mios/src/html/project/pray/share.html?num=${this.num}`
            },
        },
    })
</script>