浏览器默认行为 如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。 大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？ 不优雅的方式： 在页面加载完成事件中执行： document.documentElement.scrollTop = 0 原生的 API 浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。 只需在页面中执行：...
1091
几种常见的抽奖效果俄罗斯大转盘跑马灯老虎机翻纸牌刮刮乐俄罗斯大转盘效果：实现思路：主要为css transform属性配合 rotate()旋转函数实现效果，加JS计算旋转的角度达到精确控制。实现思路简易Demo代码：俄罗斯大转盘.zip跑马灯效果：实现思路：使用css grid布局加JS控制实现思路简易Demo代码：choujiang-pmd.zip老虎机效果：.实现思路：使用css transform: translateY()控制上滚动画效果实现思路简易Demo代码：c...
443
一、一键重新发起请求前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。按F12打开控制台选中Network标签找到Fetch/XHR 类型下我们刚发过的请求右键点击 Replay XHR命令 那如果要调整一个参数呢？二、修改请求信息后重新发起请求同上右键请求，选择copy -&g...
414
前言 MDN介绍：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。 IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaS...
370
前言：什么是正则表达式正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间...
388
Chrome浏览器断网后，会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。一、先实现一个PNG帧动画小人代码结构：index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&quo...
342
单行代码并不利于阅读维护，但足够简洁，一般也足够精悍犀利。使用方便，利于装逼，获得满足成就感。 日历 创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days)); 生成随机ID // 生成长度为11的随机字母数字字符串 Math.random().toString(36).s...
315
前言Array.from：允许在 JavaScript 集合(如: array、arrayLike、或者是string、map 、set 等可迭代对象) 上进行有用的转换。在开始之前，我们先回想一下 Array.from() 的作用。语法:Array.from(arrayLike[, mapFunction[, thisArg]])arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。mapFunction：可选参数，mapFunction(item，inde...
306
一、将被忽略的数据类型 undefined、任意的function以及 symbol 作为对象属性值时 JSON.stringify() 将跳过（忽略）对它们进行序列化 const data = { a: "aaa", b: undefined, c: Symbol("dd"), fn: function() { return true; } }; JSON.stringify(data); // "{"a":"aaa"}" 如果做为数组成...
305
接上篇前言Krpano定制主要在xml中配置完成，同时其也提供了JavaScript API可进行实时操作。所以主要还是要先熟其各xml文档配置。后续再了解JavaScript API使用方法。所有修改的xml文件均以生成的vtour目录为根目录修改xml文件需要一款支持xml语法的文本编辑器，如Sublimet Text, VS Code等等一、添加热点打开 krpano Tools.exe点击Load tour.xml按钮载入tour.xml点击Addhotspot按钮添加一个热点...
355
