随笔分类 - javascript
摘要：通过向https://api.ipify.org/发起请求来获取用户ip // utils/index.js export const getUserIp1 = async function () { return new Promise((resolve, reject) => { const x
阅读全文
摘要：通过js获取设置的css变量的值 已经设置好的css的变量值 :root{ --main-white:#fff; } .theme_light { --header-bg: var(--main-white); } 通过js获取已经设置好的css变量值 console.log( getCompute
阅读全文
摘要：需求场景 在适配移动端的过程中, 可以通过@media screen 来设定屏幕宽度在指定条件下的元素样式; 现要求在pc端与移动端有不同的html结构, 可以使用window.matchMedia进行判断并实现条件渲染 代码 假设我以900px作为pc端与移动端的分界 window.addEven
阅读全文
摘要：let arr1=[3,5,7] llet [...arr2]=arr1
阅读全文
摘要：目录含义主要用法扩展运算符中放置表达式的用法只有函数调用才可以将扩展运算符放置在圆括号中 含义 主要用于将数组直接转换为用逗号分隔的参数序列 var arr=[3,5,7]; console.log(...arr); // 3,5,7 主要用法 主要用于函数调用 function add(x, y)
阅读全文
摘要：通过document.styleSheets可以获取到一个StyleSheetList接口 const aStyleList = document.styleSheets console.log(aStyleList.constructor.name) // StyleSheetList conso
阅读全文
摘要：在今天的开发中遇到这样的需求：通过接口获取到文章数据， 文章数据是html字符串， 使用innerHTML将其注入到某一个元素中， 文章中的某些图片因为服务器端的图片失效等原因无法访问，需要为其添加一个onerror处理事件， 替换调损坏的图片， 替换为一个显示加载失败的图 function han
阅读全文
摘要：<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_1826665_p96ije5uc2f.css" crossorigin> var linkStyle = document.getElementsByTagName("link"
阅读全文
摘要：测试代码 <body> <input type="text" id="i1" /> <script> const oI1 = document.querySelector('#i1') oI1.addEventListener('keydown', function (e) { console.lo
阅读全文
摘要：- 情景再现: 今天在写页面时遇到这么一个请求: 有一张图片, 默认隐藏, 要求在该图片加载完毕后, 执行取消隐藏的动画. 目的是不要在执行动画期间图片有空白的样子. 第一个想到的当然是img的onload回调函数. 但是天生反骨不爱用行内元素. 于是想到使用ajax请求图片资源, 再使用FileR
阅读全文
摘要：- 现实情景: 在对博客园的样式进行修改时, 需要对博客园的中某些DOM的绑定事件进行手动触发 ### 主动触发原生事件, 以click为例 ```vue const oBtn2 = document.querySelector('#btn2') oBtn2.addEventListener('cl
阅读全文
摘要：## 中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题 - 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想
阅读全文
摘要：- 情景再现: 今天在写页面时遇到这么一个请求: 有一张图片, 默认隐藏, 要求在该图片加载完毕后, 执行取消隐藏的动画. 目的是不要在执行动画期间图片有空白的样子. 第一个想到的当然是img的onload回调函数. 但是天生反骨不爱用行内元素. 于是想到使用ajax请求图片资源, 再使用FileR
阅读全文
摘要：- 现实情景: 在对博客园的样式进行修改时, 发现需要对博客园本身的html结构进行更改, 而其中一些html结构被绑定了事件处理程序. 一些元素在修改时虽然被隐藏但是也需要通过其他方式来达到触发它原本绑定的事件处理程序的目的, 因此需要对这些DOM的绑定事件进行手动触发 ### 主动触发原生事件,
阅读全文
摘要：for循环的执行顺序 for循环的代码如下 var a = [] for (var i = 0; i < 3; i++) { a[i] = function () { console.log(i) } } a[0]() // 3 a[1]() // 3 a[2]() // 3 其调用顺序为: 定义循
阅读全文
摘要：< table > < table > 标签的特有属性 cellpadding:用于设置td，th中的内容与边框的距离 cellspacing:用于设置td，th之间的距离 ATTENTION: 给td,th设置margin属性是无效的。想要设置单元格之间的间距只有通过table的内联属性cells
阅读全文
摘要：将表单的结果通过以[name]=[value]的方式，通过&符号连接起来 <form action="#" method="post" id="form1"> <label for="uname"> <input type="text" id="uname" name="uname"> </labe
阅读全文
摘要：辨别this的不同 const person1 = { name: 'Nicholas', age: 74, job: 'engineer', getDetail: function () { console.log(`${this.name} is a ${this.job} and is ${t
阅读全文
摘要：事件描述 当选中文本时触发所在元素的select事件。 兼容性以及区别：在IE9+和现代浏览器中，只有当用户选择了文本且松开鼠标左键后才会触发该事件。在IE8及以下浏览器中，每当用户选择一个字符就会触发一次select事件。 兼容性示例 <input type="text" id="a" value
阅读全文
摘要：按下的是非字符键时 仅触发keydown与keyup事件，通过event.keyCode可以查询按下的是什么键。 按下键按住不放会重复触发keydown事件，出于性能考虑有必要进行防抖处理或者进行其它限制。 按下的是字符键时 在input输入框中按下字符键，触发keydown,keypress,te
阅读全文