JavaScript
gerrylon007
这个作者很懒,什么都没留下…
展开
-
eggjs/egg-mysql 如何修改默认编码
egg-mysql指定数据库编码原创 2022-10-20 19:54:12 · 888 阅读 · 1 评论 -
touchend与滚动事件冲突的问题
问题描述: content高度固定, 期中有多个p标签, 致使出现滚动. 需求是点(touchend)p标签的时候,做业务处理. 然后问题就出现了: 滚动的时候也会触发touchend. 代码示意如下:<div id="content"> <p>内容</p> <p>内容</p> <p>内容&原创 2018-04-27 15:51:58 · 3283 阅读 · 0 评论 -
ajax跨域解决方案总结
ajax跨域解决方案总结前端开发中经常会碰到各种跨域问题,在此做一总结。 实验代码: https://github.com/GerryLon/cors什么是跨域?先来讲讲什么是跨域?XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名...原创 2018-05-04 14:10:12 · 656 阅读 · 0 评论 -
安卓微信浏览器location.reload()无效
场景还原如下: 某次活动页面, 提交一个表单后需要刷新页面,想也没想就用location.reload(), 然而这个除了安卓微信浏览器, 其他平台(pc端, 移动端浏览器等都正常,我也是无语,后来发现是微信缓存的原因。那么改起来就简单了:var href = location.href;var hasQuery = href.indexOf('?') &gt; 0;href = h...原创 2018-04-18 12:28:01 · 1417 阅读 · 0 评论 -
移动端适配之rem.js
移动端网页适配是一个麻烦事, 常见做法有媒体查询, js控制等. 媒体查询个人感觉比较冗余, 可少量使用, 偏爱于js来控制.下面是我自己总结的rem.js:(function(doc, win) { // html元素字体 // 这里基础字体设置为10在uc, WX上没效果, 不知道为什么 // 设置为10时, dpr=1的手机, 宽度360, 计算出来html的字...原创 2018-04-09 20:05:48 · 16200 阅读 · 3 评论 -
网页音视频播放器jPlayer使用介绍
最近项目中需要播放音频. 视频之前的已经做了, 要加上播放音频的功能, 还要兼容ie8, 还要禁止下载.禁止下载这个就不管了, 因为不可能禁止. 要兼容ie8, 就不能用&lt;audio&gt;了, ie系列ie9+才支持audio, 具体兼容性请看: https://caniuse.com/#search=audio.找了半天, 发现jPlayer兼容ie系列, 就用它了. 其实...原创 2018-03-30 13:53:37 · 1609 阅读 · 0 评论 -
sublime3的Minify扩展压缩js保留关键字的问题
sublime的Minify扩展 可以压缩css, js, json, html, svg, 如果是临时写一些东西, 还是很方便的.不过在用它压缩js时, 想避免压缩一些关键字, 比如require, 也不知道为什么用seajs时, require关键字被压缩会报错, 所以想配置这个Minify来避免压缩关键字.在配置"uglifyjs_options": "-c -m reser...原创 2018-03-12 18:04:06 · 697 阅读 · 0 评论 -
js获取页面中最大z-index
见如下代码:function getMaxZIndex() { var maxZ = Math.max.apply(null, $.map($('body *'), function(e,n) { if ($(e).css('position') != 'static') return parseInt($(e).css('z-inde...原创 2018-03-08 18:38:18 · 6810 阅读 · 1 评论 -
微信小程序bug总结
上传文件, 回应的json需要手动JSON.parsewx.hideLoading();看起来是个同步的api, 不过有时需要异步调用, 如:setTimeout(() =&gt; { wx.hideLoading();}, 500);五层页面栈限制当页面栈超过五层时, 会出现错误 { errMsg :&quot;navigateTo:fail webview count limit exceed&quot;原创 2017-10-24 12:38:57 · 14742 阅读 · 4 评论 -
$('input').focus()方法不生效
需求:在切换div显示之后, 其中的input要focus, 实现如下(有问题)$('div').show();$('input').focus();结果发现input不能focus.猜想是不是focus时机有问题?试验如下(成功):$('div').show();setTimeout(function() { $('input').focus();}, 10...原创 2018-05-12 12:46:44 · 12160 阅读 · 0 评论 -
iPhone6s Plus及以上版本keyup/input事件不响应中文输入
问题描述: 在<input>上绑定keyup/input事件, 监听输入变化然后执行业务代码。测试中发现: 几款安卓和iPhone6s都可以, 但是到了iPhone6s Plus(iOS版本没看)上对中文输入就不能实时响应, 需要多输入一个空格或者按“完成”按钮等。之前也有类似的设计, 看了下, 是因为我对<input>使用了绝对定位, 不使用绝对定位就好了。...原创 2018-04-29 08:39:52 · 1011 阅读 · 0 评论 -
js之MessageChannel示例
function random(min, max) { return min + Math.floor((max - min + 1) * Math.random());}var CalculatorChannel = new MessageChannel();var calculator = CalculatorChannel.port1;var numGenerator = ...原创 2018-07-01 20:14:35 · 2175 阅读 · 0 评论 -
洗牌算法
洗牌在英文中叫shuffle,实际应用中就是给定一个数组, 将其中的元素打乱。这个问题最开始学习js时遇到, 也有一个很好玩的办法:function shuffle(arr) { if (!Array.isArray(arr)) { return arr; } return arr.sort((a, b) => { return M...原创 2019-01-27 12:51:15 · 188 阅读 · 0 评论 -
js中的Date对象在IOS系统中无法正常工作
遇到这样的问题: var data = { "date": "2017-05-31 00:00:00" }, d = new Date(data.date), year = d.getFullYear();这个在Andorid上可以获取到正确的year, 但是在IOS系统中就不行了.后来发现可以使用这种形式: var data = { "date": "2翻译 2017-05-19 22:20:28 · 868 阅读 · 0 评论 -
使用jquery.fullpage.js需要动态改变导航小圆点的样式
在使用jquery.fullpage.js(2.6.7)时遇到这样的需求, 看下图: 需求是4个小圆点的样式都不一样, 看了下插件自己生成的导航的HTML结构, 发现是这样的: 很显然, 小圆点的样式主要是受<span>的影响, 但是根据当前的html结构又不能很好的区分<span>, 无奈, 情急之下改源代码:/*** Creates a vertical navigation bar.*/原创 2017-05-19 22:47:31 · 4792 阅读 · 0 评论 -
Angular2之入门示例
概述在学ng2, 手写一个例子感受下, 当然是经典的双向数据绑定.环境“@angular/core”: “^4.0.0” + Typescript 2.3.4代码展示文件组织src/app 目录下主要文件: ├── app.component.html ├── app.component.ts ├── app.module.ts ├── twoway-bind/ │ └── twowa原创 2017-06-13 22:49:58 · 4011 阅读 · 5 评论 -
js创建对象的几种方法总结
最常见的其实是使用对象字面量或者Object构造函数来创建单个对象, 但是在需要大量对象时, 重复代码会太多, 示例如下:var person = { name: 'GerryLon', say: function () { console.log(this.name); }};工厂模式function createPerson(name, age) { var o原创 2017-07-05 13:18:48 · 412 阅读 · 0 评论 -
使用video.js时,iframe内嵌视频无法全屏的问题
为iframe添加allowfullscreen属性即可, 如下所示<iframe src="video.html" frameborder="0" width="100%" height="100%" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullsc翻译 2017-04-02 10:38:46 · 21873 阅读 · 9 评论 -
window.name + iframe 实现跨域
window.name属性有这样的特点: 当前页设置的值, 在页面重新加载(非同域也可以)后, 值依然不变. 比如: window.name = 'abc';window.name; // abcwindow.location = 'http://www.baidu.com';window.name; // abc利用这个加上iframe就可以实现跨域数据传递. iframe会创建一个原创 2017-06-27 22:05:17 · 3750 阅读 · 0 评论 -
js之async, await实用技巧
本文不是科普文章,旨在给出一些关于js中async, await的实用片段,方便工作中提高效率。同步变异步看到这有人就奇怪了,好好的同步代码为啥要变异步? 其实我也不想,这有可能是为了后续的扩展。 比如如下场景:有个判断用户登录的方法isLogin, 我们可以在首次进入页面时将登录信息存储起来, 比如使用localStorage, 这样就可以用locastorage.getItem...原创 2018-08-27 21:21:18 · 7125 阅读 · 0 评论 -
兼容CommonJS规范, AMD规范和浏览器端的js写法
此亦即UMD写法, 也就是糅合了AMD, CommonJS, 以及兼容传统浏览器的写法.;(function(root, factory) { // commonJS 规范 if (typeof module === 'object' && module && module.exports) { module.exports = factory(/* re原创 2017-04-22 11:08:37 · 1424 阅读 · 0 评论 -
jquery插件之jquery.lock
异步处理(如ajax调用)时, 常常需要锁定一些区域, 避免重复操作. 常见的如切换<button>的disabled属性, 设置标志等.下面要介绍的是jquery.lock.js. 用法很简单(在线demo可在这里看):let $content = $('.content');let isLock = false;$(document).on('click', '#btn', functi原创 2017-12-24 15:04:45 · 513 阅读 · 0 评论 -
"can't supply flags when constructing one RegExp from another"
在Chrome47下遇到这个错误, 但是在版本54下是正常的.var re = /^\w{8}$/;var reObj = new RegExp(re, 'i');解决方法也很简单, 就是把i标志去掉就可以了,但是这样并不是我的想法,我就是想加上i标志.这是为什么呢? 后来在MDN上找到这句话: Starting with ECMAScript 6, new RegExp(/ab+c/, ‘原创 2016-11-25 23:25:03 · 2026 阅读 · 0 评论 -
jquery中serialize方法中文乱码问题
使用的jquery版本为2.2.4使用$('form').serialize()方法遇到中文字符乱码的问题,查看jquery源码发现:serialize: function() { return jQuery.param( this.serializeArray() );},再看param方法中有这么一句s[ s.length ] = encodeURIComponent( key ) +原创 2016-11-12 08:29:27 · 1164 阅读 · 0 评论 -
JS中日期方法setMonth的问题
在使用日期类的setMonth方法的时候, 遇到一个问题, 见如下代码:// 2016-01-31var d = new Date(2016, 0, 31); // set month to February// also d.setMonth(d.getMonth() + 1);d.setMonth(1); // 2016/3/2 上午12:00:00 conso原创 2016-10-06 09:12:48 · 6660 阅读 · 2 评论 -
Web Worker之HelloWorld
首先, WebWorker是什么? Web Worker. 因为之前有学过多线程, 个人感觉Worker给前端提供了类似多线程的接口, 最大的好处就是在进行大量数据处理的时候不会导致浏览器UI冻结. 为什么是类似呢? 因为虽然Worker也是JavaScript的范畴, 但是它却有一些比较严重的限制: Web Worker的限制条件.话不多说, 看代码.<!DOCTYPE html><html>原创 2016-08-03 22:49:17 · 397 阅读 · 0 评论 -
D3.js 之面包圈图
D3.js是一款非常强大的图表制作库, 下面是用其画面包圈图的实例html结构如下<html><head> <meta charset="utf-8"> <title>饼状图</title> <link rel="stylesheet" href="normalize.css"></head><style>#tooltip原创 2016-07-28 21:34:33 · 809 阅读 · 0 评论 -
关于js 函数劫持
看下面一段代码;(function(window, undefined) { var _console = null; if (window.console && window.console.log) { _console = window.console; window.console = { log: function(out原创 2016-04-10 07:58:37 · 843 阅读 · 0 评论 -
js之String.prototype.match() 方法
语法stringObject.match(searchvalue)stringObject.match(regexp)参数说明 参数 描述 searchvalue 必需。规定要检索的字符串值。 regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则会隐式地将它传递给 RegExp 构造函数,将其转换为 RegExp 对象。返回值原创 2016-03-19 14:13:52 · 993 阅读 · 0 评论 -
利用Ajax上传二进制文件
网页文件<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="author" content="万继龙"><meta name=原创 2016-03-13 10:33:16 · 5417 阅读 · 0 评论 -
escape, encodeURI, encodeURIComponent
escape, encodeURI, encodeURIComponent是JavaScript内置的三个编码函数, 与之对应的解码函数分别为unescape, decodeURI, decodeURIComponent. 它们有什么区别与联系呢? escape/unescape这一对函数是建议不要使用的, 大家可以去w3c或者MDN自己去看, 至于为什么, 不是很清楚. 对 ASCI原创 2017-01-02 12:21:38 · 706 阅读 · 0 评论 -
利用Blob, a.download, URL.createObjectURL模拟下载文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用Blob对象创建文件</title></head><body> <textarea name="" id="downloadFileTextarea" cols=原创 2017-03-07 11:23:50 · 12151 阅读 · 2 评论 -
Bootstrap模态框水平垂直居中
找了好久, 一直没找到使用纯css的方法, 下面是结合css和js的方法, 欢迎提出更好的方法.css如下: /* 覆写自带的样式 */.modal-dialog { position: absolute; top: 50%; left: 50%; z-index: 3; margin: auto; -webkit-transform: trans原创 2017-04-22 11:46:48 · 2992 阅读 · 0 评论 -
EvEmitter源码分析
在imagesloaded插件分析部分, 将EvEmitter单独分析.原创 2017-11-26 19:00:40 · 532 阅读 · 0 评论 -
imagesloaded源码分析
小白的第一篇源码分析, 选择的是imagesloaded插件(版本4.1.3), 这个被masonry使用, 作者居然是同一个人!git clone之后, 打开imagesloaded.pkgd.js源码结构EvEmitter(观察者模式实现)工具方法(extend, makeArray等)ImagesLoaded构造函数ImagesLoaded原型, 原型属性, 方法 LoadingIm原创 2017-11-26 18:58:21 · 1187 阅读 · 0 评论 -
JS检测移动端横竖屏
检测移动设备横竖屏, 并动态调整字体/** * 手持方向检测 */;(function(doc, win) { var recalc = function(e) { var docEl = doc.documentElement, clientWidth = docEl.clientWidth, clien...原创 2017-11-15 14:41:49 · 470 阅读 · 0 评论 -
js语言扩展之trim
trim, 作用是去除字符串左右两边的空白字符, 我们肯定不会陌生. 由于原生的String.prototype.trim支持并不广泛, 所以还是要自己实现.下面是收集的各种实现方法, 作为学习之用.1.先去除开头的, 再去除结尾的function trim(str) { return str.replace(/^\s\s*/, '').replace(/\s*\s$/, '');}2.和版原创 2017-10-05 19:26:28 · 679 阅读 · 0 评论 -
Electron之dialog
dialog, 这里译为对话框运行环境Electron version: v1.6.12Operating system: CentOS Linux release 7.3.1611 (Core)概要对话框可以打开, 保存文件, 弹出警告等. Electron中的对话框有两种, 一种运行在主进程上, 另一种运行在渲染进程上. 一个可以选择多个文件和目录的对话框:// main.jsc原创 2017-08-12 16:02:13 · 13429 阅读 · 1 评论 -
Electron入门笔记
electron号称是可以通过html, css, javascript构建跨平台的桌面应用, 自己试了下, 感觉还是不错的, 可以通过js写桌面应用, 再次让js扩大了应用领域.官方提供了一个种子工程electron-quick-start, 可以帮我们快速搭建环境.只需要简单几步, 一个操作系统原生窗口就出现了:git clone https://github.com/electron/el原创 2017-08-12 11:25:42 · 1332 阅读 · 0 评论 -
IE11的userAgent
查看IE11的userAgent, 已经没有了MSIE的影子, 而是类似这样的字串: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko, 这会导致之前检测ie版本的一些代码失效, 如下面的示例代码:var rIE = new RegExp("MSIE (\\d+\\.\\d+);");rIE.test(userAgent)原创 2017-08-01 20:54:03 · 8160 阅读 · 0 评论