前端 - JavaScript.net.cn 「线球实验室」

前端

分页方法一：the_posts_pagination(array( 'mid_size' = 3, 'prev_text' = ' ', 'next_text' = ' ', 'screen_reader_text' = ' ', 'aria_label' = "xxx", )); 分页方法二：$big = 999999999; echo paginate_links(array( 'base' = str_replace($big, '%#%', esc_url(get_pagenum_link($big))),

admin  2023-11-22  19

JavaScript

HTML 对话框元素 dialog

dialog 简介HTML dialog 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。下面的示例会渲染一个非模态对话框。在对话框激活的状态下，点击“OK”按钮将会关闭对话框。 dialog open p Greetings, one and all! /p form method="dialog" button OK /button /form /dialog 解释：open 指示这个对话框是激活的和能互动的。当没有设置 open 属性时，对话框不应该显示给用户。推荐使用 .show() 或 .showModal() 方

admin  2023-11-07  64

JavaScript

JavaScript 原生拖放

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

admin  2023-09-19  153

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  302

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  212

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  310

后端其他前端

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

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

admin  2023-05-10  496

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  796

JavaScript

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

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

admin  2023-01-09  633

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  569

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  1758

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  778

前端开发前端

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

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

admin  2022-11-05  1091

JavaScript

JavaScript 中的数据类型自动转换为 Boolean 状态

JavaScript中的数据类型自动转换时，空数组[]或空对象{}都的布尔类型不是false,而是 true当JavaScript遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。因此除了以下六个值，其他都是自动转为true:undefinednull-00或+0NaN''（空字符串）

admin  2022-11-04  705

CSS

CSS 滚动条样式修改

&::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } &::-webkit-scrollbar-thumb { background: #000; } 主要文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

admin  2022-11-04  751

CSS 前端

使用 svg 作为背景图片

1 用utf8格式，需要双引号“”替换为单引号，而且采用url encode编码，例如# 替换为 %23，background-image: url('data:image/svg+xml;utf8, svg t="1656040038219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" width="200" height="200" path d="M512 234.666667c131.946667 ...67 77.482667

admin  2022-06-24  738

JavaScript Node.js 前端

JavaScript console 的用法

1 console.log在console.log()中，可以用%s设置字符串，%i设置数字，%c设置自定义样式，console.log()接受的两个参数，前者是描述性的语言，而第二个参数是与第一个参数位置对应的字符console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', '测试信息', '–');2 console.table()很多的时候，你可能会有一堆对象需要查看。可以用console.log把每一个对象都输出出来，也可以用console.table语句直接把所有的对象都直接输出成为一个表格3

admin  2022-06-23  666

前端开发前端

Vue3 挂载全局方法

方法一：挂载在原型链上import { createApp } from 'vue' import App from './App.vue' import router from './router' import Axios from 'axios'; const golBalTest = () = { console.log('测试全局挂载'); return '测试全局挂载'; } const app = createApp(App) // 挂载到vue原型上(方法1) app.config.globalProperties.$axios = Axios; app.con

admin  2022-06-23  Vue.js  675

前端

FFmpeg 修改默认音轨

FFmpeg 修改默认音轨：ffmpeg -i 西游2：伏妖篇.国粤双语.mkv -map 0:0 -map 0:2 -c copy -disposition:a:0 default -y output.mp4 ffmpeg -i gf.mkv -map 0:0 -map 0:2 -vcodec copy -acodec copy out.mkv 注： -map指定哪些流做为输入， 0:0 表示第0个输入文件的第0个流使用ffmpeg修改默认的音频轨道ffmpeg -i input.mkv -map 0:0 -map 0:1 -map 0:2 -c copy -disposition:a:0

admin  2022-05-01  950

JavaScript Node.js 前端

Node.js 18.x 开始支持内置单元测试

单元测试很重要，很多新兴的编程语言都是会内置对应的能力，但 Node.js 这块一直都是由社区来实现，前端同学耳熟能详的 Test Runner 有 Mocha、Jest。2022年04月19日正式发布的 Node.js 18.x ，终于，官方支持了 Test 能力。Fetch API 也被集成到这个版本中了。测试 API 接口在一定程度上代替 SuperTest 了。代码：import test from 'node:test'; import assert from 'assert/strict'; // 等价于 describe() test('asynchronous passing

admin  2022-04-28  单元测试  641