• 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
    .tips {
    	position: absolute;
    	left: -145px;
    	top: 20px;
    	z-index: 9999;
    	// display: none;
    	.tips-box {
    		.clearfix();
    		position: relative;
    		.tips-arrow {
    			position: absolute;
    		    display: block;
    		    left: 145px;
    		    top: 0;
    		    width: 0;
    		    height: 0;
    		    background: #fff;
    		    border: 5px solid #fff;
    		    -webkit-transform: rotate(45deg);
    		    transform: rotate(45deg);  
    			box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
    		}
    		.tips-content {
    			position: absolute;
    			left: 0;
    			top: 5px;
    			width: 260px;
    			padding: 0px 15px;
    			background: #fff;
    			border-radius: 3px;
    			box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
    			p {
    				margin: 15px auto;
    				color: #666;
    				._f(n,12px,20px);
    				em {
    					color: #333;
    					font-weight: bold;
    				}
    			}
    			.tips-arrow {
    				box-shadow: none;
    				top: -5px;
    			}
    		}		
    	}
    }
  • 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图片裁剪图片裁剪上传图片本地上传裁剪上传裁剪

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

  • jquery checkall 插件

    发表于 2020-06-18 19:28:31   |   下载附件
    checkAllJquery 全选与不全选全选插件全选反选
    <form>
      <table>
        <thead>
          <tr>
            <th><label><input type="checkbox" data-toggle="checkall"></label></th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
            <tr>
              <td><input type="checkbox" name="" value=""></td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            ....
          </tbody>
      </table>
    </form>

  • 读取本地文件流

    发表于 2020-06-10 16:47:34   |   下载附件
    读取文件流上传上传本地图片本地图片预览本地图片上传预览
    // 读取图片函数
    var readImgFileUrl = function (me, option) {
        var defaultOption = {
            // 开始读取图片
            loadStart: function (e) {
            },
            // 读取完成
            complete: function (r) {
            },
            // 读取出错
            error: function (e) {
            }
        }
        var opts = $.extend(defaultOption, option);
        // 读取图片数据 并传入回调
        var imgObject;
        if (!me.files.length) {
            return;
        } else {
            if (me.files[0].type == 'image/jpeg' || me.files[0].type == 'image/jpg' || me.files[0].type == 'image/png') {
                imgObject = me.files[0];
            } else {
                alert("此图片格式不正确!");
                return;
            }
        }
        // 图片的正准方向
        // var orientation;
    
        // EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
        // EXIF.getData(imgObject,function(){
        //     orientation = EXIF.getTag(this,'Orientation');
        // });
    
        // HTML5 用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
        var fileReader = new FileReader();
        // 开始读取
        fileReader.onprogress = function (e) {
            // 开始读取
            console.log((e.loaded / e.total * 100).toFixed() + "%");
        };
        // 读取完成
        fileReader.onload = function (e) {
            //这里可以使用校正后的图片data了
            opts.complete(data);
        };
        // 读取出错
        fileReader.onerror = function (e) {
            // alert("图片加载失败");
            opts.error(this, e);
        };
        // 读取文件内容
        fileReader.readAsDataURL(imgObject);
        // 开始加载的回调函数
        opts.loadStart.call(fileReader, imgObject);
    }
  • 利用JS本地生成图片,并保存多个图片至本地

    发表于 2020-06-10 09:29:05   |   下载附件
    html2canvascanvas2imagejszipFileSaver浏览器生成图片方案浏览器保存文件方案

    HTML2canvas 生成图片:(下面使用方式源码)

    http://html2canvas.hertzen.com/

    https://github.com/niklasvh/html2canvas

    JSzip 依赖 下载图片文件包:(下载压缩包源码)

    https://stuk.github.io/jszip/

    https://stuk.github.io/jszip/documentation/examples/download-zip-file.html

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