JavaScript.net.cn 「线球实验室」

JavaScript

拖放事件有的事件在被拖放元素上触发，有的事件则在放置目标上触发。可拖动元素在某个元素被拖动时，会触发以下事件: dragstart、 drag、dragend 。在按住鼠标键不放并开始移动鼠标的那一刻，被拖动元素上会触发 dragstart 事件。拖动开始时。 dragstart 事件触发后，只要目标还被拖动就会持续触发 drag 事件。当拖动停止时，会触发 dragend 事件。给一个元素添加 draggable="false" 属性，可以拖动元素。目标元素把元素拖动到一个有效的放置目标上时，会依次触发以下事件: dragenter、dragover、dragleave 或 drop。把

admin  2023-09-19  58

软件技巧

视频剪辑软件 Shotcut 笔记

1，添加移动马赛克步骤是，添加滤镜 “蒙板：简易形状”、“马赛克”、“蒙版应用”，然后通过设置"蒙版:简易形状"的水平、垂直和高宽关键帧，来完成马赛克的近大远小和移动。也可以只使用一个滤镜，就是"余晖消除"。2, 创建字幕轨道需要少量文字，可以直接使用滤镜“文本”，当需要像电影中出现大量字幕的时候，应该创建一条视频轨道做字幕轨道，然后选择“打开其他-- 文本”，导入到字幕轨道，并调整时间。3, 最新版本可以使用 Mask: Draw(Glaxnimate) 插入图形和动画4，从视频中导出序列帧如果需要把视频的每一帧都导出成一张图片。可以在输出时，使用预设 stills - JPEG 即可导出

admin  2023-09-06  94

JavaScript Node.js

Node.js 控制台进度条实现原理

