Js實現(xiàn)累加上漂浮動畫示例
前言
之前,看到一個比較有意思的小程序,就是靜神木魚,可以實現(xiàn)在線敲木魚,自動敲木魚,手盤佛珠,靜心頌缽的
整個小程序功能比較小巧,大道之簡,風靡過一陣的,而且賺得盆滿缽滿的,下面就實現(xiàn)一下這個小程序中敲木魚的例子的
小程序示例
示例代碼如下所示
<template> <div class="leijia-wrap"> <div class="leijia-content"> <h2>靜神木魚</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?'自動':'非自動'}}</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; // 獲取本地存儲localStorage }, methods: { // 敲擊 handleClick() { this.count = parseInt(this.count)+1; localStorage.setItem('count',this.count); // 設(shè)置本地存儲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; }, // 自動敲打,累加 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); // 清除定時器 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)鍵幀動畫 */ @keyframes showtip { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-15px); } } } </style>
分析
[1]. 實現(xiàn)控制數(shù)字的累加,并且解決字符串+拼接的問題(具體解決使用parseInt()即可)
[2].實現(xiàn)自動的累加,需要知道設(shè)置定時器setInterval,以及清除定時器
[3].一個控件控制元素狀態(tài)的變化,開關(guān)的設(shè)置
[4].刷新頁面,下次進來時仍然保留上一次的狀態(tài),則需要使用本地緩存localStorage,以及清除指定的本地緩存
[5].控制音頻audio元素的播放和暫停
[6].想要實現(xiàn)累加向上漂浮動畫,則需要使用css3中的動畫關(guān)鍵幀
在微信小程序當中,實現(xiàn)的邏輯是相似的,也是使用了微信的本地存儲功能的,動畫的話,使用了小程序
自帶的動畫API就可以實現(xiàn)的
以上就是Js實現(xiàn)累加上漂浮動畫示例的詳細內(nèi)容,更多關(guān)于Js累加上漂浮動畫的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Bootstrap多級導(dǎo)航欄(級聯(lián)導(dǎo)航)的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap多級導(dǎo)航欄的實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03js 動態(tài)生成json對象、時時更新json對象的方法
下面小編就為大家?guī)硪黄猨s 動態(tài)生成json對象、時時更新json對象的方法。小編覺的挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12在b/s開發(fā)中經(jīng)常用到的javaScript技術(shù)
在b/s開發(fā)中經(jīng)常用到的javaScript技術(shù)...2006-08-08