javaScript
风轻云淡180518
代码千万行,注释第一行;编程不规范,同事两行泪
展开
-
javaScript判断设备类型
话不多说,直接粘代码。function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } }转载 2017-09-18 14:10:31 · 647 阅读 · 0 评论 -
input type=number只能录入11位数字
当需要用户输入手机号码的时候,把input的type属性设置为number,在移动端就能调起数字键盘了,但是maxlength属性对于type=number是无效的,而且还可以输入除了数字之外的其他字符,比如+.e,加上下面两个事件<input onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'o...原创 2018-12-27 10:09:59 · 4921 阅读 · 2 评论 -
【手把手】带你撸一个安卓壳子
web前端的小伙伴们大家好,说起APP混合开发,大家首先想到的可能就是类似Cordova的库,可以让我们不写一行安卓代码,就轻松地实现原生APP的一些常用功能,但是对于一些特别的"需求"我们就无能为力了。所以为了提高我们的知识储备,我觉得还是有必要学习一波安卓的知识的。下面就由我带着大家手把手撸一个安卓的壳子出来,由于本人也是第一次写安卓的东西,难免会有些不对的地方,希望各路大神见怪莫怪。1、...原创 2018-12-11 23:43:10 · 2992 阅读 · 4 评论 -
URL编码问题
我们要查询一个年龄为20,姓名包含 tom 的人,那么我们会这样去组织请求var url="http://xxx/?age=20&name=tom"然后服务端就能收到下面的接口请求参数{ "age":"20", "name":"tom"}如果我要搜索的姓名是 tom&lucy ,那么url就变成了var url="http:原创 2018-09-16 16:25:43 · 612 阅读 · 0 评论 -
canvas合并两张图片并保存在本地
HTML5最重要的一块内容就是canvas画布,可以用js实现很多图片处理的功能。<canvas id="canvas"></canvas><img src="img/codebg.png" id="bg">var w = document.documentElement.clientWidth || document.body.clientWid..原创 2018-06-12 10:13:32 · 2770 阅读 · 1 评论 -
前端处理跨域的一些方法
首先声明,跨域问题只在浏览器上出现,因为浏览器为了安全性考虑有同源策略的限制,同源策略规定,协议类型、域名、端口3者要一致才能被视为同源,跨域问题一般出现在前后端分离的项目中,一般有以下4种解决方法:1. CORS跨域:后端接口在返回的时候,在header中加入 'Access-Control-Allow-origin':* 或者请求白名单(推荐)2. 用nodejs搭建本地http服...原创 2017-08-21 15:53:56 · 288 阅读 · 0 评论 -
新版chrome的桌面提示框
demo<button id="btn">显示通知</button><script type="text/javascript"> // 获得权限 Notification.requestPermission(); // 点击按钮 document.getElementById("btn").onclick=function(){ ..原创 2017-08-02 13:05:46 · 2556 阅读 · 0 评论 -
前端图片处理
这篇文章有几个功能,第一个是支持拖拽,第二个是压缩,第三个是裁剪编辑,第四个是上传和上传进度显示。1、拖拽上传拖拽读取图片的功能主要是监听HTML5的 drag 事件,这个没什么好说的,查查API就知道怎么做的,主要在于怎么读取用户拖过来的图片并他把转成base64以在本地显示出来,代码如下:2、压缩图片压缩图片可以借助canvas,canvas可以很方便的实现压缩,其原理是把一张...原创 2019-03-06 17:01:53 · 8414 阅读 · 1 评论 -
js 百度坐标和火星坐标的转换
来源网络/* eslint-disable */// 各大坐标系转换插件,QQ:1572309495// 定义一些常量var x_PI = 3.14159265358979324 * 3000.0 / 180.0var PI = 3.1415926535897932384626var a = 6378245.0var ee = 0.00669342162296594323/*...原创 2019-04-08 08:59:58 · 2782 阅读 · 1 评论 -
前端面试题集锦
最近要开始找工作了,多一份准备多一份信心,光看的话很快就会忘记,所以我就把从网上摘抄来的文章有重新手打一遍,以加强记忆。1、谈谈你对MVVM开发模式的理解MVVM分为Model,View,ViewModel三者,Model代表数据模型,数据和业务逻辑都在Model层重定义。View代表视图,负责数据的展示。ViewModel负责监听Model中数据的改变并且控制视图的更新,处理...原创 2019-06-17 14:55:20 · 268 阅读 · 0 评论 -
Eslint的一些规则说明
1、使用Eslint的时候如果出现未闭合标签会报红,如下:对于有强迫症的我来说不能无视,怎么搞定?首先找到.eslintrc.js文件在 rules添加以下规则"vue/html-self-closing": ["error",{ "html": { "void": "never", "normal": "any", "component": ...原创 2019-07-26 08:50:21 · 1083 阅读 · 0 评论 -
localStorage 设置过期时间
localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,比如我们将用户身份认证 token 保存在客户端,1周之内有效,超过一周则要重新登录,那么这种需求该怎么实现呢要知道,localStorage本身并没有提供过期机制,既然如此,那就只能我们自己来实现了,我们可以直接给其原型上加上这样一个方法Storage.p...原创 2018-11-02 16:55:08 · 16096 阅读 · 6 评论 -
javascript 身份证号码验证函数(可辨真伪,支持15或18位身份证号)测试误差为0
话不多说,直接上代码,我不生产代码,我只是代码的搬运工。//验证身份证号方法var test = function (idcard) { var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!"); var area = {11: "北京.原创 2018-11-01 23:23:52 · 468 阅读 · 0 评论 -
ES6箭头函数
如今ES6的箭头函数已经被用的比较普遍了,因为我们喜欢他的简洁,let sayHello = name =>{ `hello,${name}`}不过使用之前,我们应该注意一下和普通函数的区别避免犯一些无意识的错误。arguments普通函数可以通过arguments 拿到所有的参数let sayHi = function(){ console.log...原创 2018-11-01 10:17:50 · 238 阅读 · 0 评论 -
js将文本复制到粘贴板
因为项目需要,用到了这个,就在这里记录一下。关于粘贴板的更多操作,等以后用到了,再继续添加。。。<body><div id='str'>helloworld</div><button onclick='copy()'>点击复制上面的文字</button></body><script> functi原创 2018-05-25 00:47:03 · 936 阅读 · 0 评论 -
前端生成二维码
在这里介绍一个生成二维码的js库,使用方法非常简单。原创 2018-05-25 13:46:46 · 2058 阅读 · 0 评论 -
js格式化时间的类
有时候我们获得的往往是一个时间戳,如果要显示出来,就要把它进行翻译,于是我找了一个比较靠谱的js时间处理类,代码如下:/**************************************时间格式化处理************************************/function dateFtt(fmt,date){ var o = { "M+" : dat...原创 2018-06-02 17:11:30 · 209 阅读 · 0 评论 -
用js实现一个数据双向绑定
该接触angular,就很好奇他是如何实现的,最近有些时间,就查阅了相关的东西,其实很简单,并没有想象中的那么高大上。从原理触发在JavaScript中给一个对象添加属性可以像下面这样obj.age=20;obj.say=function(){}还可以通过Object.defineProperty来定义新属性或者修改原有的属性,其余发如下Object.defineProp...原创 2018-09-16 18:57:02 · 1613 阅读 · 0 评论 -
前端常用代码段
以下是本人在实际项目开发中常用到的一些代码段1、获取设备类型var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //I...原创 2018-09-07 16:51:28 · 953 阅读 · 1 评论 -
requestAnimationFrame动画
现在一说起动画大家可能第一个想到的就是CSS3的animation,简单的也可以用transition,当然不要忘记除了CSS,JS也是可以实现动画效果的原则上能用CSS的地方就尽量不要用JS,但前提是两者都能实现,那么有没有什么场景是CSS的animation实现不了的呢?当然有某些属性的改变动画animation是不能实现的,比如scrollTop。animation支持的缓动效果有...原创 2018-09-25 21:15:57 · 833 阅读 · 0 评论 -
JS条件语句优化
JS条件语句优化妙招JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,下面我们就看看几个可以优化的地方(我们优化的目标是嵌套层级更少,代码更简洁和易读)是否包含我们经常会判断某个变量等于某些值,于是会写出这样的代码function sayHi(name){ if(name=='tom'||name=='hxh'||name...原创 2018-10-05 17:20:23 · 1030 阅读 · 0 评论 -
js一行代码获取精确数据类型
typeof 是用来获取一个JavaScript数据类型的操作符,但是有经验的开发者都知道typeof在某些情况下是无法返回数据精确类型的,比如document.write(typeof []);返回的并不是 array ,而是object,所以是无法通过typeof分辨 [] 和 {} 的类型的,那么有解决方案吗?先上代码var toType=function (obj){ ...原创 2018-10-10 00:19:23 · 443 阅读 · 0 评论 -
html2canvas实现网页保存为图片
今天我们来学习一波怎么将一个网页生成一张图片的,主要的应用场景在,分享,截图等我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。大家可以去这里https://download.csdn.net/download/qq_20343517/10739325下载这个库然后直接通过script标签引入或者通过其他方式导入也可以。基于html2canvas.js ...原创 2018-10-28 22:19:29 · 3705 阅读 · 0 评论 -
使用promise实现异步
作为一个新的ES6异步编程的解决方案,Promise想必大家都听说过,包括async await 也是基于Promise的,今天我们通过一个小例子来全局了解一下Promise在此之前,需要明白的是,Promise实际上就是一个包含异步操作的容器,有三种状态。pending 进行中fulfilled 已成功rejected 已失败let p=new Promise((res...原创 2018-10-23 11:23:01 · 453 阅读 · 0 评论 -
只知DOM不知BOM?
JavaScript由ECMAScript、DOM、BOM三部分组成,DOM大家肯定是非常熟悉了,全称Document Object Model 文档对象模型,是用来描述文档结构的,并提供了JavaScript访问接口用来操作文档今天我们要将的BOM全称 Browser Object Model 浏览器对象模型,主要用来获取或设置浏览器的属性和行为,比如页面跳转,获取屏幕大小,弹出对话框,例如...原创 2018-10-28 22:43:59 · 192 阅读 · 0 评论 -
stylus通过node监听文件变化实现自动编译
近日在学习 stylus ,由于没有使用webpack,需要手动编译,在网上找了,通过 -w 和node中间件实现自动化,奈何手动操作一番,都未果,遂自己用node实现了一个,如下const fs = require('fs')const filePath = './'var exec = require('child_process').exec;function execute(...原创 2019-09-11 14:13:33 · 455 阅读 · 0 评论