【闲得无聊】写个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;
}
}