分类 JS 下的文章

chrome下固定定位元素在锚点跳转时显示不全

做项目时遇到两次，就纪录下来。（仅在chrome下出现此bug）

产生条件：

  • 1.锚点链接上绑定了点击事件；

现象：

在chrome下测试发现，绝对定位的元素只显示一部分，但是稍微滚动滚动条或者改变窗口大小后又正常了。

原因：

个人觉得：跟浏览器渲染，在点击页面内锚点时触发了默认的跳转锚点的动作和绑定的click事件，两个同时执行后绝对定位元素渲染出bug

解决方案：

  • 1.点击事件内加return false来阻止默认行为；（可行性不高，因为阻止了锚点跳转，但是也能解决显示不全的问题）
  • 2.绑定的事件写在setTimeout内，延迟执行;（能满足大部分需求）

演示代码：

DEMO

js的trim

在IE6,7,8中String对象没有trim方法，IE9,Chrome，Firefox是有的，解决方法：

if(typeof String.prototype.trim !== 'function') {
	String.prototype.trim = function() {
		return this.replace(/^\s+|\s+$/g, '');
	}
}

如果使用jQuery，直接用$.trim(string)好了。

json字符串to object

在用uploadify的时候遇到一个问题，在上传完成某个文件之后我想用json返回response，但是接收到的response都是字符串格式的，当时找了好久，baidu到一个方法：

eval('(' + jsonstr + ')');

后来无意中看到jq里面有这么一个函数：

$.parseJSON(jsonstr);

...

(new Function("return " + data))();

javascript杂记

合并两个数组

var a = [1, 2],
    b = [3, 4];
console.log(a.concat(b))

IE6,7 innerHtml未知的运行时错误

HTML错误的嵌套例如在p里嵌套div那修改div的innerHTML属性也会出现错误

ajax发送数据时的特殊符号

% & + 编码这几个符号


% %25
+ %2B
& %26

或者：encodeURIComponent

页面跳转

// 类似于HTTP跳转，浏览器无当前页面的历史记录
window.location.replace("http://type.so");

// 浏览器有历史记录
window.location.href = "http://type.so";

变量的作用域

php的变量作用范围

$str = 'something';
function infunction() {
    echo $str; //报错
}
function infunc() {
    $str = 'one two three';
    echo $str; //one two three
}
echo $str; //something
//不搭嘎啊

javascript变量作用范围

var str = 'something';
function infunction() {
    console.log(str); //something
    str = 'one two three';
}
console.log(str); //one two three
//想function里面的变量私有化，则需要var来定义

python变量作用范围

str = 'something';
def infunction():
    print(str) #something
def infunc():
    print(str) #报错
    str = 'one two three'
#在def中不对外部变量赋值时，外部变量可直接使用（global）
#一旦在def中对变量复制，def中的变量将会私有化（locale）

实时网站在线人数显示

javascript部分

使用的ajax长轮询 ajax long poll，为了便于使用，我将它封装成了一个jquery插件

(function($){
	$.fn.extend({
		visitors: function(options){
			var defaults = {
				script : "visitors/online.php",
				timeout : 50000,
			};
			var options = $.extend(defaults, options);
			return this.each(function(){
				var holder = $(this);
				refresh = function(sleep) {
					var sleep = sleep ? sleep : 1000;
					setTimeout('update()', sleep);
				}
				update = function() {
					$.ajax({
						url : options.script,
						type : 'get',
						dataType : 'json',
						async : true,
						cache : false,
						timeout : options.timeout,
						beforeSend : function() {
						},
						success : function(data) {
							holder.html(data.num);
							refresh(1000);
						},
						error : function() {
							refresh(15000);
						}
					});
				}
				update();
			});
		}
	});
})(jQuery);

php部分

待续...

uploadify的使用

html

Upload photos






Uploading…


Empty the list

javascript

$(function() {
	var fileRemoved = false;
	function reset() {
		$("#fileInputQueue, #upload-tools").hide();
		$("#status").empty().hide();
		$("#doc-loading").hide();
	}
	$('#fileInput').uploadify({
		uploader: 'static/js/uploadify/uploadify.swf',
		script: 'uploadify.php',
		buttonImg: 'static/image/button.png',
		// rollover: true,
		width: 100,
		height: 30,
		cancelImg: 'static/image/cancel.png',
		// auto: false,
		multi: true,
		// method: 'POST',
		fileDesc: 'Photo(*.jpg; *.jpeg; *.gif; *.png)',
		fileExt: '*.jpg; *.jpeg; *.gif; *.png',
		sizeLimit: 31457280,
		// displayData: 'percentage',
		scriptAccess: 'always',
		scriptData: {
		},
		onSelect: function(event, queueID, fileObj) {
			if (parseInt(fileObj.size) > parseInt(31457280)) {
				size_limit = Math.round(31457280 / 1048576 * 100000) / 100000;
				//上传文件大小超出限制
				fileRemoved = true;
				return false;
			}
			$("#fileInputQueue, #upload-tools").fadeIn();
			if (!fileRemoved) {
				//成功选择文件
			} else {
				//...
			}
		},
		onCancel: function() {
			if ($('.uploadifyQueueItem').size() === 1) {
				reset();
			}
		},
		onClearQueue: function() {
			reset();
		},
		onComplete: function(evt, queueID, fileObj, response, data) {
			//console.log(eval('(' + response + ')').pid);
			//$.parseJSON
			$("#fileInput" + queueID + " .uploadifyProgressBar").css("background", "#6AE16A");
			$("#fileInput" + queueID + " .cancel").hide();
			return false;
		},
		onAllComplete: function(evt, queueID, fileObj, response, data) {
			//全部上传成功
			$("#upload-tools, #doc-loading").hide();
		}
	});
	$('#upload-button').click(function() {
		$('#fileInput').uploadifyUpload();
		$('#upload-tools').hide();
		$("#fileInputQueue").before($("#doc-loading").show());
	});
});

