一文入坑【Canvas】多图与案例详解

• 倒计时3s翻转卡牌 &＃xff0c;这里采用了定时器的方法&＃xff0c;上面讲过&＃xff0c;添加移除transfrom都会响应过渡&＃xff0c;那么我们只需要在倒计时结束时统一为卡牌更换背景图即可

let t &＃61;setTimeout(function () {for(let i in left_Map) {left_Map[i].removeClass(&＃39;shine&＃39;)left_Map[i].css(&＃39;background-image&＃39;, &＃96;url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp)&＃96;)}for(let i in right_Map) {right_Map[i].removeClass(&＃39;shine&＃39;)right_Map[i].css(&＃39;background-image&＃39;, &＃96;url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp)&＃96;)}},3000)


• 添加点击事件&＃xff0c;处理翻牌相同和翻牌不同的情况&＃xff0c; 这里&＃xff0c;我们需要一个缓存数组cache&＃xff0c;将点击获得的属性key缓存在cache里&＃xff0c;然后进行判断即可&＃xff0c;这里我们只需要判断&＃xff0c;cache有长度和cache没长度的情况&＃xff0c;有长度则需要进行比较&＃xff0c;没长度直接将key缓存在cache内即可&＃xff0c;相关注释都在代码里了

$(&＃39;.item&＃39;).click(function () {
// 这里判断的是 假如已经翻转了牌面&＃xff0c;就不再响应点击事件if ($(this).hasClass(&＃39;shine&＃39;)) {return false}// 获取key&＃xff0c;将牌面翻转并设置key对应的背景图let key &＃61; Number($(this).attr(&＃39;key&＃39;))$(this).addClass(&＃39;shine&＃39;)$(this).css(&＃39;background-image&＃39;, &＃96;url(${imgSrc[key]})&＃96;)// 判断缓存数组长度if (cache.length &＃61;&＃61;&＃61; 1) {// 判断当前点击Key与缓存的key是否一致if (cache.find(v &＃61;> v&＃61;&＃61;&＃61;key)


结语 & 码上掘金地址

笔者多次尝试&＃xff0c;哪怕作弊&＃xff0c;时间也在110秒左右&＃xff0c;真的很考验记忆力

最后

整理了75个JS高频面试题&＃xff0c;并给出了答案和解析&＃xff0c;基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴&＃xff0c;可以点击下方卡片领取&＃xff0c;无偿分享