环境

近期真的是工作压力大至脱发?妈妈默默地一句是不是又变瘦了忽然要我五味杂陈,嗯 还是想要跟自己说一声奋斗吧!最近日子至今,秀发也有在降低,所以想多给自己“加加福报”,因此回想起很多年前下载的软件一款木鱼种App,便打开敲下去,但使用感受不是太好!每敲两下(乃至才敲1下),就弹出广告宣传,而见到广告宣传的一瞬间,我已不自觉的敲完后第2下,并不是出乎意料的是下一秒就跳到广告推送......。嗯 所以并没有什么能难能可贵倒程序猿,若是有,那便是素材内容不足。好啦,绕开空话不说,下边踏入主题

剖析

要求

网页页面如图所示,但是在每一次敲打时,都是会随着4个同时发生动作:

  1. 木鱼进行一次放大
  2. 弹出来文本浮层“福报 1”,且文本清晰度由1变0
  3. 进行一次手机振动
  4. 播放视频敲打木鱼的声音

木鱼进行一次放大弹出来文本浮层“福报 1”,且文本清晰度由1

技术栈

面对这样的周期短,中后期也基本上不用维修的新项目(也没有繁杂的网络请求一说),本文直接用原生态JavaScript进行开发。或是你也可以尝试一下低代码

有关低代码,您可以放心阅读此篇干货知识文章内容《低代码都做了什么?(为什么?怎么实现Low-Code?)》

对于TypeScript,您可以通过《谈谈写TypeScript实践而来的心得体会》本文快速入门或升阶TS

完成

网页布局

木鱼进行一次放大弹出来文本浮层“福报 1”,且文本清晰度由1

图上右边标明了三个部分:

  1. img标识用以特定木鱼的图片url详细地址,在木鱼开展放大时,对于该标识提升/删掉css类名就可以
  2. 每一次敲打时所形成的文本由p标识形成,且每一个p标识都存在div标识下
  3. audio标识会到敲打时播放声音

本文不容易涉及到具体Html、Css一部分。如有疑问,请于该项目地GitHub中寻找到答案

逻辑性一部分

前期准备工作

根据JavaScript获得要实际操作的实际dom

const dom = {
    // 木鱼
    woodenFish: document.querySelector("img"),
    // 文本浮层
    text: document.querySelector(".w-f-c-text"),
    // 声频
    audio: document.querySelector("audio")
}

木鱼放大

这儿思路是敲打时给img增加一个含有css animation的样式类,该animation作用是让木鱼进行一次放大,比如

.w-f-c-i-size {
    /** 这儿的animation只能运行一次放大,但后面会通过增加/删掉此类名来做到能够进行n次放大效果 */
    animation: wooden-fish-size 0.3s;
}

