JS
文章平均质量分 54
js 相关的,包含 jquery
十月ooOO
精通 JS/CSS/HTML,做点有用的东西。
展开
-
用 js canvas 做一个优雅的模拟时钟, canvas 教程实例
有很多次,我都想找到一个比较不错的,可以查看模拟时钟的网页。有时候是想看下距离某个时间点还有多长时间,有时候是想看一下,两个时间点之间的间隔是多少。因为模拟时钟的排布比数字时钟要更直观。但一直没有找到。这些天闲的时候就想做个 canvas 模拟时钟玩,慢慢就做出效果来了。目前的大致效果如下:可访问的地址:我对模拟时钟的需求有几个:你需要具备使用 canvas 绘制简单图形的能力,不需要复杂,会画个方块、圆、文字,就可以了。很简单,直接看 MDN 官方文档上的例子就能看明白。会了基础的操作之后,就说一原创 2024-08-15 17:26:23 · 899 阅读 · 0 评论 -
如何以抛物线形式排列一个列表,曲线排列 x² = y
做页面的时候遇到一个需求,需要将一个列表以曲线的形式排列展示。原创 2024-06-05 16:49:13 · 270 阅读 · 0 评论 -
vue3+ts 原生 js drag drop 实现
一直以来没有涉及的一个领域就是dragdrop拖动操作,研究了下,实现了,所以写个教程。原创 2024-04-30 10:23:33 · 1084 阅读 · 0 评论 -
moment.js 产出未知格式的时间,可能的原因
今天发现这个页面中多了这么一行,是 moment.js 的一个本地化的内容,也不知道这是什么国家的,产出的数字千奇百怪的。有个问题困扰我好久了,在项目中使用格式化时间的时候会产出一些千奇百怪的格式,产出的文字我都不认识。一旦进入这个页面,再出去的时候其它页面的所有使用 moment.js 的时间都会出问题。百思不得其解,终于今天在看代码的时候发现了这个问题。好像只要引入了这个就会自动生效。原创 2024-04-03 19:04:24 · 266 阅读 · 0 评论 -
如何使用 js 获知窗口的颜色模式,是暗黑模式还是白亮模式 dark light
现在越来越多的网页需要适配暗黑(dark)和白亮(light)两种颜色模式,有时候我们需要从 js 层面获知它的变化,并作相应的动作。原创 2023-12-22 21:51:48 · 765 阅读 · 0 评论 -
vue PWA serviceWorker 有新内容时,如何自动刷新内容
vue 自带的 pwa 插件可以很方便管理 serviceWorker 的使用,但会有一个问题。而我需要在检测到新版本的内容之后自动刷新页面载入新内容。具体 ServiceWorker 的响应机制可以看这篇文章,很的很详细。原创 2023-10-19 10:29:51 · 1191 阅读 · 0 评论 -
Canvas.arcTo() 的使用,画一条带圆角的线段,画一个思维导图一基础
这个方法还是比较难理解的。因为它不是直观的绘制路径,而是间接的。它的参数是这样的。它是由两个点和一个圆角半径来确定一条弧线。这么说你肯定是不能明白的,看下面例子。原创 2023-07-10 11:13:40 · 1432 阅读 · 1 评论 -
csv文件如何在单元格内保留换行 \r\n
我们都知道 csv 文件内是通过 `,` 来切分单元格的。但如果某个单元格内的内容有换行,当打开 Excel 的时候就会出现内容错乱的问题原创 2023-07-08 10:02:01 · 4524 阅读 · 0 评论 -
iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。
我有一个日记应用,是可以作为独立 Web 应用运行的那种,但在旋转屏幕的时候获取到的和就不对了,不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。本来应该是这样的。在旋转一次再转回来的时候就成了这样。原创 2023-07-02 15:58:28 · 1416 阅读 · 0 评论 -
如何将 HTML 字符串转换成 DOM 对象:用 DOMParser
有的时候我们需要处理一些 HTML 字符串,比如我需要从下方 HTML 字符串中提取每个标签的内容和属性。原创 2023-06-02 13:41:32 · 2421 阅读 · 0 评论 -
如何给自己的网站添加 gitalk 评论系统
自己写评论系统会比较复杂,需要管理用户信息等。不如直接使用 github 的用户信息。gitalk 就是实现这种评论的插件。原创 2023-04-04 10:50:09 · 494 阅读 · 0 评论 -
如何做一个高级的文本编辑器 textarea,拥有快捷键操作
最近想做一个高级点的textarea一步一步来,你需要知道一些关于 input textarea 的基础知识。原创 2023-03-06 15:19:49 · 856 阅读 · 0 评论 -
如何获取 textarea 的光标位置
在做一个 textarea 的工具,需要获取光标位置再进行其它操作。原创 2023-03-06 11:02:44 · 1201 阅读 · 0 评论 -
echarts 仪表盘 label 如何随径向展示
默认情况下,仪表盘的 label 文字是横向水平展示的,我需要让它冲圆心对齐,径向显示。原创 2023-02-14 15:01:20 · 405 阅读 · 0 评论 -
如何转换中文到 base64
浏览器中的 atob 和 btoa 两个方法只能处理非中文的内容。要想处理中文,可以使用 github 中的 `js-base64 `原创 2023-02-06 11:31:54 · 698 阅读 · 0 评论 -
js 如何数组分组,比如每100个一组 [[],[]]
当余数为 0 时,说明已经到 100 了,就新建一个分组再接着放元素。思路很简单,就是每 100 个分一个新组,看如何实现。这里我们要用到取余的操作。原创 2022-12-15 22:45:22 · 898 阅读 · 0 评论 -
Array reduce() 如何计算元素内数值总合,计算总合
有时候我们需要计算一个数组中所有元素的总合,这个数组可能是组Number类型,也可能是Object比如我要知道所有的总合是多少,可以通过来遍历,但还有更好的方法吗?原创 2022-11-27 09:12:05 · 452 阅读 · 0 评论 -
解决 POST + preflight 请求,跨域的问题
【代码】解决 CROS + preflight 请求,跨域的问题。原创 2022-11-18 11:25:49 · 1228 阅读 · 0 评论 -
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息
这里我们需要获取到上面提前定义好的值。答案全在mapEvent上,来看一下内都有什么:我们需要的是中的内容,它是一个 dom 对象:获取到了它,就能使用 dom 的操作方法对齐进行取值了:像下面这样,我们就取到了它的属性值。原创 2022-10-26 14:45:05 · 10495 阅读 · 5 评论 -
Vue 如何实现用户在规定时间内未执行任何操作,下次点击的时候重新登录的功能
用户在规定时间内未执行任何操作,下次操作时,转至登录页面原创 2022-10-19 14:32:34 · 742 阅读 · 0 评论 -
【解决】Vue 高德地图自定义地图样式,无法显示、无法生效的问题
项目中用到了自定义地图,我是用的 Vue JSAPI Loader 加载的 API自定义地图样式的地址:我定义的地图样式是这样的:但在使用的时候不生效。原创 2022-10-18 15:34:32 · 6089 阅读 · 5 评论 -
数据处理:如何将数组生成具有层级结构的数据
需要将其根据省市县的结构组织起来,并将数据应用到element-ui的tree组件上。原创 2022-09-21 17:06:29 · 346 阅读 · 0 评论 -
QR.js JS 生成 PNG二维码图片,使用说明
github 上的原文什么都没有提,我给 fork 了一个,并添加了使用说明。原创 2022-08-26 11:19:30 · 1135 阅读 · 0 评论 -
动画图标,如何实现页面中图标小动画,动画按钮 CSS JS
最近在看线上服务器的时候,无意间发现一个好玩的东西,看下图:一个是阿里云的动画一个是腾讯云的动画。原创 2022-08-19 17:49:44 · 1101 阅读 · 0 评论 -
如何由 moment 对象 获取 时间对象
代码】如何由moment对象获取时间对象。原创 2022-07-15 16:02:22 · 773 阅读 · 0 评论 -
几种常见的 base64 图片的头部
在单纯的图片 base64 数据字符串前面添加对应的图片头部即可。比如一个正常的图片 base64 是这样的:Base64 工具我写的在线工具:原创 2022-07-08 10:59:22 · 14278 阅读 · 0 评论 -
vue 如何依次请求 20 多个 axios 请求,同步请求多个,按次序请求
有一个人员列表, ,每个人员都有多张卡片 + 多个指纹数据因为我们用的是 ,它是异步的,返回每个请求的 对象,而我们需要的是同步功能,就是同一时间,只有一个请求在执行。执行完上面的请求之后,再执行下面的请求。需要使用ES6的 基本的用法是:带 的方法内,使用 来同步执行返回 的方法,例:对比上面的请求,下面这种请求的结果返回顺序是不可控的三、具体实现方法其请求过程是这样的:..............................原创 2022-06-21 18:09:54 · 8100 阅读 · 0 评论 -
Document.readyState 如何使用和侦听
有三种状态当 document 状态发生变化时,会触发 事件,这个事件的内容如下:可以看到对应时间对应的事件变化:原创 2022-06-21 10:29:03 · 684 阅读 · 0 评论 -
js moment.js 常用方法
js moment.js 常用方法let timeNow = new Moment()timeNow.unix() // 获取 unix 格式的时间戳 1654012799// 获取某个时间单位的起始和结束结点let monthStart = timeNow.startOf('month')let monthEnd= timeNow.endOf('month')原创 2022-05-25 14:13:56 · 441 阅读 · 0 评论 -
js 如何对 emoji 进行转义存储,存入mysql 之前对 emoji 进行转义 nodejs
js 如何对 emoji 进行转义存储,存入mysql 之前对 emoji 进行转义 nodejs一、前言最近在改写一个之前的 php 日记项目,改成 nodejs 的 express 后台项目,这个项目中的内容在存储之前对 emoji 进行了转义,我主要想解决的问题是能够正常让数据库存储 emoji 表情,但我试了将数据库改成 utf8mb4 charset 的,还是不行,一直提示incorrect string value: '\xf0\x9f\x98\x86' for column所以我只原创 2022-04-17 11:45:29 · 2063 阅读 · 0 评论 -
Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
高德地图 API Loca 如何使用 连接线图层最终实现的效果:“感谢大哥送来的火箭”基础知识官方的连接线例子是一个与我国建交的国家连线其中用到的两个数据源是:建交的连接线数据: https://a.amap.com/Loca/static/static/diplomacy-line.json建交的点数据:https://a.amap.com/Loca/static/static/diplomacy-point.json用到的官方数据、资源各省会数据: https://a.amap.com原创 2022-03-25 10:17:53 · 4093 阅读 · 1 评论 -
使用 interact.js进行dom拖动
使用 interact.js 进行 dom 拖动interact.js 是一个非常好用的可以任意拖动元素的库GitHub: https://github.com/taye/interact.js官方站点: https://interactjs.io/安装,引用注意: interactjs 跟 interact.js 是两个不同的库,这里用的是 interactjs# npmnpm i interactjs# yarnyarn add interactjsvue 中这样引入i原创 2022-03-18 14:45:16 · 2164 阅读 · 0 评论 -
js heatmap.js 使用说明
js heatmap.js 使用说明GitHub: https://github.com/pa7/heatmap.js官方网址:https://www.patrick-wied.at/static/heatmapjs/官方 Doc 说明: https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create我写的一个例子:https://kylebing.cn/e/#/test/heatmap...原创 2022-03-18 11:19:00 · 1738 阅读 · 2 评论 -
Mock js 如何获取当前序列的序号
Mock js 如何获取当前序列的序号用 占位符 @increment 即可"温湿度|6": [ { "name": "温湿度-@increment", }]这样就会生成[ {name: "温湿度-1"}, {name: "温湿度-2"}, {name: "温湿度-3"}, {name: "温湿度-4"}, {name: "温湿度-5"}, {name: "温湿度-6"},]详见官方说明的最下方:http://mockjs.com/examples.html..原创 2022-03-10 15:17:42 · 555 阅读 · 0 评论 -
js 如何正确处理 emoji 表情的字符长度
js unicode 字符处理,emoji 表情字符的 unicode普通文字的 unicode 是一个字符而生僻字、emoji 表情的长度是 2ES6 中可以通过 for of 获取正确的字符长度原创 2022-02-12 00:12:06 · 1911 阅读 · 0 评论 -
Mock 如何生成纯数组
Mock 如何生成纯数组Mock 生成数组数据时是无法生成纯数组的,都是生成这样的Mock 代码import Mock from "mockjs"let res = Mock.mock({ 'userInfo|10-18': [{ 'employeeNo|245-543' : 1, name: '@cname', 'password|+1':123456 },]})console.log(res)生成的数据{ "userInfo":原创 2022-01-26 09:40:27 · 2829 阅读 · 1 评论 -
axios get 请求中如何添加 body
axios get 请求中如何添加 bodyaxios get 请求是不允许添加 body 的,如果真的需要,跟后台商量改成 post 请求比较好原创 2022-01-24 16:41:00 · 9493 阅读 · 0 评论 -
js 保存 string 到 .txt 文本文件
js 保存 string 到 .txt 文本文件直接用就好了downloadFile(fileName, data) { // 保存 string 到 文本文件 let aLink = document.createElement('a') let blob = new Blob([data]); //new Blob([content]) let evt = document.createEvent("HTMLEvents") evt.initEvent("click原创 2022-01-21 18:22:18 · 1535 阅读 · 0 评论 -
js 自动播放音频文件,报警提示音等
js 自动播放音频文件,报警提示音等谷歌浏览器的音频,默认是不能自动播放的Home.vue?76f2:375 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.需要用户至少点击一下页面,才可以播放音频,这个策略的目的是保证用户的体验感,如果每个页面都能在用户未接触页面的时候自动播放音频,那用户体验就太差了。添加方法在页面中添加没有添原创 2022-01-10 11:00:43 · 6010 阅读 · 4 评论 -
Mockjs 常用例子组合
Mockjs 常用例子组合随机数字Mock.mock({ 'infoList|12-15': [ { 'cardNo|7563513-13245284':1, }, ]}){ "infoList": [ {"cardNo": 9011469}, {"cardNo": 12137963}, {"cardNo": 8312015}, {"cardNo": 10929986}, {"cardNo": 8969310},原创 2021-12-20 11:17:13 · 294 阅读 · 0 评论