个人分类:随笔(9)

JS图片压缩(pc端和移动端都适用)

最近在做移动端遇到了一个问题就是:手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊别慌,好事儿来了,务必就会有人去研究研究图片的压缩:鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考:javascript代码效果预览/***图片压缩,默认同比例压缩*@param{Object}path*pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径*@param{Object}obj*obj对象有width,height,quality(0-1)*@param{Object}callback*回调函数有一个参数,base64的字符串数据*/functiondealImage(path,obj,callback){vari

开发中常用的正则表达式

下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多。特发出来,让各位朋友共同使用。匹配中文字符的正则表达式:[u4e00-u9fa5]评注:匹配中文还真是个头疼的事,有了这个表达式就好办了匹配双字节字符(包括汉字在内):[^x00-xff]评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)匹配空白行的正则表达式:ns*r评注:可以用来删除空白行匹配HTML标记的正则表达式:<(S*?)[^>]*>.*?|<.*?/>评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力匹配首尾空白字符的正则表达式:^s*|s*$评注:可以用来删除行首行尾的空白字符(包括空

在限制范围内拖拽div+吸附+事件捕获

直接上代码:html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>限制范围内拖拽</title><style>*{margin:0;padding:0;}#div1{width:500px;height:500px;background:#CCC;position:relative;}#div2{width:100px;height:100px;background:green;position:absolute;left:0;top:0;}</style><script>window.onload=function(){varoDiv1=document.getElementById('div1');varoDiv2=document.getElementById('div2');vardisX,disY;/*--------------开始拖拽div2-----------------*/oDiv2.onmousedown=function(evt)//oDiv2.onmousedown表示按下这个对

检测监控浏览器(窗口)关闭、跳转、刷新:onbeforeunload与onunload事件

浏览器窗口关闭可以使用window.close(),但并没有与之相对应的事件,页面加载也是使用onload事件监听。onunload和unbeforeunload事件都是在页面刷新或关闭的时候执行。可以在<script>脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。这两个事件的区别1、onbeforeunload也是在页面刷新或关闭时调用,onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;2、onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。3、onunload是无法阻止页面的更新和关闭的,而onbeforeunload可以做到。页面加载时只执行onload页面关闭

css3 content 特殊字符和图标

项目中用到的一些特殊字符和图标又不想用图片所以可以用到css3contenthtml代码效果预览<inputtype="checkbox"name="good"id="checkbox1"class="goodnone"><labelfor="checkbox1"></label><style>.none{display:none}.good{width:20px;height:20px;}.good+label{-webkit-appearance:none;background-color:transparent;border:1pxsolid#696d71;box-shadow:01px2pxrgba(0,0,0,0.05),inset0px-15px10px-12pxrgba(0,0,0,0.05);padding:6px;display:inline-block;position:relative;}.good:checked+label:after{content:'\2713';

js正则中0的问题

js中数字类型12是等于12.00所以在正则判断1-99的后两位小数的数字即1.00-99.99范围/^[1-9][0-9]{0,1}([.][0-9]{0,2})?$/.test(12.000)是为true但可以把数字转化成字符串/^[1-9][0-9]{0,1}([.][0-9]{0,2})?$/.test(“12.000”)是为false

区分中英文统计字符

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>js区分中英文统计字符个数</title><metaname="description"content=""><metaname="keywords"content=""><linkhref=""rel="stylesheet"></head><body><inputtype="text"value=""id="str"><spanid="showcontent"></span><!--此处原来使用的label标签,但是设置其innerHTML的值在ie8上报错,故换为span标签--><scripttype="text/javascript">varcountnums=(function(){vartrim=function(strings){return(s

gulp js/css版本号控制

gulp js/css版本号控制

由于网页每次更新会有一个缓存,但每次手动清理缓存不显示。所以自动化实现静态资源的版本更新才是正道。搜了不少资料,发现都不是想要的,我希望实现的效果是:<scripttype="text/javascript"src="/common.js?v=213132"></script>但是大部分插件实现的效果类似下面,而且看起来很麻烦<scripttype="text/javascript"src="/common-51921f3.js"></script>这样会导致一个问题,每次都会生成新的文件,而且必须同时修改html的引用。下面说说我的解决方案:用到的gulp插件是:gulp-asset-rev先下载插件:npminstall--save-devgulp-asset-revExample:javascript代码效果预览vargulp=require('gulp');varassetRev=require('gul

关于搜狗浏览自动保存密码,很难删除,修改不了。

问:在有登录页面中,会遇到一个很奇怪的问题,搜狗浏览自动保存密码,再次登录想修改帐号密码时,很难删除!!答:具体原因没有找到,但解决方式就是,给有帐号密码的input放在form就可以解决。