• 兼容后台数据字段变化前端做对应处理 更换JS对象索引KEY值 添加映射字段

    发表于 2020-11-20 11:27:19   |   下载附件
    前端数据兼容处理更换JS对象索引KEY值添加映射字段后台数据字段变换兼容后台数据字段变化
    // 数据类型深度检查
    var typefor = function(obj, type) {
        var oType = {
            '[object Boolean]': 'Boolean',
            '[object Number]': 'Number',
            '[object String]': 'String',
            '[object Function]': 'Function',
            '[object Array]': 'Array',
            '[object Date]': 'Date',
            '[object RegExp]': 'RegExp',
            '[object Object]': 'Object'
        },
        ret = obj == null ? String(obj) : oType[Object.prototype.toString.call(obj)] || 'Unknown';
        return type ? type.test(ret) : ret;
    };
    
    // 数据兼容处理 更换JS对象索引KEY值 添加映射字段
    function preDataProcessor(res){
        // 添加映射字段 预处理后台数据兼容前端运行代码
        // 映射对象
        var transformObjConfig = {
            "Live_control": {
                "c": "resultcode",              // 原来的字段 resultcode,新字段 c
                "m": "msg",                     // 原来的字段 msg,新字段 m
                "d": {
                    "s": "status",              // 可以观看直播状态
                    "t": "status_text",         // 直播状态文字 直播中
                    "c": "t_class",             // 前端状态文案的样式,值:t-playing  t_wait 
                    "d": "curr_date",           // 是否是当天,1是,0不是,只有当天将要开播的直播间才显示倒计时
                    "m": "dec_time",            // 当前时间距直播开始时间的差,单位秒
                    "p": "play_url",            // 直播视频播放链接
                    "f": "flv_url",             // 直播视频播放链接(flv协议)
                    "a": "audio_url",           // 直播音频播放链接
                    "af": "audio_url_flv",      // audio_url_flv直播音频播放链接
                    "w": "switch",              // 是否可以切换硬盘,1是,0反之。
                    "o": "options"              // 点播回放防盗链参数以及点播ID,可回放时返回字段
                },
                "a":"Live_control"              // action操作类型
            }
        }, transformObj = null;
        // 映射赋值
        function resetKey(data,config){
            console.info('resetKey--->',data,config)
            for(var k in config){
                if(k != 'ownerProperty' && data.hasOwnProperty(k) && config.hasOwnProperty(k) ){
                    if(!typefor(config[k], /Object/)){
                        data[config[k]] = data[k];
                    }else{
                        data[config[k]['ownerProperty']] = resetKey(data[k],config[k]);
                    }
                }
                
            }
            return data;
        }
        // 找配置对象
        for(var k in transformObjConfig){
            if(res.hasOwnProperty('a') && res['a'] === k ){
                // 处理对应数据
                transformObj = transformObjConfig[k];
                for(var i in transformObj){
                    if(res.hasOwnProperty(i) && transformObj.hasOwnProperty(i) ){
                        if(typefor(transformObj[i], /Object/)){
                            res[transformObj[i]['ownerProperty']] = resetKey(res[i],transformObj[i]);
                        }else{
                            res[transformObj[i]] = res[i];
                        }   
                    }
                }
            }
        }
        return res;
    },
    
    // 测试
    var abc = preDataProcessor({
    	a: 'Live_login',
    	c: 0,
    	m: '测试',
    	d: {
    		i: 22,
    		j:[111,222,555],
    		s: {
    			a : 555
    		}
    	}
    })
    console.info(abc)
  • 礼物条选择弹窗动画样式,及左右快速滑动选择特效

    发表于 2020-11-18 15:01:54   |   下载附件
    动画效果transition过渡动画当元素拥有CSS动画效果时用JS改变其CSS属性left时响应非常缓慢

  • 兼容IE的容器绝对居中方案

    发表于 2020-10-28 11:01:11   |   下载附件
    绝对居中容器居中水平垂直居中内容垂直居中

    CSS:

    .container {
        display: table; /*主要代码*/
        *position: relative;  /*for ie67*/
        background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
    }
    .content {
        vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
        *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
    }
    .center {
        display: inline-block; /*主要代码*/
        *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
        padding: 10px; border: 1px solid #fff;
    }


    HTML:

    <div class="container">
        <div class="content">
            <div class="center">
                啦啦啦,啦啦啦,我是卖报的小行家....<br>dsdADSsdSD
            </div>
        </div>
    </div>

  • Echarts 图表实例代码

    发表于 2020-10-20 17:15:50   |   下载附件
    Echarts数据图表控制折线图表趋势曲线图

    Echart 具体参考:

    https://echarts.apache.org/examples/zh/editor.html?c=line-stack

    https://echarts.apache.org/zh/download.html

  • 弹窗样式

    发表于 2020-10-19 17:33:30   |   下载附件
    弹窗样式tipscss弹窗样式弹窗尖角样式带阴影arrow
  • PC网页接入微信第三方登录

    发表于 2020-10-15 10:20:05   |   下载附件
    微信登录第三方登录PC上微信登录
  • 当前url替换或追加参数值

    发表于 2020-09-03 20:06:33   |   下载附件
    url替换url参数地址栏参数追加地址栏参数替换
    // 替换或追加参数
    // orgUrl 地址
    // paramName 参数名
    // replaceWith 参数值
    var replaceParamVal = function(orgUrl,paramName,replaceWith){
        var reg = new RegExp('('+ paramName +'=)([^&]*)','gi'),
            has = orgUrl.indexOf(paramName);
            if(has<=0){ 
                // 不存在改参数
                var hasQuestion = orgUrl.indexOf("?");
                if(hasQuestion>0){
                  orgUrl = orgUrl+"&" +(paramName +'=' +replaceWith);
                }else{
                  orgUrl = orgUrl+"?" +(paramName +'=' +replaceWith);
                }
            }else{
                // 存在该参数
                orgUrl = orgUrl.replace(reg,paramName+'='+replaceWith);
            }   
        return orgUrl; 
    };
  • 图片裁剪插件(github上最多用户使用完美版)

    发表于 2020-07-23 17:05:29   |   下载附件
    Cropper.js图片裁剪图片上传独立裁剪插件
  • 通过formData上传图片及文件流

    发表于 2020-07-17 13:46:20   |   下载附件
    formData图片上传上传文件上传formData方式上传
    // 图片上传
    $("#imghand").on('change',function(e) {
    	var me = $(this).parent();
        var handId = $(this).attr("id");
        var files = e.target.files;
        files && upLoadMethod(files,handId,me)
    })
    
    function upLoadMethod(file, domId, box) {
    	if(!file[0]){
    		return false;
    	}
        var formData = new FormData();
        formData.append('file', file[0]);
        t.http({
        	cache: false, //上传文件不需要缓存
            type: "POST",
            url: "",
            data: formData,
            dataType:"json",
            timeout:1000*5,
            contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
            processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
            success: function (ret) {
            	// 略……
            },
            error: function (err) {
    
            }
        });
    }
  • jquery 图片上传裁剪插件

    发表于 2020-07-17 11:50:06   |   下载附件
    图片裁剪Jquery图片裁剪图片裁剪上传图片本地上传裁剪上传裁剪

    使用案例代码,请在上方下载

每页显示10条,当前为第1页,总页数为19页