电子木鱼 微信小程序源码 今天你积功德了吗?
短信预约 -IT技能 免费直播动态提醒
电子木鱼已经是火了很久的小程序了,今天闲来无事自己搞着玩玩。大家没事可以部署一个放松一下心情。纯属娱乐。大家可以点击看看我部署的项目。
1、首先新建一个微信小程序,这个我就不在演示了。
html文件代码
您的功德:{{value}} 功德+1 重置 自动
JS文件代码
// index.js// 获取应用实例const app = getApp();const clickAudioContext = wx.createInnerAudioContext({ useWebAudioImplement: true});var setInter;Page({ data: { classStyle: '', value:0, id:'default', restartimg:'/images/restart.png', restart:false, autoimg:'/images/auto.png', auto:false, // bg:null, // userInfo: {}, // hasUserInfo: false, // canIUse: wx.canIUse('button.open-type.getUserInfo'), // canIUseGetUserProfile: false, // canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad() { const bgAudioContext = wx.createInnerAudioContext({ useWebAudioImplement: false }); bgAudioContext.class="lazy" data-src = 'https://clemmensen.top/static/28297622582.mp3'; bgAudioContext.seek(21); bgAudioContext.loop=true; // bgAudioContext.play() // 播放 clickAudioContext.class="lazy" data-src = '/images/qiaoji.mp3'; }, onShareAppMessage(){ return{ title: '今日我已功德 +'+this.data.value+',你也一起来敲电子木鱼吧!', path:'/pages/muyu/muyu?id=123' } }, click() { clickAudioContext.play();//播放音乐 this.setData({ classStyle: 'animal', id:'font', value:this.data.value+1, }); setTimeout(() => { this.setData({ classStyle: '', }); }, 100);//图片还原 setTimeout(() => { this.setData({ id:'default' }); }, 500);//功德标签还原 }, restartFun:function(){ wx.showModal({ title: '提示', content: '是否重置数据', complete: (res) => { if (res.cancel) { } if (res.confirm) { this.setData({ value:0, auto:false, autoimg:'/images/auto.png' }); clearInterval(setInter); } } }) }, autoFun:function(){ if(this.data.auto){ this.setData({ auto:false, autoimg:'/images/auto.png' }); clearInterval(setInter); }else{ this.setData({ auto:true, autoimg:'/images/unauto.png' }); setInter=setInterval(()=>{ this.click(); },1000); } }})
CSS文件代码
page{background: black; } .animal{transform:scale(1.05); } .image{width:456rpx;height:332rpx ; } #default{color:white;height: 200px;position:absolute;bottom: 632rpx;opacity:0; } #font{color:white;height: 200px;animation: mymove 1s;position:absolute;bottom: 632rpx;opacity:0;margin-left: 450rpx;font-size: 37rpx; } @keyframes mymove {from {bottom:450rpx;opacity:100;}to {bottom:650rpx;opacity:0;} } .title{margin-left: 66rpx;color:white; margin-top: 25rpx; font-size: 47rpx; } .mainCont{ width: 100%; display: flex; flex-direction: column; align-items: center; position:absolute; bottom:200rpx;} .right_button {position: absolute;right: 40rpx; width: 50rpx; display: flex; flex-direction: column; align-items: center;} .right_button image{width: 100%; height: 50rpx;} .right_button text {color: white; padding:20rpx 0 40rpx 0 ; font-size: 25rpx;} .share {width: 100rpx; height: 60rpx; margin: 80rpx; background-color: white; border-radius: 20rpx; display: flex; justify-content: center;align-items: center; font-size: 40rpx;}
源码下载:
扫描二维码回复:电子木鱼。即可免费获得源码及素材。后期我还会更新其他有趣的小游戏。
来源地址:https://blog.csdn.net/smss007/article/details/130583187
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341