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

环境

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

剖析

要求

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

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

技术栈

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

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

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

完成

网页布局

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

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方式里的this为woodenFish目标，因此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

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

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

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

vibrate兼容模式

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

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事情

3. 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 ！

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