js
关注
分享
扫一扫
喜大普奔⁶⁶⁶
做个有思想的程序员，有木有兼职做做啊～啊，缺马内，给我掉下来个赚马内的副业吧
展开
-
记录一下：shim和polyfill
shim 的概念要比 polyfill 更大一些，可以将 polyfill 理解为专门兼容浏览器 API 的 shim。简单的说，如果浏览器X支持标准规定的功能，那么 polyfill 可以让浏览器 Y 的行为与浏览器 X 一样。原创 2023-05-06 10:36:00 · 178 阅读 · 0 评论 -
原生JS下载文件记录，以文件链接的形式下载文件
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目。原创 2022-08-05 16:48:49 · 464 阅读 · 0 评论 -
web端生成pdf，前端生成pdf导出并自定义页眉页脚
前端导出pdf文件，并在页眉页脚加上企业logo或者是企业名称前端导出pdf这里的项目用的 vue-element-admin 的模板，vue 版本是 2.X1、前端基础 html + css + js2、vue3、html2canvas4、jspdf安装依赖：逻辑1、初始化数据，html页面渲染2、将html渲染出来的合同页面全部使用 html2canvas 转换为 canvas3、准备随时生成临时的 对应 a4 纸页面大小的 canvas 的方法4、将合同页面生成的 canvas 分成原创 2022-08-01 12:36:50 · 6844 阅读 · 43 评论 -
原生JS数字序号转文字序号，数字序号转中文序号
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目。原创 2022-08-01 12:07:52 · 884 阅读 · 0 评论 -
原生JS封装一个灵活的日期时间格式化类或者说函数，不仅仅有灵活的yy-mm-dd hh:ii:ss，后续补充完善原生JS时间戳格式化日期格式化类
先看使用便捷与否，觉的便捷就拿走直接用// 类存放地址：utils/formatTime.jsimport { FormatTime } from './utils/formatTime' // 引入const $Format = new FormatTime() // 实例化// 使用：// 1-将一个已有的日期时间转换其他格式console.log(1, $Format.formatTime({dateTime: '1992-2-4 3:5:8', format:'yy-mm-dd hh:i原创 2021-10-20 10:05:33 · 222 阅读 · 0 评论 -
Hash模式和History模式的区别
首先强调一下不管哪种模式，都是客户端路由的实现方式。也就是当路径发生变化的时候，不会向服务器发生请求，是由JS监视路径的变化，然后根据不同的地址，渲染不同的内容；如果需要服务器内容的话，会发送 ajax 请求来获取。表现形式的区别Hash 模式路由中带着 # 号，# 后边的内容作为我们的路由地址，可以通过问号携带 URL 参数。官方文档上说这种模式很丑，路径中带着一些跟路径无关的符号，比如 # 号和 ? 号再来看 History 模式History 模式的 URL 就是一个正常的 URL ，原创 2021-10-19 11:42:23 · 544 阅读 · 0 评论 -
canvas特效，由地图上某个点向四周发散的曲线特效，从某个集中点出发向四周发散的canvas线条特效，img+canvas
先看特效：应产品以及UI要求搞出来的：直接看代码吧，就不叙说了<!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原创 2021-04-23 19:55:22 · 1733 阅读 · 0 评论 -
记录JavaScript函数内部关于this指向问题总结
沿着作用域向上找最近的一个 function (不是箭头函数)，看这个 function 最后怎么执行的；this 的指向取决于所属 function 的调用方式，而不是定义function 调用一般分为以下几种情况：作为函数调用，即：foo() 指向全局对象（globalThis），注意严格模式问题，严格模式下是 undefined作为方法调用，即：foo.bar() / foo.bar.baz() / foo['bar'] / foo[0]() 指向最终调用这个方法的对..原创 2020-11-10 08:59:31 · 153 阅读 · 0 评论 -
原生JS过滤数组中的undefined,null,空串,NaN等
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目let arr = [1,'',2,null,3,NaN,4,unfined,5,'',6]let arr1 = arr.filter(Boolean);console.log(arr1);//[1,2,3,4,5,6]原创 2020-08-26 12:22:51 · 2516 阅读 · 0 评论 -
原生JS利用正则动态匹配标签，将一个特别长的html文本切割为不固定长度的字符串数组，并确保切割的时候不破坏匹配到的内容的完整性
后台的需求是这样的：在线 html 编辑器编辑出来的文章，需要调用第三方服务做一些处理，只处理内容，不处理标签，第三方服务还限制字数，这里以 5000 为例，而如果文章里面有 html 标签，第三方服务暂时没那么智能，做的处理就会出错，而且处理过后还不能打乱之前文章的 html 结构顺序等，后台用的 PHP，但是我就想用 JS 处理一下，试试嘛，一个人一个想法一开始是直接用正则处理，将文章内容用标签分成数组，然后遍历，不断的请求第三方服务接口，然后再将处理之后的结果和提取出来的标签拼接一下，是能实现，原创 2020-07-22 11:24:51 · 792 阅读 · 2 评论 -
js中~符号的操作，像!~这种的简单运算，项目里边偶尔之间碰到了!~运算符，查了查记录一下
~ (按位非)对每一个比特位执行非（NOT）操作。NOT a 结果为 a 的反转（即反码）。非操作的真值表： 9 (base 10) = 00000000000000000000000000001001 (base 2) --------------------------------~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)对任一数值 x 进行按位非操作的结果为 -原创 2020-06-22 17:22:12 · 433 阅读 · 0 评论 -
原生JS将大驼峰字符串添加间隔符并转换为小写，也就是转换为连字符，这里是将小驼峰格式转换为路径
/* 将大驼峰字符串添加间隔符并转换为小写，也就是转换为连字符 str:传递过来的原字符，splitStr:间隔符，默认是 '-'*/let humpToHyphen = function(str='',splitStr='-'){ if(str == ''){ // 字符串是空的 return 'str is empty'; } if(typeof(str).toLowerCase() !== 'string'){ //必须是字符串类型，其他的都不要 return 'incorr原创 2020-06-22 16:35:30 · 911 阅读 · 0 评论 -
原生JS监听复制事件，更改复制的内容，或者在复制内容后面追加参数，原生JS控制按钮点击复制自定义内容，复制想要让复制的内容
原生 JS 监听 复制 copy 事件，追加版权信息<div class="empty-font">空心字</div><script type="text/javascript"> //监听整个页面的 copy 事件 document.addEventListener('copy',function(e){ // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容 let clipboardD原创 2020-06-19 15:06:49 · 7902 阅读 · 0 评论 -
原生JS去除字符串中的html标签封装
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目自己写的：function strip_tags_all(str=''){ var reg = new RegExp('<\/{0,1}\\w+>','gm'); str = str.replace(reg,''); return str;}别人的：function strip_tags_all(str=''){ var reg = new RegExp('<[^>]+原创 2020-06-12 15:09:19 · 346 阅读 · 0 评论 -
多行文本超出部分省略号原生JS插件使用记录
先看图片：超出省略：没超出隐藏：这里直接写的 html 文件，原生的东西 放哪儿都适用<style> body { padding: 20px; } .module { width: 250px; margin: 0 0 1em 0; overflow: hidden; }</styl...转载 2020-04-16 18:34:51 · 497 阅读 · 0 评论 -
原生JS通过html元素的属性及属性值获取html元素对象
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目function getDomByAttr(className, attrName, value) { let els = []; let doms = window.document.getElementsByClassName(className); for (var i = 0; i < doms.leng...原创 2020-03-31 15:52:37 · 1820 阅读 · 1 评论 -
封装一个活灵活现的原生JS排序，js按照拼音排序，js按照“数字-字符串-汉字拼音”排序，数组对象排序，数组排序微调即可
/*prop:要排序的数据对象里面的属性*/export function compare(prop){ return function (obj1, obj2){ let a = obj1[prop]; let b = obj2[prop]; var n = !isNaN(a - 0), n2 = !isNaN(b - 0); // 数字优先 if (n &&...原创 2020-01-22 10:31:45 · 413 阅读 · 0 评论 -
JavaScript 判断对象中是否存在某个属性的常用方法
判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。一、点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。// 创建对象let test = {name : 'lei'}// 获取对象的自身的属...转载 2020-01-21 13:29:55 · 1968 阅读 · 0 评论 -
原生JS判断密码框只让输入数字字母下划线，正则判断只让输入数字字母下划线正则表达式
let reg = /^[_]*[A-Za-z]*[a-z0-9_]*$/; //正则reg.test(this.newPwd); //test判断 true || false原创 2020-01-16 14:03:44 · 1489 阅读 · 0 评论 -
原生JS时间戳格式化，时间戳转换日期，时间戳转换日期时分秒格式化封装
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目/** * 时间戳格式化日期，一般后台给的都是秒级的时间戳,我们PHP的后台给的就是秒级的，可自行 *1000修改 * timestamp:时间戳 * dateS:日期间隔符 默认 - * timeS:时分秒间隔符 默认 : * flag:是否携带 时分秒 默认 false */function formatT...原创 2019-12-18 15:44:56 · 871 阅读 · 0 评论 -
原生JS利用for循环输出26个英文字母
for(var i=0;i<26;i++){console.log(String.fromCharCode(65+i));//输出A-Z 26个大写字母}for(var i=0;i<26;i++){console.log(String.fromCharCode(97+i));//输出a-z 26个小写字母}转载 2019-12-18 15:25:08 · 5868 阅读 · 0 评论 -
原生JS判断访问当前网址的设备时移动端还是PC端
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Wind...原创 2019-12-04 19:10:07 · 212 阅读 · 0 评论 -
原生JS获取浏览器版本信息
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目(找不到是谁写的，直接拿来放这儿了)function getBrowserInfo() { let agent = navigator.userAgent.toLowerCase(); let arr = []; let system = agent.split(' ')[1].split(' ')[0].split(...原创 2019-11-01 13:07:47 · 294 阅读 · 0 评论 -
原生JS获取屏幕宽高，兼容式写法
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目function clientXY(){ if(window.innerHeight !== undefined){ return { width: window.innerWidth, height: window.innerHeight ...原创 2019-11-01 13:05:53 · 666 阅读 · 0 评论 -
原生JS查看当前浏览器版本是否是IE并返回IE版本号
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目function IEVersion() { let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexO...原创 2019-10-28 16:52:23 · 276 阅读 · 0 评论 -
原生JS判断是否为空对象，判断是否为对象
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目function isEmptyObject(obj) { for (let key in obj) { return false }; return true}原创 2019-06-21 16:44:29 · 479 阅读 · 0 评论 -
常用的ContentType小计
//获取xhr对象function getXhr(){ let xhr=null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { //为了兼容IE6 xhr = new ActiveXObject('Microsoft.XMLHTTP'); ...原创 2019-04-28 11:17:59 · 263 阅读 · 0 评论 -
原生JS根据开始时间戳和结束时间戳两个时间戳计算时间差返回时分秒格式
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目//计算时间差function formatTimes(startTime, endTime) { let diff = endTime - startTime; let str = ''; // 毫秒化天 let d = Math.floor(diff / (24 * 3600 * 1000)); i...原创 2019-09-30 17:43:24 · 770 阅读 · 1 评论 -
记录原生JS的Set,Map,Array.from以及三个点 ... (扩展运算符)用法
一、 SetSet.prototype.size：返回Set实例的成员总数。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。add(value)：添加某个值，返回 Set 结构本身。delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。has(value)：返回一个布尔值，表示该值是否为Set的成员。cle...原创 2019-06-26 10:19:13 · 1643 阅读 · 0 评论 -
原生JS 控制网站内容不让选中，去除右键菜单
直接上代码CSS*{ -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}JSwindow.addEventListener("load",()=>{...原创 2019-05-20 13:55:31 · 215 阅读 · 0 评论 -
js 类数组对象转换为数组，调用数组的方法
[].slice.call(document.getElementsByClassName("sec"), 0);Array.from(document.getElementsByClassName("sec"), 0);//这里就可以直接调用数组的方法了，而不会报什么is not a function...原创 2019-05-10 11:27:30 · 1576 阅读 · 0 评论 -
17种常用的JS正则表达式 非负浮点数 非负正数.
<input type=‘text’ id=‘SYS_PAGE_JumpPage’ name=‘SYS_PAGE_JumpPage’ size=‘3’ maxlength=‘5’ οnkeyup=‘this.value=this.value.replace(/[^1-9]\D*$/,"")’ οndragenter=“return false” οnpaste=“return !clipbo...转载 2019-05-07 11:00:41 · 2516 阅读 · 0 评论 -
window . on resize方法冲突？覆盖？不存在的~~
自己写了个响应式和视觉差的页面，还有一个响应式的轮播小组件，于是一准儿想到了window.onresize事件，单独用的时候没问题，可是一把组件放页面里就准有一个onresize不执行，搞得我神烦，然后就试着将方法提出来，放到顶级，然后用子组件触发，但是这样忒麻烦了，而且这样耦合度太高，这组件还不如直接写页面里呢，然后就试着换一种绑定方式看看行不行，哎？你别说，挺好使，以后绑定事件直接就它了，也...原创 2019-05-09 17:43:22 · 1637 阅读 · 0 评论 -
原生JS Ajax上传文件 FileReader预览图片 nodejs文件上传 express+multipart上传文件处理
封装原生JS的Ajaxpublic/viewjs/ajax.jsfunction getXhr(){ let xhr=null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { //为了兼容IE6 xhr = new ActiveXObje...原创 2019-04-28 17:05:27 · 630 阅读 · 0 评论 -
window\.onresize自写响应式常用方法
窗口改变触发页面重绘触发该事件window.onresize = () => { this.changeSize()};原创 2019-04-09 11:26:51 · 482 阅读 · 0 评论 -
window.getComputedStyle和elem.currentStyle兼容式写法，原生JS获取元素样式
export function getStyle(el,attr){ if(el.currentStyle){ //IE,OPER return el.currentStyle[attr]; }else{ //chrome、safari、FireFox return window.getComputedStyle(el...原创 2019-04-09 11:22:46 · 499 阅读 · 0 评论 -
javascript 判断鼠标右键点击触发事件
W3C上描述：http://www.w3school.com.cn/jsref/event_button.asp0 规定鼠标左键。1 规定鼠标中键。2 规定鼠标右键。//IE 参数不同：1 规定鼠标左键。4 规定鼠标中键。2 规定鼠标右键。//总的来说，鼠标右键都是2，其他的不管了<html><head><script type="tex...原创 2019-04-04 14:07:54 · 3653 阅读 · 0 评论 -
原生JS获取指定范围随机数
function randNum(min,max){ return Math.floor(Math.random() * (max - min + 1) + min);}原创 2019-04-04 11:25:29 · 1833 阅读 · 0 评论 -
移动端如何让页面强制横屏
跳转原文看下测试页面html结构<body class="webpBack"> <div id="print"> <p>lol</p> </div></body>最终的理想状态是，把lol非常和谐的横过来。好了来看看区分横屏竖屏的css：@media screen转载 2019-01-24 11:59:20 · 768 阅读 · 0 评论 -
原生JS判断元素是否包含某个className，添加className，移除className
function hasClassName(obj,name){ let tmpName = obj.className; let tmpReg = new RegExp(name,'g'); if(tmpReg.test(tmpName)){ return true; }else{ return false; }}//调...原创 2019-05-10 18:14:52 · 3291 阅读 · 0 评论