• 正则表达式,金额只能输入数字,及其他常用正则

    发表于 2018-12-21 13:46:46   |   下载附件
    金额正则表达式正则表达式常用正则表达式
    // 金额只能输入数字
    inputCheck(amount){
        let pattern = /(^[0-9]{1,10}$)|(^d{1,10}.$)|(^d{1,10}.d+)$/;
        if(!pattern.test(amount)){
            amount = parseFloat(amount) > 0 ? parseFloat(amount) : null ;
        }
        return amount
    }
  • AudioContext 音频API

    发表于 2018-12-08 09:51:42   |   下载附件
    音频APIAudioContextHTML5 Web Audioaudio不能自动播放的解决方案关于AudioContex的坑mp3播放方案

    实例代码请进入详情页面,下面是其他网上介绍


    音频API => AudioContext

    https://www.jianshu.com/p/ee1ad766d8a7

    https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext
    AudioContext接口表示由音频模块连接而成的音频处理图,每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象,因为一切都发生在这个环境之中。

    利用HTML5 Web Audio API给网页JS交互增加声音
    https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/

    audio不能自动播放的解决方案
    https://blog.csdn.net/wo240/article/details/82748474

    IOS 关于AudioContex的坑
    https://blog.csdn.net/CCUKER/article/details/79819538
  • 图片资源预加载,并显示进度条

    发表于 2018-12-08 09:36:16   |   下载附件
    预下载图片预下载预加载预加载图片进度完成后进入
    var loader = new resLoader({
    	resources : [
    		'http://p2.qhimg.com/t01ed1438874f940dc0.jpg',
    		'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',
    	],
    	onStart : function(total){
    		console.log('start:'+total);
    	},
    	onProgress : function(current, total){
    		console.log(current+'/'+total);
    		var percent = current/total*100;
    		$('.progressbar').css('width', percent+'%');
    		$('.progresstext .current').text(current);
    		$('.progresstext .total').text(total);
    	},
    	onComplete : function(total){
    		alert('加载完毕:'+total+'个资源');
    	}
    });
    loader.start();
  • canvas 合并图片处理添加文字

    发表于 2018-11-13 10:08:31   |   下载附件
    canvas图片图片合并H5 canvas
    // 绘制图片
    drawImg() {
    
        // 创建图片基本属性
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let __width = 110 * 4;
        let __height = 145 * 4;
        canvas.width = __width;
        canvas.height = __height;
    
        // 图片背景色
        ctx.fillStyle = "#FFF";
        ctx.fillRect(0, 0, __width, __height);
    
        // 加载 第一张图片
        var imgCode = new Image();
        imgCode.src = document.getElementById('qrcodeImg').querySelector('img').src;
        imgCode.onload = function() {
    
            // 绘制 第一张图片
            ctx.drawImage(imgCode, __width * 0.25, __height * 0.4, __width * 0.5, __width * 0.5);
    
            // 加载 第二张图片 LOGO
            var imgLogo = new Image();
            imgLogo.src = imgLogo.src = document.getElementById('logoImg').src;
            imgLogo.onload = function() {
    
                // 绘制 第二张图片 LOGO
                ctx.drawImage(imgLogo, __width * 0.15, __width * 0.1, __width * 0.7, __width * 0.35);
    
                // 文本绘制
                ctx.font = 5 * 4 + "px Arial";
                ctx.fillStyle = '#333'; // 文字颜色
                ctx.textAlign = 'center'; // 文本水平对齐方式
                // ctx.textBaseline='middle';                                                // 文本垂直方向,基线位置
                ctx.fillText(lang.shareUrlImgText, __width * 0.5, __height * 0.9); // 创建文字,控制文件的起始位置
    
                // let imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
                // ctx.putImageData(imgdata, 0, 0);
                // 得到图片src数据
                let baseImgData = canvas.toDataURL();
                // 图片src赋值
                document.getElementById('sharePhoto').src = baseImgData;
    
            }
    
        }
    }
  • 原生dom选择器

    发表于 2018-11-02 10:02:07   |   下载附件
    dom选择器选择器dom操作
    var obj = document.querySelector(cssselecter);
    var obj = document.querySelectorAll(cssselecter);

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象,querySelectorAll返回的一个集合(objNodeList )。用过jquery或者是zepto的应该都熟悉css选择器,就不多说了,不会的可以看看这篇:CSS选择器
    目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。


  • 移动端弹层居中定位CSS样式

    发表于 2018-10-28 20:56:20   |   下载附件
    居中定位css 居中居中弹窗移动端居中弹窗
    /* 外容器 */
    .mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 4999;
        background: rgba(0, 0, 0, 0.5);
        /* 内容区 */
        .cont {
            position: fixed;
            z-index: 5000;
            width: 80%;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #FFFFFF;
            text-align: center;
            border-radius: 5px;
        }
    }
  • vue项目中使用lib-flexible解决移动端适配的问题

    发表于 2018-10-18 14:02:32   |   下载附件
    vue 浏览器适配lib-flexible解决移动端适配移动端适配APP页面适配
    1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem
    2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了
  • vue webpack打包后.css文件里面的背景图片路径错误解决方法

    发表于 2018-10-15 16:45:48   |   下载附件
    vue打包vue打包关于css中的背景图片webpack vue 打包css 背景图片地址错误

    1、使用绝对路径,打包后成了 url(/static/img/logo-index.2f00bf2.png) no-repeat

    2、使用相对路径,打包后成了 url(static/img/logo-index.2f00bf2.png) no-repeat

    但是CSS资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,解决办法,打开webpack.prod.conf.js,参考详情说明步骤,添加字段 publicPath:'../../',

  • JavaScript - window 尺寸 ( 获取屏幕宽高 )

    发表于 2018-10-13 15:49:02   |   下载附件
    window宽高浏览器宽度浏览器高度
    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  • 官能强度检测

    发表于 2018-10-12 13:46:34   |   下载附件
    密码强度检测password
    项目中需要一个密码强度的校验,找了好久,搜到这个挺好用的,记录一下。在一些网站注册的时候经常可以看到密码强度提示,例如优酷:
    //密码强度校验
    function checkPassword3(fieldId,tipMsg){
    	/*
    	 返回密码的强度级别
    	 */
        function checkStrong(sPW) {
            if (sPW.length < 8||sPW.length > 20)
                return 0; //密码太短或太长
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //测试每一个字符的类别并统计一共有多少种模式.
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }
    	/*
    	 判断字符类型
    	 */
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写字母
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8; //特殊字符
        }
    	/*
    	 统计字符类型
    	 */
        function bitTotal(num) {
     
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        /**
    	 * 密码强度等级说明,字符包括:小写字母、大写字母、数字、特殊字符
    	 * 1---密码包含其中之一
    	 * 2---密码包含其中之二
    	 * 3---密码包含其中之三
    	 * 4---密码包含其中之四
         */
        var fieldValue=getValue(fieldId);
        if(fieldValue!=""&&checkStrong(fieldValue) < 2){
        	tipMsg='登录密码由8-20位数字+字母组成,字母区分大小写';
            errShow(fieldId,tipMsg);
            return false;
        }
        return true;
    }
每页显示10条,当前为第5页,总页数为19页