- 博客(30)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 【笔记】通过jsonp方式获取用户ip地址
此处用到第三方接口，有可能以后会失效：http://pv.sohu.com/cityjson方式一：用ajax（不在第三方接口的白名单内，会跨域）$.ajax({ type: "GET", url: 'https://pv.sohu.com/cityjson', cache: false, async: false, dataType: "json", success: function (res) { alert(res);
2020-11-24 12:16:28
1459
3
原创 【笔记】jsonp、ajax、axios的区别和理解
1、jsonp是一种可以解决跨域问题的方式，就是通过动态创建script标签用src引入外部文件实现跨域，script加载实际上就是一个get请求，并不能实现post请求。(其他实现跨域的方法有：iframe,window.name,postMessage,CORS...)2、ajax是一种技术，ajax技术包含了get和post请求的，但是它仅仅是一种获取数据的技术，不能直接实现跨域，只有后...
2020-04-15 17:04:30
1418
原创 【笔记】监听页面卸载时发送一条异步信息
// window.addEventListener('unload', analytics, false);analytics("end");//需要查看效果的时候，注释前一句监听，用这句function analytics(state) { if (!navigator.sendBeacon) return; var URL = 'https://www.baidu.com'; ...
2020-04-15 16:30:30
264
原创 【笔记】配置一个用webpack打包的多页面应用
本文更多的目的是为了留给自己偶尔翻开来回忆回忆怎么配置的，所以就没有详细的疑难杂症解决方案目录结构：webpack.config.jsconst path = require('path');const packagejson = require('./package.json');const HtmlWebpackPlugin = require('html-webpack...
2020-04-15 11:26:00
294
原创 【笔记】利用cookie做倒计时，防止浏览器刷新重置
此做法为应对以下场景：用户点击了“获取验证码”后开始做倒计时60s，如果用户通过F5刷新一下页面，这个倒计时就会被重置，然后继续获取验证码。为防止用户恶意刷验证码，虽然一般情况下后端都会做了限制，但是如果可以先在前端层面限制住，减少请求，节约带宽则更好。此处的实现方法是利用cookie在本地的时效属性来实现，例子中使用了Jq...
2020-02-20 17:52:47
1564
原创 【笔记】pageshow监听，判断当前页面是否为通过返回操作进入
在a页面，点击某个入口跳转至b、c、d...等任何一个页面在a页面添加pageshow监听，如果是通过返回按钮回到当前页面，则做一些类似“欢迎回来”的提示框实现效果如下：window.addEventListener("pageshow", function (event) { // console.log("监听pageshow"); if (event.persi...
2020-02-20 11:18:26
2329
原创 【笔记】jq监听全部img加载完
var img_length = $("img").length;var img_start = 0;$("img").load(function () { img_start++; if (img_start == img_length) { console.log("全部图片加载完毕！"); }});
2020-01-16 09:28:12
1065
原创 【笔记】构造函数、原型链、原型对象、构造器的理解
一、构造函数、实例化对象function Person(name) { this.name = name;}var person1 = new Person('xiaoming');var person2 = new Person('xiaoli');function后面的方法名Person就是一个构造函数，一般首字母大写，需要new实例化;new之后的对象就是实例化对象...
2020-01-10 15:59:27
7676
原创 【笔记】js实现复制功能
var content = "需要复制的内容";try { var save = function (e) { e.clipboardData.setData('text/plain', content); e.preventDefault(); }; document.addEventListener('copy', save); ...
2020-01-10 10:27:58
1718
原创 【笔记】jq实现长按监听效果
1、通过jq添加一个封装好的长按监听函数$.fn.longPress = function (fn,trsTime) {//长按监听 var $this = this; for (var i = 0; i < $this.length; i++) { (function (target) { var timeout; target.addEventListener(...
2020-01-10 10:23:43
2232
转载 【转载】连续赋值和内存指针的问题解析（a.x=a={n:2}）
前几天偶然看到了一个这样的题：var a = {n:1};var b = a;a.x = a = {n:2};//关键代码console.log(a);//{n: 2}console.log(b);//{n: 1, x: {n: 2}}这个题代码不多，不过考察的知识点却非常不错。我们知道内存空间分为栈内存和堆内存。栈内存用来存放供js代码来执行的环境，所以为了保证性能减少内存...
2020-01-09 12:33:53
1772
原创 【笔记】二分法，有序数组中快速寻找某个元素的下标
function indexOfSorted(arr,n){ var low = 0; var high = arr.length - 1; var mid = Math.ceil((low + high) / 2); //console.log(mid); while(high > low){ if(n == arr[low]){return low;} if(...
2020-01-09 11:22:39
1045
原创 【笔记】JS实现 深拷贝、浅拷贝
1、浅拷贝 Object.assign(target, source1, source2)var initObj = { name: "xiaoming", age: 12, sex:undefined, addAge: function () { return ++this.age; }}var tempObj = {};Object.assign(tempObj, i...
2020-01-09 10:10:34
1981
原创 【笔记】css实现单行超过width的内容以...代替，超过多行以...代替，flex布局下失效的解决方案
1、单行以...代替内容width:100px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;2、超过n行以...代替width:100px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-cl...
2020-01-08 12:04:15
1685
原创 【笔记】阻止h5长按出现系统默认的复制菜单
在h5页面，在某些场景下我们是不希望用户长按出现系统默认的菜单的，可以通过以下css实现，还要考虑给input开放允许*{//禁止h5长按调起系统菜单 -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none...
2020-01-08 10:49:37
2170
原创 【笔记】chrome浏览器设置成允许跨域
1、新建一个chrome浏览器快捷键2、新建一个存放浏览器缓存的空目录，此处用例放到D:\chromeKua3、选中第一步的快捷键 右键---属性---快捷方式---目标，在最后面补上--disable-web-security --user-data-dir=D:\chrome_kua标绿的地址以第二步的目录位置为准4、验证，双击打开这个新建的快捷键，若如下所...
2020-01-07 18:49:48
2151
原创 【笔记】fixed定位的弹层，阻止弹层后面的内容继续滚动
有时候显示一些提示的弹窗或者活动规则的弹层时，不希望继续滑动的时候，弹层后面的内容还能继续滚动此时可以通过点击的监听事件来阻止，这里给的例子是用jq写的$(".dialog").on("touchstart",function(e){e.preventDefault();})缺点：在这个盒子里面的其他点击事件或者sroll属性会失效...
2020-01-07 18:33:42
1766
原创 【例子】postMessage的简单例子，解决不同域名下iframe的跨域问题
单纯引入的iframe是没问题的，但是在不同域名下，想要获取iframe页面的高度等属性就会出现跨域的问题，而我们开发的时候往往是在本地的http://127.0.0.1域名下，为了在2种环境下都通用，我这里就使用了postMessage来处理，例子如下：a.html是要被引进来的iframe页面，b.html是显示的主页面，页面a.html发送当前页面的高度2个参数，第一个...
2020-01-07 18:18:26
2284
原创 【笔记】for(var i in res) 与 for(var i=0; i == res; i++) 是否等同
回答标题：不同。1：前者常用于遍历对象且i是字符串类型，后者是数值类型2：前者在某些旧版本的安卓设备会遍历其对象自身从而多遍历了一个值出来结论：遍历对象用前者，遍历数组用后者；引用另外一个解释：https://www.cnblogs.com/jinling/p/5462338.html...
2020-01-07 18:12:12
1824
原创 【笔记】fis3配置笔记
// 构建// fis 中的文件路径都是以 / 开头的，所以编写规则时，请尽量严格的以 / 开头。// 当设置规则时，没有严格的以 / 开头，比如 'a.js', 它匹配的是所有目录下面的 a.js, 包括：/a.js、/a/a.js、/a/b/a.js。如果要严格只命中根目录下面的 /a.js, 请使用 fis.match('/a.js')。// '*' 匹配0或多个除了 '/' 以外的...
2020-01-07 17:52:53
310
原创 【笔记】正则笔记
/*正则表达式 + : 前面的字符1或者n次；等价于{1,} ? : 前面的字符0或者1次；等价于{0,1} * : 前面的字符0或者n次；等价于{0,} . : 单个除换行符\n之外的任何字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式 | : 指明两项之间的一个选择 (): 标记一个子表达式的开始结束位置 ^ : 匹配输入字符串的开始位置；如果是在方括...
2020-01-07 17:50:00
344
1
原创 【笔记】ES6 ...解构赋值操作符的几种用法
1、对象/数组 的更新//对象的key、value更新var state = { status: true, num: 888 };var newState = { status: false, name:"aaa", age: 16};state = { ...state, ...newState };console.log(state);//{status: false, nu...
2020-01-07 17:46:08
1508
原创 【基础复习】冒泡排序函数，sort根据属性值排序
冒泡函数：var times = 0; var bubbleSort = function(trsArr){ for(var i = 0; i < trsArr.length - 1; i++){ for(var j = i + 1; j < trsArr.length; j++){ if(trsArr[i] > trsArr[j]){ var ...
2020-01-07 14:55:43
1405
原创 【踩坑】input的默认宽度，导致flex:1失效
先说说这个坑的来源需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
2020-01-07 14:32:37
2877
2
原创 【例子】用css的border写三角形
利用border写三角形，这里提供2种方案：这个盒子的宽高都要先设置成0，用border的值作为宽高1、先把四周的三角符号都设置成透明，在需要保留的那一个方位设置成有颜色即可， 缺点：在透明的地方也占了位置，而且得到的三角形只能是等腰三角；.triangleBox{ width:0; height:0; border:100px solid tr...
2020-01-07 12:27:39
1554
原创 【笔记】获取url中的属性值
通过split的截取就能轻松实现，方法很简洁，直接上代码function getFromUrl(trsKey){ var oriAndSer = window.location.href.split("?"); if(oriAndSer[0] == window.location.href){ return undefined;//没有属性值就跳出并返回undefined } v...
2020-01-07 12:10:00
1679
原创 【笔记】vue的set方法更新一个 新字段/新数组
在vue实例里面，更新一个data对象里面没有初始化过的 新字段/新数组，如果只是类似对象赋值的写法，是不会被重新挂载到页面实例中的，此时就要用到vue的set方法更新字段格式：Vue.set(target_position, newKey, newValue);更新数组格式：Vue.set(target_position, index, newValue);写个小例子在下方：v...
2020-01-07 11:53:04
3229
原创 【笔记】ES6箭头函数的写法汇总
语法：1、只有一个参数，可以不用写小括号：var single = a => a; //相当于var single = function(a){return a;}console.log(single('hello, world'))// 'hello, world'var single = a => console.log(a); //相当...
2018-07-08 16:07:51
6661
3
原创 【例子】固定表格的首行与首列
思路如下图所展示，整个表格分为四个部分：L1区域固定不动，R2为主要滑动区域，L2和R1随着R2的滑动相应滑动解决实例：直接复制下方的全部代码即可，没有引用本地文件下面是该实例的完整代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv...
2018-07-07 23:18:10
2271
原创 【笔记】利用ES6的set属性实现数组去重
数组去重法（利用indexOf查找实现）：var arr = [0,2,3,4,4,0,2];var res = [];for(var i = 0; i < arr.length; i++){ if(res.indexOf(arr[i]) == -1){ res.push(arr[i]); }}console.log(res);//[0, 2, 3, 4]es6的S...
2018-07-05 16:34:52
1714
webpack_temp.zip
2020-04-26
webpack_temp.zip
2020-04-15
cookie_downTime.zip
2020-02-20
表格固定行和列，列表跟随内容滑动
2018-07-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人