• 多入口HTML网站的webpack配置

    发表于 2019-03-15 22:31:47   |   下载附件
    webpack多入口页面打包webpack配lesswebpack + php

    本脚手架适合官网等较简单的多html网站开发,支持共用导航栏、底部通栏或侧边栏等;通过读取html文件所在目录内容,自动更改配置,即增加页面无需更改webpack配置;支持ES6开发js;支持将less编写样式 微信:15600059668


    主要功能:

    能够打包成多个html文件和js文件,即支持多入口

    文件名称都会带上hash值,解决缓存问题

    能够复用网站的头部导航栏和底部通栏

    通过采用less进行样式的编写

    能够支持ES6开发

    增加页面不需要手动去更改webpack的入口设置,能够根据目录下的文件自动配置

    能够实时看到开发的效果

    build能够对代码进行压缩



    相关介绍文章

    http://shanhuxueyuan.com/news/detail/83.html


    下载使用


    # 下载之后先安装依赖 npm install 
    # 开发时输入如下命令 npm run start 
    # 构建线上dist文件,采取如下命令 npm run build





  • 阿里字体库

    发表于 2019-01-16 11:51:09   |   下载附件
    iconfont字体库阿里字体库
  • 手机号码归属地查询接口(精确到地市)

    发表于 2018-12-24 09:41:10   |   下载附件
    手机号归属手机号查询手机地址
    1、淘宝网((精确到省份)
    API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号码

    2、百度(精确到地市)
    API地址:http://mobsec-dianhua.baidu.com/dianhua_api/open/location?tel=手机号码
  • 正则表达式,金额只能输入数字,及其他常用正则

    发表于 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*/就可以了
每页显示10条,当前为第4页,总页数为19页