![](https://img-blog.csdnimg.cn/20210406120620860.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
html css js jq
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
js “让对象可以遍历”(具有数组的特性)
class想提供类似数组的能力 可以自定义Symbol.iterator原创 2023-12-06 10:43:08 · 426 阅读 · 0 评论 -
云桌面 node_modules 切换艰辛历程记录 rebuild失败记录
不过好在发现了一个包 dtract-provider rebuild失败 回去install 但是云桌面没有网络权限。另一个 单独 rebuild npm rebuild typemoq。每个依赖单独执行 npm rebuild xxx。如果有 外面自己下载包 当作方法的方式把源码放进去。发现下面还有一个stable的还指向原来版本。依赖太多执行不过来 查看之前的错误信息。执行npm rebuild 重新构建。不成功 换个窗口又变回原来版本号了。报错 node版本不一致。两处 一处刚才的没用的包。原创 2023-11-20 22:42:34 · 578 阅读 · 0 评论 -
XMLHttpRequest拦截请求和响应
将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上**使用get set 将客户端获取的responseText和response按照自己的意愿返回实现响应拦截原创 2023-10-27 10:24:56 · 1672 阅读 · 0 评论 -
uniapp: err = err.replace(this._UNI_INPUT_DIR_REG, ‘UNI_TypeError: err.replace is not a function
不用pnpm安装依赖 使用yarn。删除node_modules。破玩意 莫名其妙报错。原创 2023-09-28 11:13:17 · 168 阅读 · 0 评论 -
js动态拼接正则表达式
两侧不加`\``\`使用双斜杠`\\`原创 2023-09-27 17:15:24 · 208 阅读 · 0 评论 -
js自定义事件触发监听器
THREE.js 的 事件监听器。原创 2022-12-31 13:29:25 · 435 阅读 · 0 评论 -
python播放视频使用opencv-python
【代码】python播放视频使用opencv-python。原创 2022-11-05 21:43:52 · 1185 阅读 · 1 评论 -
浏览器控制台花式打印 typescript全局注入
typescript 控制台花式打印。原创 2022-10-30 18:11:25 · 387 阅读 · 0 评论 -
JS THREE.js间隔执行函数
有的场景不需要逐帧渲染 可以定义一个可调节的函数触发器。原创 2022-09-22 15:01:33 · 203 阅读 · 0 评论 -
three.js使用web worker解析模型并添加到主线程
使用web worker与主线程并行加载模型 来实现减少模型加载时间 提前将页面展现出来原创 2022-08-25 21:06:12 · 2869 阅读 · 28 评论 -
js劫持数组push方法
js劫持数组push方法原创 2022-08-04 13:27:52 · 274 阅读 · 0 评论 -
canvas模拟输入框输入
功能:停止输入时插入点闪烁 输入时插入点更新原创 2022-07-24 21:41:58 · 1711 阅读 · 2 评论 -
three.js 跳跳乐游戏
使用three.js 写一个跳跳乐游戏原创 2022-06-12 08:03:42 · 646 阅读 · 1 评论 -
Cropper不显示透明背景超出图片的部分
图片上方会有这样的区域 现需要去掉直接显示图片对源码修改 将canvas的位移取消在源代码 1420行左右 renderCanvas函数中canvasData.left = 0;canvasData.top = 0;// canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);// canvasData.top = Math.min(Math.max(canvas.原创 2022-05-17 23:22:26 · 475 阅读 · 0 评论 -
Cropper初始化时设置裁剪框的位置和宽高
文档中并没有找到如何设置 于是更改了源码以实现此功能在源码大概 1490 行左右有初始化裁剪框的配置 稍作更改即可原代码 cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2; cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2; cropBoxData.oldLeft = cropBo原创 2022-05-17 23:15:00 · 1828 阅读 · 1 评论 -
base64 <==> Buffer
/** * Transform Data URL to array buffer. * @param {string} dataURL - The Data URL to transform. * @returns {ArrayBuffer} The result array buffer. */ function dataURLToArrayBuffer(dataURL) { var base64 = dataURL.replace...原创 2022-05-17 22:38:55 · 742 阅读 · 0 评论 -
web作业1
应用Math对象,编写程序可以出现一道加法题,加数是20以内的随机整数,用户输入结果,程序判断计算正确与否输出。/** * 应用Math对象,编写程序可以出现一道加法题,加数是20以内的随机整数,用户输入结果,程序判断计算正确与否输出。 */ function genTopic() { let num1 = Math.floor(Math.random() * 20); let num2 = Math.floor(Math.random() * 20); const原创 2022-05-16 23:25:30 · 107 阅读 · 0 评论 -
web作业0
移出数组arr“[1,2,3,4,2,5,6,2,7,2]”中与2相等的元素,并生成一个新数组,不改变原数组const arr = [1, 2, 3, 4, 5, 6, 2, 7, 2];const filterArr = (arr, num) => { return arr.filter(n => n !== num);}const clear2 = filterArr(arr, 2);console.log(arr);console.log(clear2);请将数组原创 2022-05-12 20:29:19 · 2265 阅读 · 0 评论 -
js修改:root
document.documentElement.style.setProperty( "--scrollbar-bg-color", "#000000" );原创 2022-04-30 09:24:27 · 2847 阅读 · 0 评论 -
svg自适应全屏
const { innerHeight, innerWidth } = window;export const Wave = ( <svg viewBox={`0 0 ${innerWidth} ${innerHeight}`} width={innerWidth} height={innerHeight} xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect原创 2022-04-28 22:05:32 · 1641 阅读 · 0 评论 -
input type=‘file‘ 获取文件 fileReader同步文件加载
fileReader的load事件是异步的 通过promise使其同步加载export const loadFileAsync = (file: File): Promise<string | ArrayBuffer> => new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.o原创 2022-04-24 21:25:56 · 1669 阅读 · 3 评论 -
浏览器控制台打印dom属性
console.log打印的是标签 不方便查看dom详细信息可以使用 dir 或者console.log({ page }); console.dir(page);原创 2022-03-28 20:36:10 · 883 阅读 · 0 评论 -
多种操作需要触发echarts重新适应解决方案
思路 需要的地方派发事件 根据参数觉得是否重置 编程式 const chartDom = document.getElementById("us_data"); const myChart = echarts.init(chartDom!); option && myChart.setOption(option); window.addEventListener("charts_resize", (e: any) => { if (e.d原创 2022-02-16 22:30:42 · 442 阅读 · 0 评论 -
css 量产特效按钮
button { padding: 0.5rem; width: 8rem; border: none; border-radius: 0.5rem; background-color: #aaffaa52; white-space: nowrap; color: #049204; margin: 0.3rem; font-weight: bold; cursor: pointer; transition: all 0.原创 2022-02-10 16:12:12 · 177 阅读 · 0 评论 -
js根据给定颜色生成更亮/暗/颜色
实现思路:将形如 #123456 两两分出来 转成10机制 对应rgb格式 根据传入数值调整后再转换回16进制/** * @description: 调整颜色更亮更暗 * @param {string} color 六位十六禁止颜色 * @param {number} range 正负数决定颜色更改 * @return {string} new color */function adjustColor(color, range) { let newColor = '#'; fo..原创 2022-02-10 17:57:27 · 1296 阅读 · 0 评论 -
程序猿终级课颈椎腰椎锻炼
https://baike.baidu.com/1.俯卧式小燕飞。在硬床上或干净的硬质地板上,取俯卧位,脸部朝下,双臂以肩关节为支撑点,轻轻抬起,手臂向上的同时轻轻抬头,双肩向后向上收起。与此同时,双脚轻轻抬起,腰底部肌肉收缩,尽量让肋骨和腹部支撑身体,持续3-5秒,然后放松肌肉,四肢和头部回归原位休息3-5秒再做。每天可做30-50下。可分为2-3次,坚持6个月以上。腰椎术后患者最好是作为终身锻炼项目。刚开始时,可先做10-20下,逐渐增加。睡前在床上做,贵在坚持。2.站姿小燕飞。身体直立,双原创 2022-02-05 10:39:39 · 317 阅读 · 0 评论 -
audio 监听播放进度
timeupdatevideo.addEventListener('timeupdate', (event) => { console.log('The currentTime attribute has been updated. Again.');});原创 2021-12-10 18:14:05 · 1609 阅读 · 0 评论 -
canvas绘制转盘/扇形 rotate
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2021-12-03 17:48:33 · 1275 阅读 · 0 评论 -
React canvas 抽奖转盘
文章目录地址实现代码仓库代码片段添加选项canvas绘制转盘地址实现思路颜色对应选项 从选项列表中随机选中一个 根据索引生成相应的选装角度 在完成动画后弹出蒙版显示结果代码仓库代码片段添加选项const addOption = () => { const input = inputRef.current; if (input) { const content = input.value; if (content) { //原创 2021-12-03 17:29:43 · 1022 阅读 · 0 评论 -
js 等腰三角形已知腰长及其夹角求第三边长度
//radian 夹角度数 如 Math.PI const cosC = Math.cos(2 * Math.PI / 360 * radian); // 第三边边长 C = Math.sqrt((width * width * 2) + (2 * width * cosC)); console.log(C)原创 2021-12-02 21:09:31 · 1069 阅读 · 0 评论 -
js点击复制
window.clipboardData.setData("Text", text) document.execCommand("copy");原创 2021-11-30 18:56:32 · 254 阅读 · 0 评论 -
js 点击红心特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-11-26 09:56:07 · 357 阅读 · 0 评论 -
正则匹配transform translate移动值
const decompose = element.style.transform.match(/translate\((\S+), (\S+)\)/); if (Array.isArray(decompose) && decompose[2]) { console.log(parseFloat(decompose[1])); console.log(parseFloat(decompose[2])); }原创 2021-11-23 18:58:10 · 969 阅读 · 0 评论 -
原生js仿3D拖拽
效果使用第三方库实现问题 在Safari浏览器中有重大bug于是自己尝试实现简单功能代码 可直接复制运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width原创 2021-11-22 13:15:08 · 668 阅读 · 0 评论 -
null和undefined的使用场景
摘自 红宝书第四版32页undefined派生自nullnull意为空对象指针 这也是typeof null是object的原因据此 null被用于初始化将来保存对象类型的变量而undefined不同 永远不必显式将变量设置为undefined任何时候只要变量保存对象 而当时又没有对象可保存 就要用null来填充该变量。这样就可以保持null是空对象指针的语义...原创 2021-11-18 08:31:13 · 812 阅读 · 0 评论 -
红宝书关于var和let循环输出差异的解答
在使用 var 的时候,最常见的问题就是对迭代变量的奇特声明和修改:for (var i=0:i<5;++i){ setTimeout(() => console.log(i),0)}你可能以为会输出 0、1、2、3、4实际上会输出5、5、5、5、5之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时逻辑时所有的i都是同一个变量,因而输出的都是同一个最终值。for (let i=0:i<5;++i){ setTimeout(() =&g原创 2021-11-05 08:52:09 · 149 阅读 · 0 评论 -
精美卡片拖拽仿3D效果
3D效果 https://micku7zu.github.io/vanilla-tilt.js/index.htmlimport { FC, ReactElement, useEffect } from "react";import styled, { keyframes } from "styled-components";import { randomColor } from "../BUI/DateTimePicker/utils";import "../../constant/Vanill.原创 2021-11-03 18:12:34 · 295 阅读 · 0 评论 -
style自定义变量
<section style="--bgc: #faa "></section>section { width: 10rem; height: 10rem; background-color: var(--bgc); }原创 2021-11-02 21:58:28 · 424 阅读 · 0 评论 -
axios 封装
import axios, { AxiosRequestConfig } from "axios";import { baseURL } from "../constant/url";import { getLocalJWT } from "./authApi";axios.defaults.baseURL = baseURL;axios.interceptors.request.use((config: AxiosRequestConfig) => { if (typeof wind原创 2021-11-02 13:40:42 · 168 阅读 · 0 评论 -
js下载远程图片
a标签的download属性无法下载远程图片 可以将图片转换成 blob 然后下载如<a href="https://xxxx.xxx/xxxx.png" download="xxx.png"> 下载</a>转换blob下载/** * blob文件下载 * @param {Blob} blob * @param {string} fileName * @return {*} void */export const downloadBlob = (b.原创 2021-11-01 21:48:22 · 607 阅读 · 3 评论