闵超的主页

psms项目和ehr项目总结

2017-12-10
闵超
bug

最近两个项目串着改,心很累,项目中也遇到了很多麻烦的问题:这里写几个总结

时间选择器15分钟一选

找了半天没找到,只能改起来源码:

//...
}) : n[x] = i, w.each([24, 60, 1], function(e, t) {
			if(e == 1){
				var a = w.elem("li"),
				i = ["<p>" + r.time[e] + "</p><ol>"];
				w.each(new Array(t), function(t) {
					if(t%15 == 0){
						i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"' : "") + ">" + w.digit(t, 2) + "</li>")
					}
						}), a.innerHTML = i.join("") + "</ol>", d.appendChild(a)
				
			}else{
				var a = w.elem("li"),
					i = ["<p>" + r.time[e] + "</p><ol>"];
				w.each(new Array(t), function(t) {
				i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"' : "") + ">" + w.digit(t, 2) + "</li>")
				}), a.innerHTML = i.join("") + "</ol>", d.appendChild(a)
			}

		}), E()
	}
//...

laydate-v5.0.9 日期与时间组件 MIT License 位置是 580行

并且,layDate是脱离jQuery的,纯js插件,并且,它兼容ie8及以上

fullcalendar插件

psms项目要求周日历插件,找了几个都不满足,最关键的是要求兼容ie8,然后在ie8上,样式和其他都满足,唯独事件出不来,这个bug定位了很久,最终都没有定位到,后来在ie8上被同事大牛打断点找到了,因为start和end时间在回调触发之的FullCalendar.js中,没有找到时间格式,由此可知,是时间格式不对。

  //...
  events: function(start, end, callback) {
	        $.ajax({
	            url: 'js/ceshi.json',
	            dataType: 'json',
	            data: {
	                start: start,
	                end: end
	            },
	            success: function(data) {

	                var events = [];
	           
		                data.events.forEach(function(e){
		                	
 							events.push({
		                        title: e.title,
		                        start: new Date(e.start.replace("-","/").replace("-","/")), // will be parsed
			                    end: new Date(e.end.replace("-","/").replace("-","/")), // will be parsed,
			                    allDay:e.allDay
		                    });
		                })
	            	
	                callback(events);
	            }
	        });
	    },
	//... 在传值之前把时间的string改成/表示,目测是由于ie8上new Date("yyyy-mm-dd")是NaN

js扩展 forEach()方法

ie8上报对象属性不支持,也就是说Array的prototype上没有forEach方法,故此,要在Array上扩展forEach()方法

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function forEach( callback, thisArg ) {
    var T, k;
    if ( this == null ) {
      throw new TypeError( "this is null or not defined" );
    }
    var O = Object(this);
    var len = O.length >>> 0; 
    if ( typeof callback !== "function" ) {
      throw new TypeError( callback + " is not a function" );
    }
    if ( arguments.length > 1 ) {
      T = thisArg;
    }
    k = 0;
    while( k < len ) {
      var kValue;
      if ( k in O ) {
        kValue = O[ k ];
        callback.call( T, kValue, k, O );
      }
      k++;
    }
  };
}

顺带一提,我为了兼容ie8,还加了js的ie判断

function isIE(){
	if (window.navigator.userAgent.indexOf("MSIE")>=1) 
		return true; 
	else
		return false; 
}

补充:fullcalendar的官方文档以便查询

https://fullcalendar.io/docs/

webuploader的flash兼容ie9

由于项目中上传按钮用的是

//添加上传按钮
uploader.addButton({
    id: '#idpic,#phone,#reg,#bocCard,#photo',
    innerHTML: '+'
});

然而,addButton在ie9上,使用的是flash按钮,通过右键查看元素可以看出,是object标签,这就是flash的东西,因此,

  <label for="idpicwrap" upmore="Y" forTxt="idAtt" uptype="photo" upcount="2"  onclick="return selectFile(this);" ><span class="star">*</span>身份证照片(需正反两张照片)
  		<span id="idpic"  ></span>
  </label>
 <div id="idpicwrap"></div>

由于是flash,导致onclick绑定的selectFile方法并没有进

var fileSelect;
 //定义点击事件
function selectFile(el) {
   	if (uploader.isInProgress()) {
   		layer.msg("附件正在上传!"); 
	    	return false;
       }
   	 var upcount = $(el).attr("upcount");//上传数量
   	 var forTxt = $(el).attr("forTxt");
   	 var picAttTxt = $("#" + forTxt).val();
   	 if(picAttTxt!='' && JSON.parse(picAttTxt).length >= upcount ){
   		 layer.msg("该附件只能上传"+upcount+"个!"); 
	    	return false;
   	 }
    fileSelect = el;
    
    return true;
   	}

导致fileSelect对象为空,当上传成功后,图片回显示就放回不了地方,因此,导致了上传回显。

查找了很多帖子,都没有找到实际的办法,结果又被后端大牛找到了解决办法,那就是不用onclick,改用onmousedown,用来监听鼠标按下事件。

多图片预览swiper

兼容ie9的只能用swiper2版本,http://3.swiper.com.cn/api/index.html

fireFox不兼容css的zoom属性和mousewheel方法

 $("#imgwrapper .swiper-slide img").on('mousewheel DOMMouseScroll', function(e) {
	 
        e.target.style.marginLeft="0 auto";

        var zoom=parseInt(e.target.style.zoom, 10)||100;

        if(e.originalEvent.wheelDelta){ //ie chrome
            zoom+= e.originalEvent.wheelDelta/12;
            if (zoom>0 && zoom <100) {
                e.target.style.zoom = zoom+'%';
                return false;
            }
        }else{// FF
            var scaleStr = e.target.style.transform;

            var scale = scaleStr.split("(")[1].split(")")[0];

            scale -= e.originalEvent.detail/12;

            if(scale > 0 && scale < 1.75 ){
                e.target.style.transform = "scale(" + scale +")";
                e.target.style.marginTop="0px";
                e.target.style.transformOrigin= "left top ";
                e.target.style.top="0px";
            }

            return false;
        }

});

Content

如果喜欢,打个赏,加个好友吧

扫描二维码打赏

扫描二维码打赏