杰拉斯的博客

标签：JavaScript

[实用小代码]网页中的各种长宽、坐标

杰拉斯 | 时间：2013-08-28, Wed | 20,353 views
前端开发　

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>网页中的各种长宽、坐标</title>
</head>
</head>
<body onmousemove="getXandY()">
	<label>window.event.clientX：</label><label id="xa" class="xy"></label><br />
	<label>window.event.clientY：</label><label id="ya" class="xy"></label><br />
	<label>window.event.x		 ：</label><label id="xb" class="xy"></label><br />
	<label>window.event.y		 ：</label><label id="yb" class="xy"></label><br />
	<label>window.event.screenX：</label><label id="xc" class="xy"></label><br />
	<label>window.event.screenY：</label><label id="yc" class="xy"></label><br /><br />
	<label>window.screen.height：</label><label id="screenHeight" class="xy"></label><br />
	<label>window.screen.width：</label><label id="screenWidth" class="xy"></label><br /><br />
	<label>window.document.body.clientHeight：</label><label id="ch" class="xy"></label><br />
	<label>window.document.body.clientWidth：</label><label id="cw" class="xy"></label><br />
	<label>window.document.body.clientLeft：</label><label id="cl" class="xy"></label><br />
	<label>window.document.body.clientTop：</label><label id="ct" class="xy"></label><br /><br />
	<label>window.document.body.scrollHeight：</label><label id="sh" class="xy"></label><br />
	<label>window.document.body.scrollWidth：</label><label id="sw" class="xy"></label><br />
	<label>window.document.body.scrollLeft：</label><label id="sl" class="xy"></label><br />
	<label>window.document.body.scrollTop：</label><label id="st" class="xy"></label><br /><br />
	<label>window.document.body.offsetHeight：</label><label id="oh" class="xy"></label><br />
	<label>window.document.body.offsetWidth：</label><label id="ow" class="xy"></label><br />
	<label>window.document.body.offsetLeft：</label><label id="ol" class="xy"></label><br />
	<label>window.document.body.offsetTop：</label><label id="ot" class="xy"></label><br />
	<script type="text/javascript">
	function getXandY(){
		var Xa = window.event.clientX;
		var Ya = window.event.clientY;
		document.getElementById("xa").innerHTML = Xa;
		document.getElementById("ya").innerHTML = Ya;
		var Xb = window.event.x;
		var Yb = window.event.y;
		document.getElementById("xb").innerHTML = Xb;
		document.getElementById("yb").innerHTML = Yb;
		var Xc = window.event.screenX;
		var Yc = window.event.screenY;
		document.getElementById("xc").innerHTML = Xc;
		document.getElementById("yc").innerHTML = Yc;
		var screenHeight = window.screen.height;
		var screenWidth = window.screen.width;
		document.getElementById("screenHeight").innerHTML = screenHeight;
		document.getElementById("screenWidth").innerHTML = screenWidth;
		var clientHeight = window.document.body.clientHeight;
		var clientWidth = window.document.body.clientWidth;
		var clientLeft = window.document.body.clientLeft;
		var clientTop = window.document.body.clientTop;
		document.getElementById("ch").innerHTML = clientHeight;
		document.getElementById("cw").innerHTML = clientWidth;
		document.getElementById("cl").innerHTML = clientLeft;
		document.getElementById("ct").innerHTML = clientTop;
		var scrollHeight = window.document.body.scrollHeight;
		var scrollWidth = window.document.body.scrollWidth;
		var scrollLeft = window.document.body.scrollLeft;
		var scrollTop = window.document.body.scrollTop;
		document.getElementById("sh").innerHTML = scrollHeight;
		document.getElementById("sw").innerHTML = scrollWidth;
		document.getElementById("sl").innerHTML = scrollLeft;
		document.getElementById("st").innerHTML = scrollTop;
		var offsetHeight = window.document.body.offsetHeight;
		var offsetWidth = window.document.body.offsetWidth;
		var offsetLeft = window.document.body.offsetLeft;
		var offsetTop = window.document.body.offsetTop;
		document.getElementById("oh").innerHTML = offsetHeight;
		document.getElementById("ow").innerHTML = offsetWidth;
		document.getElementById("ol").innerHTML = offsetLeft;
		document.getElementById("ot").innerHTML = offsetTop;
	}
	</script>
</body>
</html>

收集整理自网上

[转载]从 JavaScript 数组去重谈性能优化

杰拉斯 | 时间：2013-02-06, Wed | 16,000 views
前端开发　

缘由

JavaScript 数组去重经常出现在前端招聘的笔试题里，比如：

有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0]，请用 JavaScript 实现去重函数 unqiue，使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, '']

作为笔试题，考点有二：

1. 正确。别小看这个考点，考虑到 JavaScript 经常要在浏览器上运行，在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事，不信你继续读完这篇博客。

2. 性能。虽然大部分情况下 JavaScript 语言本身（狭义范畴，不包含 DOM 等延拓）不会导致性能问题，但很不幸这是一道考题，因此面试官们还是会把性能作为一个考点。

在继续往下阅读之前，建议先实现一个自己认为最好的版本。

直觉方案

对于数组去重，只要写过程序的，立刻就能得到第一个解法：

function unique(arr) {
	var ret = []

	for(var i = 0; i < arr.length; i++) {
		var item = arr[i]
		if(ret.indexOf(item) === -1) {
			ret.push(item)
		}
	}

	return ret
}

直觉往往很靠谱，在现代浏览器下，上面这个函数很正确，性能也不错。但前端最大的悲哀也是挑战之处在于，要支持各种运行环境。

(阅读全文…)

[代码收藏]设为首页和加入收藏的JavaScript代码（兼容多浏览器）

杰拉斯 | 时间：2013-02-04, Mon | 6,848 views
前端开发　

其实不少非IE内核浏览器都仍不支持通过代码将网页设为主页和加入收藏的功能，因此说是兼容，其实只是一个try，catch后的提醒而已。

加入收藏：

/*
 * author : 2010-12-27 11:33:02 teresa
 * discription: add favorite
 */

function addFavorite() {
	if(document.all) {
		try {
			window.external.addFavorite(window.location.href, document.title);
		} catch(e) {
			alert("加入收藏失败，请使用Ctrl+D进行添加");
		}

	} else if(window.sidebar) {
		window.sidebar.addPanel(document.title, window.location.href, "");
	} else {
		alert("加入收藏失败，请使用Ctrl+D进行添加");
	}
}

设为首页：

/*
 * author : 2010-12-27 11:33:02 teresa
 * discription: set homepage
 */

function setHomepage() {
	if(document.all) {
		document.body.style.behavior = 'url(#default#homepage)';
		document.body.setHomePage(window.location.href);
	} else if(window.sidebar) {
		if(window.netscape) {
			try {
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			} catch(e) {
				alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true");
			}
		}
		var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
		prefs.setCharPref('browser.startup.homepage', window.location.href);
	} else {
		alert('您的浏览器不支持自动自动设置首页, 请使用浏览器菜单手动设置!');
	}
}

Highcharts: 非常漂亮的免费纯JavaScript图表库

杰拉斯 | 时间：2013-02-01, Fri | 23,164 views
前端开发　

Highcharts是什么？

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为HighCharts2.3.5。

(阅读全文…)

JavaScript农历转换类

杰拉斯 | 时间：2013-01-24, Thu | 8,934 views
前端开发　

今天在做项目的时候需要用到JavaScript农历转换算法，从网上搜索并整理了一下，重新写出一个JavaScript农历转换类，不敢独占，特此与大家分享。

(阅读全文…)