@keyframes wooden-fish-size {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

款式解决以后,根据原生态JavaScript所提供的dom classList开展css款式类名的提高与删掉。dom classList一共有四个方式

  1. add:在规定节点上增加一个款式类名
  2. remove:在规定节点上删掉一个款式类名
  3. toggle:在规定连接点A上若已经有款式类名a,则把a删掉;如果没有款式类名a,则加上类名a
  4. replace:将特定节点上的样式类名替换为另一个款式类名。实际效果同String##replace一致
const woodenFish = {
    // 封装形式一个用以提升/删掉类名的办法
    className(type) {
        dom.woodenFish.classList[type]("w-f-c-i-size")
    },
    size() {
        this.className("add")
        setTimeout(() => this.className("remove"), 300)
    }
}

size方式用以进行一次木鱼的放大。启用此方法时,最先为img标识提升类w-f-c-i-size,在300ms后,然后将此类名清除

怎么是300ms?由于css animation的时长为300ms

需注意,size方式里的thiswoodenFish目标,因此this.className就等于是woodenFish.className

有关this或其他JavaScript问题,你可以在《JavaScript每日一题》栏目中寻找相对应的题型反复练习

文本浮层

const woodenFish = {
    className() {},
    size() {},
    createText() {
        const p = document.createElement("p")
        p.innerText = "福报 1"
        dom.text.appendChild(p)
    }
}

createText方式用以创建一个p标识,该标签的文字部分为“福报 1”,之后将该标识增加在div下就可以

小tip:JSX(或react)中撰写HTML类别的注解

时尚博主在这时候撰写document.createElement这一原生态方式时,忽然想起了近期需要用到的一个原生态特性outerHTML,该特性与innerHTML的差别就就不多说了。在JSX中撰写html类别的注解,应用中括号的方式({/** */})是不可取的,毕竟在编译时这个东西都能被丢掉,这时可以用由React所提供的dangerouslySetInnerHTML特性,但体验感受不大好。因此可以用ouertHTML相互配合ref去解决,vue同样,比如:

const HtmlComment: FC<HtmlCommentType> = ({ children }) => {
    const virtual = useRef<HTMLSpanElement>(null)
    useEffect(() => {
        virtual.current!.outerHTML = `<!-- ${children} -->`
    }, [])
    return <span ref={virtual} />
}

H5操纵手机振动

const vibrate = () => {
    const navigator = window.navigator
    if (!("vibrate" in navigator)) return
    navigator.vibrate =
        navigator.vibrate ||
        navigator.webkitVibrate ||
        navigator.mozVibrate ||
        navigator.msVibrate
    if (!navigator.vibrate) return
    // 上边的代码都是开展兼容模式分辨,仅有下边这一行是进行手机振动的API
    navigator.vibrate(300)
}

像进行手机振动这种Api,首先就是要开展兼容模式分辨,因此上边vibrate方式的90%一部分都在进行兼容模式分辨。留意,window.navigator提供了一个用以进行机器设备震动方式,即window.navigator.vibrate

window.navigator.vibrate方式的参数:

  1. 一个number种类数值

这种方法表明振动持续多长时间,比如window.navigator.vibrate(300),也表示振动不断300ms

  1. 一个number类别的二维数组

这种方法表明振动、中止间距的时间也。比如window.navigator.vibrate([100, 30, 100]),也表示先振动100ms,接着中止30ms,然后振动100ms

window.navigator.vibrate方式在振动成功时回到true,不然回到false

vibrate兼容模式

木鱼进行一次放大弹出来文本浮层“福报 1”,且文本清晰度由1

电脑浏览器全屏幕实际操作

const toggleFullScreen = () => {
    if (!document.fullscreenElement)
        return document.documentElement.requestFullscreen()
    if (!document.exitFullscreen) return
    document.exitFullscreen()
}

document.addEventListener("keydown", (e) =>
    e.keyCode == 13 ? toggleFullScreen() : false
)

toggleFullScreen方式会到全屏幕或者非全屏幕之间来回转换,运用了下列特性/方式:

  1. document.fullscreenElement 回到现阶段正以全屏模式表明元素,要是没有,则回到null
  2. document.documentElement.requestFullscreen 用以进行全屏幕要求。若全屏幕要求取得成功,则其函数公式回到成功Promise目标,不然回到不成功的Promise目标。

在全屏幕成功时,全屏显示元素会开启fullscreenchange事情;类似文本框在键入的时候会开启onchange事情

  1. document.exitFullscreen 方式用以使现阶段原素退出全屏方式

接着为document关联keydown事情,假如按下回车,即在全屏幕/非全屏幕中间转换,不然不做任何实际操作

声频事情实际操作

以前时尚博主写播放软件时就发觉声频的特性、方式、事情好多好多,因此这里只例举2个本项目中需要用到的方式

  1. play() 使播放视频逐渐
  2. pause() 使播放暂停

制作完成

根据以上几个流程就已经完成全部需要用到的物品,最终仅需为木鱼申请注册“敲打”事情就可以

dom.woodenFish.addEventListener("click", () => {
    // 木鱼放大
    woodenFish.size()
    // 建立文本浮层
    woodenFish.createText()
    // 播放视频敲打木鱼的声音
    dom.audio.play()
    // 进行手机振动
    vibrate()
})

文尾

从一次突发奇想,到自己从0至1进行这一又简单又有意思的小程序,不论是技术性视角,或是个人收获角度来说,全是满载而归!如今您可以通过下列2个详细地址来 “福报 1” :

  1. 在线应用详细地址
  2. GitHub详细地址,该库房将持续制做一些package,热烈欢迎Star !

因为时间匆忙,原文中不正确的地方无可避免,欢迎阅读者指正。如果您觉得本文很好,热烈欢迎点赞收藏与支持,大家下篇文章见!

前端开发-adminJS.cn

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:木鱼进行一次放大弹出来文本浮层“福报 1”,且文本清晰度由1