【闲得无聊】写个web版功德无量附代码+静态资源

【闲得无聊】写个web版功德无量附代码+静态资源

Vue2环境开发

web版无量功德

<template>
<div class="merits">
  <p class="link-txt">
    <el-link :underline="false" type="primary">{
   
   {name}}今日总功德：{
   
   {meritsNum}}</el-link>
  </p>
   // 自定义鼠标样式
  <img class="mouse" src="@/assets/gun.jpg" alt />
   // 点击木鱼触发事件
  <div @click="add" class="muyu-png">
    <img src="@/assets/big_muyu.jpg" alt />
  </div>
   // 音频标签，设置隐藏
  <audio v-show="false" ref="audio" autoplay controls="controls" preload="auto" crossorigin="anonymous" src="/my.mp3"></audio>
</div>
</template>

/**
* @program: merits
*
* @description: 功德无量
*
* @author: CuiYunFei
*
* @create: 2022-10-18
**/

export default {
    
    
  data () {
    
    
    return {
    
    
      name: '',
      meritsNum: 0,
    }
  },
  created () {
    
    
    let time = this.getDate()
    // 如果是 24点清除掉 功德数字
    if (time >= '23:59:59') {
    
    
      this.meritsNum = 0
      localStorage.setItem('meritsNum', 0)
    } else {
    
    
      this.meritsNum = localStorage.getItem('meritsNum') || 0
    }
    // 判断有无姓名 无则打开弹框
    if (!localStorage.getItem('name')) {
    
    
      this.promptMethod()
    } else {
    
    
      this.name = localStorage.getItem('name')
    }
    this.$nextTick(() => {
    
    
       // 隐藏鼠标原始样式
      let body = document.querySelector("body");
      body.style.cursor = "none"
		
      // 设置鼠标样式为刚才的image标签 并修改位置
      let mouse = document.querySelector('.mouse')
      window.addEventListener('mousemove', event => {
    
    
        mouse.style.left = event.clientX - mouse.offsetWidth / 2 + 'px'
        mouse.style.top = event.clientY - mouse.offsetHeight / 2 + 'px'
      })
    })
  },
  methods: {
    
    
    add () {
    
    
      let mouse = document.querySelector('.mouse')
      // 设置点击时的木槌动画效果
      mouse.style.transform = 'skew(0,0)'
      // 音频播放
      this.$refs.audio.play()
      if (this.meritsNum !== '功德已经爆表了') {
    
    
        this.meritsNum++
        localStorage.setItem('meritsNum', this.meritsNum)
      }
      // 恢复木槌初始状态
      setTimeout(() => {
    
    
        mouse.style.transform = 'skew(30deg,20deg)'
      }, 200);
    },
    getDate () {
    
    
      let date = new Date()
      let hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
      let minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
      let second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
      return hour + ':' + minute + ':' + second
    },
    promptMethod () {
    
    
      this.$prompt('请输入你的姓名', '功德无量', {
    
    
        confirmButtonText: '确定',
        showCancelButton: false,
        showClose: false,
        closeOnClickModal: false,
        inputPattern: /^.+$/,
        inputErrorMessage: '你妈生你的时候没给你起名？'
      }).then(res => {
    
    
        this.name = res.value
        localStorage.setItem('name', this.name)
      })
    }
  },

  watch: {
    
    
    meritsNum: {
    
    
      handler (newVal, oldVal) {
    
    
        if (newVal > 99999) {
    
    
          this.meritsNum = '功德已经爆表了'
        }
      },
      deep: true
    }
  }
}

.merits {
    
    
  height: 100%;
  padding: 8px 20px;
  box-sizing: border-box;
  background-image: url("../../assets/gd.webp");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;

  .link-txt {
    
    
    display: flex;
    justify-content: flex-end;
  }

  .btn {
    
    
    position: absolute;
    color: #fff;

    img {
    
    
      width: 100px;
      height: 40px;
    }
  }

  .muyu-png {
    
    
    position: absolute;
    left: 900px;
    top: 100px;
    color: #fff;

    img {
    
    
      width: 500px;
      height: auto;
    }
  }

  .mouse {
    
    
    width: 360px;
    height: 180px;
    position: fixed;
    left: -150px;
    z-index: 1000;
    transition: unset;
    // 禁止本身的点击事件 并顺延至下级元素
    pointer-events: none;
    animation: all 2s;
    transform: skew(30deg, 20deg);
  }

  .add-list {
    
    
    position: absolute;
    left: 1400px;
    top: 160px;
  }
}