css

.uploadifyQueue{border:1px solid #CCC;display:none;max-height:300px;margin:16px 0 24px 0;overflow:auto;zoom:1;}
.uploadifyQueueItem{border-bottom:1px solid #E2E2E2;font-weight:bold;padding:8px;}.uploadifyQueueItem .cancel{float:right;}
.uploadifyQueueItem:last-child{border-bottom:0;}
.uploadifyError{background-color:#eeacac !important;color:#cc0000 !important;}
.uploadifyProgress{background:#EEE;height:6px;margin-top:8px;overflow:hidden;width:100%;zoom:1;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);-webkit-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);}
.uploadifyProgressBar{background:#333;height:6px;margin-left:-1px;width:1px;}
a.delete-item{background:url('static/images/icons/delete.png') center left no-repeat;padding-left:18px;line-height:18px;}

google地图overlay

就是添加一个自定义的层，使用方法(初始化一个)：
new FastMarker();

function FastMarker(latlng, options) {
	this.latlng = latlng;
	this.options = options || {};
}
FastMarker.prototype = new google.maps.OverlayView();
FastMarker.prototype.onAdd = function(map) {
	var div = document.createElement('div');
	if (this.options.className) div.className = this.options.className;
	if (this.options.html) div.innerHTML = this.options.html;
	if (this.options.dom) div.appendChild(this.options.dom);
	if (this.options.id) div.id = this.options.id;
	div.style.position = 'absolute';
	this.map = map;
	this.div = div;
	var events = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousewheel', 'DOMMouseScroll'];
	for (var i = 0; i < events.length; i++)
	 google.maps.event.addDomListener(div, events[i], this.stop, false);
	var panes = this.getPanes();
	panes.overlayLayer.appendChild(div);
};
FastMarker.prototype.draw = function(force) {
	var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
	this.div.style.top = (point.y) + 'px';
	this.div.style.left = (point.x) + 'px';
};
FastMarker.prototype.onRemove = function() {
	google.maps.event.clearInstanceListeners(this.div);
	this.div.parentNode.removeChild(this.div);
	this.div = null;
};
FastMarker.prototype.getPosition = function() {
	return this.latlng;
};
FastMarker.prototype.stop = function(e) {
	if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	} else {
		e.stopPropagation();
	}
};

javascript判断数据类型

js的一切皆对象，constructor（构造函数）

alert([].constructor == Array);
alert({}.constructor == Object);
alert("string".constructor == String);
alert((123).constructor == Number);
alert(true.constructor == Boolean);

正则杂记

验证手机号码

中国移动号段 1340-1348 135 136 137 138 139 150 151 152 157 158 159 187 188 147
中国联通号段 130 131 132 155 156 185 186 145
中国电信号段 133 1349 153 180 189
其他 181 182 183 184
^(13[0-9]|15[0-9]|14[0-9]|18[0-9])\d{8}$
^(1[3-5][0-9]|18[0-9])\d{8}$
^(1[3-58])\d{9}$

验证邮箱

^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,4}$

验证日期

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$

验证时间

格式：时:分:秒

^([01]?\d|2[0-3]):[0-5]?\d:[0-5]?\d$

验证url

^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$

环视

以前一直没明白正则的环视的使用环境，网上的那些例子不用环视也能写出来，而且更容易理解。其实，在需要匹配的字符串有长度限制的时候，而且有其他的特殊要求的时候，用环视能很好的解决问题。这样说，还太抽象了，下面看例子：

#有待更新

一些注册表单会用到的正则

用户名(允许字母、数字、下划线、减号、中文)

^[A-Za-z0-9_\-\u4e00-\u9fa5]+$
^[A-Za-z0-9_\-\x{4e00}-\x{9fa5}]+$

真实姓名(允许字母、中文)

^[A-Za-z\u4e00-\u9fa5]+$    // js
^[A-Za-z\x{4e00}-\x{9fa5}]+$    // php

http及https的url

^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&=]*)?$

IP v4，下面把四个展开写是为了看起来比较直观，其实可以写的更短一点。

^(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)$

验证子网掩码

^(((255\.){3}(255|254|252|248|240|224|192|128|0+))|((255\.){2}(255|254|252|248|240|224|192|128|0+)\.0)|((255\.)(255|254|252|248|240|224|192|128|0+)(\.0+){2})|((255|254|252|248|240|224|192|128|0+)(\.0+){3}))$
  1. 1
  2. 2