Js實(shí)現(xiàn)累加上漂浮動(dòng)畫(huà)示例
前言
之前,看到一個(gè)比較有意思的小程序,就是靜神木魚(yú),可以實(shí)現(xiàn)在線敲木魚(yú),自動(dòng)敲木魚(yú),手盤(pán)佛珠,靜心頌缽的
整個(gè)小程序功能比較小巧,大道之簡(jiǎn),風(fēng)靡過(guò)一陣的,而且賺得盆滿缽滿的,下面就實(shí)現(xiàn)一下這個(gè)小程序中敲木魚(yú)的例子的
小程序示例
示例代碼如下所示
<template> <div class="leijia-wrap"> <div class="leijia-content"> <h2>靜神木魚(yú)</h2> <div class="text">{{count}}<span class="animatetip" v-show="isTip">功德+1</span></div> <div class="btn"> <el-button type="primary" size="mini" @click="handleClick" ref="btnClick">敲擊</el-button> <el-button type="primary" size="mini" @click="handleVoince" ref="btnJinYin">{{isVoince == true?'非靜音':'靜音'}}</el-button> <el-button type="danger" size="mini" @click="handleAuto">{{onOff == true?'自動(dòng)':'非自動(dòng)'}}</el-button> <el-button type="info" size="mini" @click="handleClear">清除</el-button> </div> </div> <!--敲擊音頻---> <audio id="myaudio" src="../images/js-article-imgs/video/qiaoji.mp3" style="display:none"> Your browser does not support the audio element. </audio> </div> </template> <script> export default { data() { return { count: 0, timer: null, onOff: true, isVoince: true, isTip: false } }, mounted(){ this.count = localStorage.getItem('count') || 0; // 獲取本地存儲(chǔ)localStorage }, methods: { // 敲擊 handleClick() { this.count = parseInt(this.count)+1; localStorage.setItem('count',this.count); // 設(shè)置本地存儲(chǔ)localStorage this.isTip = true; setTimeout(()=> { this.isTip = false; }, 300); let music = document.getElementById("myaudio"); if(this.isVoince) { music.play(); }else { music.pause(); } }, // 控制靜音還是非靜音 handleVoince() { let music = document.getElementById("myaudio"); if(this.isVoince) { music.play(); }else { music.pause(); } this.isVoince = !this.isVoince; }, // 重置數(shù)據(jù),清除localStorage handleClear(){ localStorage.removeItem('count'); this.count = 0; }, // 自動(dòng)敲打,累加 handleAuto() { let music = document.getElementById("myaudio"); if(this.onOff) { this.timer = setInterval(() => { this.count = parseInt(this.count)+1; this.isTip = true; setTimeout(()=> { this.isTip = false; }, 300); music.play(); },1000) }else { clearInterval(this.timer); // 清除定時(shí)器 music.pause(); } this.onOff = !this.onOff; }, } } </script> <style lang="scss" scoped> .leijia-wrap { text-align: center; margin-top: 10px; .btn { margin-top: 20px; } .text { position:relative; } .animatetip { opacity: 0; animation: showtip 1s; position:absolute; right: 320px; top: 0px; } /* 關(guān)鍵幀動(dòng)畫(huà) */ @keyframes showtip { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-15px); } } } </style>
分析
[1]. 實(shí)現(xiàn)控制數(shù)字的累加,并且解決字符串+拼接的問(wèn)題(具體解決使用parseInt()即可)
[2].實(shí)現(xiàn)自動(dòng)的累加,需要知道設(shè)置定時(shí)器setInterval,以及清除定時(shí)器
[3].一個(gè)控件控制元素狀態(tài)的變化,開(kāi)關(guān)的設(shè)置
[4].刷新頁(yè)面,下次進(jìn)來(lái)時(shí)仍然保留上一次的狀態(tài),則需要使用本地緩存localStorage,以及清除指定的本地緩存
[5].控制音頻audio元素的播放和暫停
[6].想要實(shí)現(xiàn)累加向上漂浮動(dòng)畫(huà),則需要使用css3中的動(dòng)畫(huà)關(guān)鍵幀
在微信小程序當(dāng)中,實(shí)現(xiàn)的邏輯是相似的,也是使用了微信的本地存儲(chǔ)功能的,動(dòng)畫(huà)的話,使用了小程序
自帶的動(dòng)畫(huà)API就可以實(shí)現(xiàn)的
以上就是Js實(shí)現(xiàn)累加上漂浮動(dòng)畫(huà)示例的詳細(xì)內(nèi)容,更多關(guān)于Js累加上漂浮動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Bootstrap多級(jí)導(dǎo)航欄(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap多級(jí)導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03前端使用crypto.js進(jìn)行加密的函數(shù)代碼
最近在使用Cookies加密保存數(shù)據(jù)的時(shí)候,接觸到crypto,使用還算簡(jiǎn)單,在這里記錄一下2020-08-08JavaScript每天必學(xué)之?dāng)?shù)組和對(duì)象部分
JavaScript每天必學(xué)之?dāng)?shù)組和對(duì)象部分,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09NestJs使用Mongoose對(duì)MongoDB操作的方法
這篇文章主要介紹了NestJs使用Mongoose對(duì)MongoDB操作的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02js 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法
下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法。小編覺(jué)的挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12在b/s開(kāi)發(fā)中經(jīng)常用到的javaScript技術(shù)
在b/s開(kāi)發(fā)中經(jīng)常用到的javaScript技術(shù)...2006-08-08