1，实现在终端同一行输出不同内容import readline form 'readline'; console.clear(); setInterval(() = { //删除光标所在行 readline.clearLine(process.stdout, 0); //移动光标到行首 readline.cursorTo(process.stdout, 0, 0) process.stdout.write(new Date().toLocaleString(), 'utf-8'); }, 1000); 2, 实现进度条import readline form 'readline

admin  2023-08-11  146

Node.js 云服务

阿里云内容安全 API 签名机制

阿里云内容安全 API 没有提供 Node.js 版的 SDK，可以参考一下第三方的 SDK 代码。HMAC-SHA1签名流程（默认）1.序列化请求头。按照以下方式，将所有以x-acs-开头的HTTP头拼接成字符串：抽取所有以x-acs-开头的HTTP头。对抽取出来的头按字典顺序排序。对每个HTTP头，按"HTTP头名称" + ":" + "HTTP头值" + "\n"拼接。2.序列化URI和query参数。按照uri + "?clientInfo=" + "ClientInfo的JSON字符串"方式拼接URI和clientInfo参数。说明此处不需要URL编码。3.构建完整的待签名字符串。

admin  2023-08-04  276

后端其他

Nginx 使用 Njs 授权访问文件

使用阿里云对象存储的时候，私有的文件，生成一个授权key，就可以访问私有的文件。使用 Nginx 也可以开发出这种功能。比如，一个静态资源地址是 https://test.com/uploads/test.mp3，现在使用 Njs 可以做到无法使用这个链接直接访问，需要添加后面的加密字符串才能访问。https://test.com/uploads/test.mp3?key=3F3MVJbx-YCb5NTIpf2x77xtNmQxc-5yx_qMnginx.conf 配置文件添加：http { ... ### Njs 配置 js_path '/usr/local/nginx/conf/

admin  2023-07-27  运维,nginx  168

Node.js

CRSF 跨站脚本攻击已死，使用 Same-Site Cookies 来防范 CSRF

跨站请求伪造，也称为CSRF或XSRF，基本上永远存在。它源于网站必须向另一个站点发出请求的简单功能。假设我在 https://a.com 面中嵌入了以下表单。 form action="https://your-bank.com/transfer" method="POST" id="stealMoney" input type="hidden"name="to"value="Scott Helme" input type="hidden"name="account"value="14278935" input type="hidden"name="amount"val

admin  2023-07-26  Koa.js,安全  159

CSS JavaScript

JavaScript 和 CSS 检测横屏适配

很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式：1 JavaScript检测横屏window.orientation:获取屏幕旋转方向window.addEventListener("resize", ()= { if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if (window.orientation === 90 || window.orientation === -9

admin  2023-07-21  164

JavaScript 算法

JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法

在 JavaScript 中直接输出 0.1 + 0.2 结果是 0.30000000000000004。原因如下：JavaScript 使用 Number类型表示数字（整数和浮点数），计算机遵循IEEE 754标准，所有语言都会有这个问题。通常用64位来表示一个数字：第0位：符号位，0表示正数，1表示负数(s)；第1位到第11位：储存指数部分（e）；第12位到第63位：储存小数部分（即有效数字）f。十进制转换为二进制方法是，小数本身乘以2，取整数位作为二进制表示位，然后取其小数位参与计算（乘以2），如此循环往复，只至小数位乘以2的结果为零。结果0.1和0.2的二进制，后面无限循环多余的数将会

admin  2023-07-17  238

MySQL

MySQL 删除逗号分隔字段中的某一个值

文章表中，tags 字段存储着一个或者多个标签，标签之间使用“,”隔开，比如，一篇文章的 tags 字段是 “前端,JavaScript,SCSS,HTML”，现在想删除“JavaScript”，变成 “前端,SCSS,HTML”。方法如下：UPDATE tb_article AS a SET a.tags=TRIM(BOTH ',' FROM REPLACE(concat(',',a.`tags`,','), ',JavaScript,', '')) WHERE FIND_IN_SET('JavaScript', a.tags); 核心部分是：UPDATE tb_article AS a S

admin  2023-07-04  713

后端其他前端

RESTful API 执行 delete 返回204无法获取 Body

在浏览器中 RESTful API 执行 delete 返回204无法获取 Body，也就是说执行成功后，只能返回空的。无法获取到返回的 Body 内容。使用 restclient 可以获取到 body。大多数人都认为204是成功删除的良好响应代码，因为通常没有充分的理由在删除某些内容后返回响应正文。所以，如果 delete 操作成功且响应主体为空，则返回204。如果 delete 操作成功且响应主体为非空，则返回200。

admin  2023-05-10  393

MySQL

MySQL 批量修改时间

update tb_article set created_at=date_add(created_at,interval+600 day); update wp_posts set post_date=date_add(post_date,interval+600 day); update wp_posts set post_date_gmt=date_add(post_date_gmt,interval+600 day); update wp_posts set post_modified=date_add(post_modified,interval+600 day); update

admin  2023-04-28  576

JavaScript

JavaScript 代码混淆加密工具 javascript-obfuscator

由于 JavaScript 暂时无法直接编译成可执行的二进制代码，对 JavaScript 代码进行混淆加密，就是 JavaScript 代码保护的正确方法。JavaScript 混淆加密有不少产品可用，有免费开源的，也有商业的。免费的比如uglifyjs 、javascript-obfuscator、商业的比如jscrambler、JShaman，特别值的一提的是jshaman，不但强大，而且是国产的，是具备研发能力，有核心竞争力的国内产品，在js代码保护领域，jscrambler是国际顶级的厂商，而国内的jshaman比它毫不逊色。比如一段js代码：function NewObject(p

admin  2023-03-27  628

开发工具

Git 放弃本地修改，强制和之前的某次提交同步

Git 放弃本地修改，强制和之前的某次提交同步，有四种情况：1.没有执行 git add的：可以用命令，git checkout filepathname（eg: git checkout test.md）如果是放弃所有，直接执行git checkout . 此命令用来放弃掉所有还没有加入到缓存区（就是 git add 命令）的修改：内容修改与整个文件删除。但是此命令不会删除掉刚新建的文件。因为刚新建的文件还没已有加入到 git 的管理系统中。所以对于git是未知的。自己手动删除就好了。2.已经执行git add缓存了的：可以用命令git reset HEAD file-name.txt 同

admin  2023-02-03  Git  713

JavaScript

MySQL 数据库中货币单位如何存储

阿里巴巴 Java 编程规范，【强制】任何货币金额，均以最小货币单位且为整型类型进行存储。为什么要这样做呢，因为常常出现数据库里的数据获取后，直接返回给前端的。因为在数据传输过程中使用的是2进制，数据在进制转换时会丢失精度。浮点数使用JSON等格式传输数据时，会被转为二进制，二进制下很多浮点数是无限小数，而传输数据时候又不可能把无限制的传输这个数，只能把它截断，当浮点数被截断后，再转回十进制，就不是一个精确值了，所以就会出现接口返回{"a":0.3}，但是调用接口实际获得{"a":0.30000000000000004}的问题。参考：https://javascript.net.cn/arti

admin  2023-01-09  579

JavaScript

用 JavaScript 实现数字增加滚动动画

用 JavaScript 实现数字增加滚动动画方案一： h1 id="numBox" /h1 script function numRunFun(num, maxNum){ var numBox = document.getElementById("numBox"); var num = num; var maxNum = maxNum; var timer = setInterval(function(){ num++; if(num = maxNum){ numBox.innerHTML = ma

admin  2023-01-03  513

JavaScript 前端

JavaScript 检查 Date 是否为 Invalid Date

使用 new Date(string) 构造 Date 对象，如果传入非日期格式的字符串，仍然能构造出 Date 对象，输出date，结果为Invalid Date使用typeof判断date的类型，得到结果为“object”使用instanceof检测date是否为Date类型，结果为true。使用Date的getTime()方法，Invalid Date对象返回的是一个NaN，可以利用这点来检查Date对象是否为Invalid Date。 new Date(dateString)参数dateString一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但

admin  2022-11-07  1474

JavaScript Node.js 前端

Node.js 的 URL 的模块

使用 url.parse() 函数转换'https://www.yuque.com!.evil.com' 'https://www.yuque.com%0a.evil.com' 会变成：'https://www.yuque.com/!.evil.com' 'https://www.yuque.com/%0a.evil.com' 可以看到 legacy API 并不认为 ! 字符属于域名的一部分，所以原始的 www.yuque.com!.evil.com 域名其实是非法的，而为了不抛异常，legacy API 尝试对它进行了一次转换，把它当成 www.yuque.com/!.evil.com 来

admin  2022-11-07  730

运维

Linux 中 top 命令的 Load Average 含义

在执行 top 命令：top - 14:13:38 up 10 days, 18:47, 1 user, load average: 0.09, 0.11, 0.08 Tasks: 104 total, 1 running, 103 sleeping, 0 stopped, 0 zombie top命令中 load average 显示的是最近1分钟、5分钟和15分钟的系统平均负载。系统平均负载是在特定时间间隔内，运行队列中的进程数。在Linux中，进程分为三种状态：阻塞的进程 blocked process、可运行的进程 runnable process、正在运行的进程 ru

admin  2022-11-05  1241

前端开发前端

p 标签里面不能嵌套块级元素

代码： p 啦啦啦啦啦啦啦啦啦 div 呱呱呱 /div /p 在浏览器中渲染成了： p 啦啦啦啦啦啦啦啦啦 /p div 呱呱呱 /div p /p 原因是 p 标签里面不能嵌套 ul、div 等块级元素，只能嵌套行内元素。h1~h6之间也不能相互嵌套。

admin  2022-11-05  1039

MySQL

MySQL 字符串截取函数 SUBSTRING_INDEX

例子：select SUBSTRING_INDEX(thumbnail,'/',-1) as file_name, thumbnail, SUBSTRING_INDEX(thumbnail,'.',-1) as suffix, from tb_article where thumbnail != ''; 介绍：这里用到 MySQL 的 SUBSTRING_INDEX(str,delim,count) 函数，LENGTH(str) 函数，REPLACE(str,from_str,to_str) 函数，和数据库的一张辅助表help_topic（这张表在默认的mysql库里）。SUBST

admin  2022-11-05  856