前端
关注
分享
扫一扫
八月的猪猪
就想做个全栈...
展开
-
处理url上的参数,且页面不会发生刷新行为
【代码】处理url上的参数,且页面不会发生刷新行为。原创 2022-10-12 16:04:04 · 1268 阅读 · 1 评论 -
ts typeof 获取类型
【代码】ts typeof 获取类型。原创 2022-10-12 16:02:23 · 1373 阅读 · 0 评论 -
ts typeof 获取类型
【代码】ts typeof 获取类型。原创 2022-09-24 10:12:46 · 1187 阅读 · 0 评论 -
获取字符串字节大小
获取字符串字节大小原创 2022-06-09 17:28:42 · 945 阅读 · 0 评论 -
ReturnType
function fn() { return { aaa: "aaa", bbb: "bbb", ccc: "ccc", ddd: "ddd", eee: "eee", };}let type: ReturnType<typeof fn>; // ReturnType 可以拿到函数 fn 返回值对象作为声明类型console.log(type.aaa);console.log(type.bbb);console.log(type.ccc原创 2022-05-27 19:27:40 · 519 阅读 · 0 评论 -
字符串自然排序
// html<!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" /> &原创 2022-05-12 14:29:50 · 375 阅读 · 0 评论 -
在原有的 api url 域名前还串上了一串域名
比如：https://localhost/baidu.com/api/...原因可能是写api时写成了：https:/baidu.com/api/...，https://baidu.com写成了https:/baidu.com，变成了取当前根目录下的路径原创 2022-05-05 15:59:30 · 374 阅读 · 0 评论 -
onbeforeunload 处理“系统可能不会保存您所做的更改“弹框
<!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原创 2022-05-05 14:17:12 · 4450 阅读 · 0 评论 -
window.open 父子页面通信
Parent.html<!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" />原创 2022-04-25 17:27:47 · 952 阅读 · 0 评论 -
高亮匹配文本
index.html<!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"> <原创 2022-04-13 14:33:22 · 199 阅读 · 0 评论 -
splitBulk 分割函数
/** * 批量数据分割操作 * @param limit 每次分割的数量 * @param datas 需要批量操作的数据 * @param cb 对分割后的数据进行处理的回调函数 */async function splitBulk(limit:number,datas:any[],cb:(subDatas) =>void){ const len = datas.length; for (let i = 0; i < len; i+=limit) {原创 2022-03-24 17:23:27 · 325 阅读 · 0 评论 -
webSocket-demo
demo GitHub地址webSocketDemo前端页面entry.html<!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原创 2022-03-17 18:19:39 · 1637 阅读 · 0 评论 -
crypto.ts
/** crypto 支持的加密/解密算法 */enum CRYPTO_ALGORITHM { /** RSA-OAEP算法 */ RSA = 'RSA-OAEP', // RSA 是非对称密钥加密的算法 /** CTR 模式下的 AES 算法*/ AES_CTR = 'AES-CTR', // AES 是对称密钥加密的算法，CTR 是一种分组加密的操作模式（mode） /** CBC 模式下的 AES 算法*/ AES_CBC = 'AES-CBC', // AES 是对称密钥加原创 2022-03-16 18:23:36 · 2313 阅读 · 0 评论 -
crypto_AES-GCM.ts 浏览器数据加密解密
class CryptoHelper { constructor(readonly enabled = false) {} private key: CryptoKey; // 密钥 private iv: Uint8Array; // 向量 /** * 将 str 格式的数据转化为 uint8Array * @param str */ private stringToUint8Array(str: string): Uint8Array { var arr =原创 2022-03-14 15:17:45 · 1199 阅读 · 0 评论 -
debounce 防抖函数
/** * 防抖 * @param fn 防抖包裹的函数 * @param delay 延迟时间 * @param option 配置 * @param {Boolean} immediate 是否在高频事件触发时，立即执行一次 * @param {Boolean} immediate 1.是否在高频事件结束后 2.满足延迟时间后 再执行一次事件 * 若 immediate = true & trailing = false , 则高频事件触发时，原创 2022-01-17 15:14:47 · 573 阅读 · 0 评论 -
instanceExecute 处理并发的promise
export function instanceExecute( executor: (...args) => Promise<any>, immediately = false) { let promise: Promise<any> = null; if (immediately) { return (...args) => executor(...args); } else { return (...args) => {原创 2022-01-17 14:59:53 · 297 阅读 · 0 评论 -
SimpleDB.ts
export function openSimpleDB( name: string, version: number, onUpgrade: (db: IDBDatabase) => void) { return new Promise<SimpleDB>((resolve, reject) => { const req = indexedDB.open(name, version); req.onupgradeneeded = () =>原创 2021-12-20 14:56:56 · 322 阅读 · 0 评论 -
forEach/forEachA.ts
export function forEach<T>(data: Array<T>,cb: (key: undefined, value: T, index: number) => any);export function forEach<T>(data: { [key: number]: T },cb: (key: string, value: T, index: number) => any);export function forEach<原创 2021-12-20 10:32:28 · 262 阅读 · 0 评论 -
休眠sleep函数
export function sleep(mill: number) { return new Promise<void>((resolve) => setTimeout(resolve, mill));}原创 2021-12-20 10:19:15 · 781 阅读 · 0 评论 -
ajax.ts
export function ajax(type: "GET" | "POST", url: string, data: any) { return new Promise<any>((resolve) => { let data_array, params, req; data = data || {}; type = type || "GET"; data_array = []; // 处理参数 for (const idx in原创 2021-07-21 15:59:39 · 136 阅读 · 0 评论 -
js实现进度条
效果图实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <style type="text/css"> #progressComp {原创 2020-12-11 15:28:12 · 1016 阅读 · 0 评论 -
输入框识别按键，自动填充按键组合
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <input type="text" id="myIn原创 2020-11-04 16:40:58 · 427 阅读 · 0 评论 -
node基础
源码git地址：node demo// node.js// 使用严格模式'use strict';let name = 'node.js';console.log(`hello ${name}!`);// 1. 模块// 1.1 定义模块function calculator(a,b){ return a + b;}function saying(){ console.log('汪汪汪...');}// 1.2 导出模块// 方式一：module.expor原创 2020-07-15 16:13:21 · 285 阅读 · 0 评论 -
webworker
// index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head> <body> <!-原创 2020-07-10 15:40:45 · 115 阅读 · 0 评论 -
less
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 1. 引入less，注意：less样式文件一定要在引入less.js前先引入。 --> <link rel="stylesheet" type="text/less" href="./index.less"/> <script src="原创 2020-06-24 21:50:13 · 158 阅读 · 0 评论 -
serviceWorker
// html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="index.js" type="text/javascript" charset="utf-8"></script> </body></htm原创 2020-06-17 16:48:24 · 374 阅读 · 0 评论 -
订阅发布模式DEMO(ts版)
const enum EVENT{ INIT, ADD, DELETE, UPDATE,};class Manager{ private static events:{[event:EVENT]:Array<(...args:any) => void>} = {}; // 一个对象，{事件：订阅者（数组）} private static ready = false; // 一个状态，可以控制订阅发布开始的时机 // 发布函数，只在内部使用 static notifyWa原创 2020-06-17 10:12:24 · 324 阅读 · 0 评论 -
indexedDB
个人博客，欢迎踩坑参考博客<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id='clear'>clear</button&...原创 2019-11-21 19:08:07 · 298 阅读 · 0 评论 -
react_redux项目
个人Blog，欢迎踩坑安装react和redux//创建react_app项目create-react-app my_react_app//安装reduxnpm install redux// 安装react-reduxnpm install --save react-redux//安装redux-thunknpm install --save redux-thunk创...原创 2019-11-09 21:58:28 · 206 阅读 · 0 评论 -
redux开发者工具 redux-devtools
谷歌浏览器redux开发者工具下载链接：https://pan.baidu.com/s/1ngY3WuDNF9-Rfdzzzq1wUg 提取码：j6lu在react+redux的项目下安装npm install --save-dev redux-devtools-extension在redux文件夹下的store.js中修改代码import {createStore,app...原创 2019-11-09 17:03:35 · 1088 阅读 · 0 评论 -
react、redux、react-redux、redux-thunk使用
Redux的学习安装：npm install --save redux在/src文件夹下创建一个redux文件夹创建一个reducers.js，内容如下：/** * 包含n个reducer函数的模块 */import {INCREMENT,DECREMENT} from './action-types';export function counter(state = 0,...原创 2019-11-09 16:41:50 · 403 阅读 · 0 评论 -
react-ui 库antd-mobile安装使用，按需加载
react-ui库：antd-mobileantd-mobile官网安装：npm install antd-mobile --save在index.html 引入以下内容在<head></head>标签中<!DOCTYPE html><html><head> <!-- set `maximum-scale` fo...原创 2019-11-07 16:28:24 · 864 阅读 · 0 评论 -
iframe高度自适应的问题
调整iframe高度问题先贴出完整代码父页面html<!DOCTYPE html><html lang="en"> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"&g...原创 2019-11-06 15:21:54 · 969 阅读 · 0 评论 -
vuex的使用
安装：npm install vuex --save在main.js中引入：import vuex from 'vuex'Vue.use(vuex);下载vuex的模块store模板，将整个store文件夹放在src文件夹下提取码：8kdzstore模板下载在main.js引入storeimport vuex from 'vuex'import stor...原创 2019-11-05 18:13:54 · 116 阅读 · 0 评论 -
Promise 异步处理
Promise：异步处理promise对象promise对象可以再原有的逻辑上添加异步操作let promise = new Promise( (resolve,reject) => { $.get(api,data,(res)=>{ if(res.status == 'ok'){ resolve(res.data);//成功时调用的函数 }else...原创 2019-10-22 11:18:39 · 84 阅读 · 0 评论 -
监听Audio的播放状态
监听Audio的播放状态项目：H5绣红旗// 监听音乐播放状态：改变播放或暂停按钮 watchMusicState(){ let _this = this; let $audio = document.getElementsByTagName('audio')[0];//获取音乐DOM节点 let playOrPause = docume...原创 2019-04-20 18:01:28 · 20444 阅读 · 0 评论 -
获取Audio音乐的总时长
获取Audio音频的总时长H5绣红旗 let musicDom = document.getElementsByTagName('audio')[0]; // 获取AudioDom节点 musicDom.load();//因为source标签不能直接更改路径，所以整个audio标签必须重新加载一次 musicDom.oncanplay = ...原创 2019-04-20 18:10:23 · 5494 阅读 · 2 评论 -
JS获取Audio音频的实时时间
获取Audio音频的实时时间项目：H5绣红旗//监听音乐实时播放的时间 watchMusicTime(){ let _this = this; //监听播放时间 let musicDom = document.getElementsByTagName('audio')[0];//获取Audio的DOM节点...原创 2019-04-20 19:04:15 · 13282 阅读 · 0 评论 -
在组件内引入外部JS
在组件内部引入外部js第一种操作 Dom引入js：export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); ...原创 2019-04-21 04:35:32 · 1132 阅读 · 0 评论 -
js实现文字向上滚动
js实现文字向上滚动html<div class="content"> <ul style="list-style:none" id="marquee"> <li v-for="(item,indx) in congratulationText" :key="indx">{{item}}</li> </...原创 2019-04-21 05:12:38 · 1214 阅读 · 0 评论