JS
关注
分享
扫一扫
赵啸林
昨日已成历史，明天是个谜团，但今天是天赐的礼物。
展开
-
浅谈script，link，import，@import引入
1.script，link是html标签，script可以引入js,即可调用引入js里面的方法，link标签可以引入css样式图片。4.可操作性:link可以通过js操作dom（盗墓 文档对象模型）插入link标签改变样式，而@import不能。2.import是tp语法，可以引入js也可引入css。3.兼容性:link（是标签）没有兼容问题，@import不兼容ie5以下的浏览器.1.从属关系:link是html标签，@import是css提供的.链接式和导入式有什么区别（链接式，导入式，内嵌式，行内）原创 2023-02-25 15:26:50 · 3878 阅读 · 0 评论 -
使用wow.js给页面添加动画
data-wow-offset：触发动画时到元素的距离。data-wow-duration：过渡时间。data-wow-delay：延迟时间。设置wow可以如下html设置。设置wow可以如下js设置。原创 2023-02-25 14:55:39 · 417 阅读 · 0 评论 -
vue3使用pdfh5(安卓端)
总结:ios手机自带pdf预览功能，a标签打开即可预览，安卓手机需要本文使用pdfh5进行预览（打开了新页面）原创 2023-02-25 11:25:14 · 1316 阅读 · 0 评论 -
自定义vue指令
如果是弹窗的话，需要打开弹窗之后执行才生效。页面上，在元素dom上面直接添加。原创 2023-02-16 16:24:03 · 138 阅读 · 0 评论 -
谷歌浏览器关于滚动事件警告去除
将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页更具响应性。2、main.js中加入：import ‘default-passive-events’转载 2023-02-16 16:20:29 · 1902 阅读 · 0 评论 -
js中reduce的用法
reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。这里以数组求和举例：没有设置函数的初始迭代值运行结果:设置函数的初始迭代值。原创 2023-02-15 13:57:52 · 228 阅读 · 0 评论 -
监听页面窗口
【代码】监听页面窗口。原创 2023-01-09 10:30:48 · 167 阅读 · 0 评论 -
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题内嵌 iframe 页面，一般使用 window.parent 或 window.top 来获取父页面的 window 对象在子页面 想使用(或传递给) 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。原创 2023-01-03 09:56:48 · 1981 阅读 · 0 评论 -
使用js实现拖拽功能
event.clientX和event.clientY分别是鼠标当前的横坐标和纵坐标，offsetX 和 offsetY 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的left和top值。js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。以下是一段可执行代码。转载 2022-10-08 16:09:51 · 1662 阅读 · 0 评论 -
vue3使用orgchart
orgchart.min.js原创 2022-06-16 17:23:45 · 1980 阅读 · 1 评论 -
dayjs总结
dayjs是一个轻量的处理时间和日期的 JavaScript 库转载 2022-06-08 09:13:11 · 922 阅读 · 0 评论 -
纯前端文件下载
FileSaver.min.jshttps://download.csdn.net/download/weixin_49295874/85151046jszip.min.jshttps://download.csdn.net/download/weixin_49295874/85151040一.通过a标签文件下载js1.js创建a标签 let a = document.createElement("a"); // 创建一个a标签 a.href = '下载内容或链接'; // a标签的原创 2022-04-16 10:29:15 · 1025 阅读 · 0 评论 -
js获取、今日、昨日的开始与结束时间戳
/** * 可以根据转入的天数获取前面某天的开始与结束时间戳 * @param {number} num 前面几天 */function getStartEndTime (num = 1) { // 一天的毫秒数 const MillisecondsADay = 24*60*60*1000 * num // 今日开始时间戳 const todayStartTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() // 今原创 2022-04-09 17:04:39 · 981 阅读 · 0 评论 -
深入理解事件循环
众所周知，JavaScript 是一门单线程语言，虽然在 html5 中提出了 Web-Worker ，但这并未改变 JavaScript是单线程这一核心,，可是浏览器又能很好的处理异步请求，那么到底是为什么呢？浏览器执行线程在解释事件循环之前首先先解释一下浏览器的执行线程： 浏览器是多进程的，浏览器每一个 tab标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等其包含的线程有：GUI 渲染线程（负责渲染页面，解析 HT.转载 2022-03-24 14:10:08 · 281 阅读 · 0 评论 -
广度算法和深度算法
背景在开发页面的时候，我们有时候会遇到这种需求：在页面某个dom节点中遍历，找到目标dom节点，我们正常做法是利用选择器document.getElementById()，document.getElementsByName()或者document.getElementsByTagName()，但在本文，我们从算法的角度去查找dom节点，同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理。准备var node = document.querySelector('#root');cons转载 2022-03-24 13:46:41 · 429 阅读 · 0 评论 -
vue3使用jquery导航栏左右滚动
首先推荐大家关注一下https://primarycolor.blog.csdn.net/转载于：https://primarycolor.blog.csdn.net/article/details/114328549 https://blog.csdn.net/qq_42740797/article/details/120724220?utm_source=app&app_version=4.21.0&code=app_1562916241&uLinkId=usr1mkqgl转载 2021-12-30 09:57:30 · 306 阅读 · 0 评论 -
排序sort
let dataList=[{name:"手机"},{name:"电脑"},{name:"数码相机"},{name:"保健品"},{name:"书"},]dataList.map(i => { i.sLen = i.Name.length;//给数组每一项添加一个长度属性});dataList.sort((a, b) => { return a.sLen - b.sLen;//根据长度从小到大排序});...原创 2021-12-30 09:25:28 · 71 阅读 · 0 评论 -
window.open()打开窗口的几种方式
window.open()的三个参数例如：window.open("要跳转的网址", "跳转形式或者名字", "给出窗口添加新的的属性（字符串形式）");window.open("###", "_blank","height=600, width=600, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");1. 在当前窗口打开百度,并且使URL地址出现在搜索原创 2021-08-08 08:23:27 · 26858 阅读 · 2 评论 -
ES6---箭头函数()=＞{} 与function以及class的区别
https://blog.csdn.net/github_38851471/article/details/79446722转载 2021-08-03 17:50:49 · 378 阅读 · 0 评论 -
单位换算js
numberFormat(value) { var param = {}; var k = 10000, sizes = ['', '万', '亿', '万亿'], i; if (value < k) { param.value = value; param.unit = "" } else { i = Math.floor(Math.log(value) / Math.log(k)); param.value原创 2021-08-03 09:27:34 · 614 阅读 · 0 评论 -
uniapp 去浏览器页面
browser.jsimport browser from '@/lib/browser.js'//去浏览器页面goPage() { var options = { 'data': '123' } const url = "浏览器地址" browser.init(options) browser.show(url) },原创 2021-07-31 08:33:56 · 356 阅读 · 0 评论 -
H5拨打电话
一.原生html文件项目<p>联系电话：<a :href="'tel:' + item.phone" rel="external nofollow" >{{item.phone}}</a></p>二.vue项目1.在vue项目的index.html中添加如下代码：<meta name="format-detection" content="telephone=yes" />2.在需要调起手机拨号功能的页面，写如下函数： <di转载 2021-07-29 11:59:14 · 1225 阅读 · 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>Do原创 2021-05-27 11:22:50 · 321 阅读 · 0 评论 -
JS 中 call()、apply()、bind() 的用法
例一obj.objAge; // 17obj.myFun() // 小张年龄 undefined例二shows() // 盲僧 例三比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；1，call()、apply()、bind() 都是用来重定义 this 这个对象的！如：obj.myFun.call(db)； // 德玛年龄 99obj.myFun.apply(db);转载 2021-05-17 17:23:16 · 95 阅读 · 0 评论 -
js的this和函数以及原型
大批量创建工厂函数 function create(name,age,sex){ let obj = new Object() obj.name = name; obj.age = age; obj.sex = sex; obj.seyName = function(){ alert(this.name) } return obj; } let obj1原创 2021-05-13 15:36:24 · 111 阅读 · 0 评论 -
js编码和解码
一.Unicode编码和解码1.escape()和unescape()方法escape() 方法能够把 ASCII 之外的所有字符转换为 %xx 或 %uxxxx（x表示十六进制的数字）的转义序列。从 \u000 到 \u00ff 的 Unicode 字符由转义序列 %xx 替代，其他所有 Unicode 字符由 %uxxxx 序列替代。var s = "JavaScript 中国";s = escape(s); //Unicode编码console.log(s); //返回字符串“Java转载 2021-05-12 10:05:16 · 2573 阅读 · 1 评论 -
switch 语句
switch 语句专门用来设计多分支条件结构。与 else/if 多分支结构相比，switch 结构更简洁，执行效率更高。switch (expr) { case value1 : statementList1 break; case value2 : statementList2 break; ... case valuen : statementListn break;原创 2021-05-10 15:45:01 · 270 阅读 · 0 评论 -
多层数组转化一层对象
let arr = [ { id1: "1", list: [{ id2: "2" }, { id2: "3" }] }, { id1: "4", list: [{ id2: "5" }, { id2: "6" }] }, ]; let arr111 = []; arr.map((item, index) => { let obj = {}; if (item.id1) { obj.id1 = item.id1; let str ..原创 2021-04-26 09:05:02 · 740 阅读 · 0 评论 -
获取到月初和月末日期
let date = new Date()console.log(date)let firstDay = new Date(date.getFullYear(), date.getMonth(), 1).toLocaleDateString().replace('/','-').replace('/','-');let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).toLocaleDateString().replace原创 2021-04-26 09:01:48 · 620 阅读 · 0 评论 -
回文
function checkPalindrom(str) { return str = str.split('').reverse().join(''); }var str = "abc";console.log(checkPalindrom(str))原创 2021-04-26 08:58:12 · 72 阅读 · 0 评论 -
比较数组对象值相等部分并筛选出来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>比较数组对象值相等部分并筛选出来</title></head><body> <转载 2021-04-26 09:51:51 · 458 阅读 · 0 评论 -
判断值相等顺序不相等的数组相等
//a,b是传入的数组形参 f: function (a, b) { a = [...a] b = [...b] let m = new Map() a.forEach(o => m.set(o, (m.get(o) || 0) + 1)); b.forEach(o => m.set(o, (m.get(o) || 0) - 1)); for (var value of m.values()) { if (value !== 0) {原创 2021-04-19 14:40:54 · 221 阅读 · 0 评论 -
输入框限制规则 只能输入数字 只能输入字母数字 等等
输入大小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点<input type="text" onkeyup="value=value.rep转载 2021-04-09 10:41:17 · 1669 阅读 · 0 评论 -
身份证正则表达式验证
onKeyUp=“value=value.replace(/[\W]/g,’’)”/（只能输入数字和字母）<div class="draw_cardnum"> <span>身份证号</span> <input type="idcard" placeholder="身份证号" onKeyUp="value=value.replace(/[\W]/g,'')"/></div>var draw_cardnum = $(".draw_cardn原创 2021-04-09 10:20:46 · 2497 阅读 · 1 评论 -
js仿QQ中对联系人向左滑动、滑出删除 修改按钮的操作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>测试</转载 2021-03-18 15:53:06 · 186 阅读 · 0 评论 -
聊天时间提示展示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>测试</原创 2021-03-17 17:20:40 · 329 阅读 · 1 评论 -
原生js图片上传 jquery
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>原创 2021-03-16 10:18:10 · 133 阅读 · 0 评论 -
本地缓存：localstorage几种使用方法
https://blog.csdn.net/u010132177/article/details/103029716转载 2021-03-15 10:22:02 · 937 阅读 · 0 评论 -
onpageshow 事件及应用
onpageshow 事件在用户浏览网页时触发。onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。和onshow生命周期类似。html中添加onpageshow事件<!DOCTYPE html><html><head><meta charset="utf-8"><title>html中原创 2021-03-15 09:51:11 · 1484 阅读 · 0 评论 -
如何通过JS函数获取url参数
//通过以下JS函数获取url参数:function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); .转载 2021-03-15 09:23:25 · 419 阅读 · 0 评论