JavaScript
iteye_12132
这个作者很懒,什么都没留下…
展开
-
instanceof 与 constructor
instanceof 与 constructor通常都用判断实例与类之间的关系。但是,在应用中,不同的侧重点将会有不同的具体偏好。我们看看它们的一些特点,从而更恰当的应用。来看下面的这段代码:[code="js"]function Person(){}var a = new Person();alert(a instanceof Person);//true...2010-08-24 19:43:32 · 173 阅读 · 0 评论 -
canvas 基础
canvas元素:Firefox,Chrome支持,IE不支持(可以使用excanvas库,将其转化为svg来实现)在页面上定义一个canvas元素,需要指定长宽(px为单位)。如果使用excanvas库,不能够带单位。[code="html"][/code][code="js"]var graph = document.getElementById('graph'); ...2010-09-02 09:01:06 · 94 阅读 · 0 评论 -
canvas 魔兽技能冷却效果
[code="html"]*{ margin:0px; padding:0px;}#skills ul,#skills li{ list-style-type:none; margin:0px; padding:0px;}#skills li{ float:left; margin-left:5px; position:relative;...2010-09-02 09:03:48 · 163 阅读 · 0 评论 -
构建可排序table
[code="html"]table{ border-collapse:collapse; width:300px;}table caption{ border-right:1px solid #abc; border-left:1px solid #abc; border-top:2px solid #000; border-bottom:2px soli...2010-09-02 09:19:45 · 136 阅读 · 0 评论 -
构建可拖拽table
[code="html"]table{ border-collapse:collapse; width:300px;}table caption{ border-right:1px solid #abc; border-left:1px solid #abc; border-top:2px solid #000; border-bottom:2px soli...2010-09-02 09:24:19 · 139 阅读 · 0 评论 -
clip应用之简单图片动画
[code="html"]#panel { position :relative;}#panel img{ position : absolute; top:0px; left:0px;} [/code][code="js"]function init(){ var img = document.getElementById...2010-09-06 14:09:42 · 93 阅读 · 0 评论 -
对象浅/深复制
[code="js"]/**测试数据*/var parent = { numbers: [1, 2, 3], letters: ['a', 'b', 'c'], obj: { prop: 1 }, bool: true, fn: function(p){ alert(p); }};/**浅复制*/function copy(p,c)...2010-09-06 14:12:31 · 46 阅读 · 0 评论 -
canvas应用示例
[code="js"]function init(){ buildSpinner({ x : 50, y : 50, size : 20, degrees : 15 });}function buildSpinner(data) { var canvas = document.createElement('canvas'); canvas.height...2010-09-06 14:20:35 · 65 阅读 · 0 评论 -
获取页面的滚动位置与鼠标事件中的坐标
[code="js"]/** 获取当前滚动的位置。*/function getScrollingPosition(){ var position = [0, 0]; //FF if (typeof window.pageYOffset != 'undefined') { position = [ window.pageXOffset,...2010-09-06 14:30:43 · 944 阅读 · 0 评论 -
textarea 光标插入
[code="html"][/code][code="js"]//设置textarea光标位置function setCaret(textObj){ if(textObj.createTextRange){ textObj.caretPos=document.selection.createRange().duplicate(); }}...2010-10-18 10:33:02 · 94 阅读 · 0 评论 -
日期有效性检测方法
[code="js"]/**日期格式:YYYY-MM-DD;日期有效返回true,否则返回false*/function checkDate(str){ var reg =/^[12]\d{3}-(0[1-9]|1[0-2])-([0-2]\d|3[0-1])/; if(reg.test(str)){ var arr = str.split('-'); ...2010-10-22 11:43:08 · 490 阅读 · 0 评论 -
阿拉伯数字转金额中文大写
[code="js"]function converToZH(numberVal){ var ZH_VAL = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字 var UNIT = "万仟佰拾亿仟佰拾万仟佰拾元角分"; // 对应单位 var n_money = Number(numberVal); var negative = false; if(n_mo...2010-10-25 19:37:03 · 126 阅读 · 0 评论 -
简单日历,支持最大、最小值。
[code="html"].calender_tb{ border-collapse:collapse; background-color:lightblue; font-family:'宋体'; font-size:90%; width:160px; height:160px;}.calender_tb tr td{ padding:2px; ...2010-12-03 15:58:56 · 234 阅读 · 0 评论 -
定时器timer的进一步引用
[code="js"]定时器:times的单位为毫秒。var timer = setTimeout(fn,times); //在time时间以后执行函数fn.如果times = 0,则表示,希望fn“尽可能快”的得到执行。var timer = setInterval(fn,times);//时间间隔为time,重复执行函数fn.如果fn的执行时间长于时间间隔times...2010-12-03 16:03:14 · 210 阅读 · 0 评论 -
简单日历-带时间显示
[code="js"].calender_tb{ border:1px solid black; border-collapse:collapse; background-color:lightblue; font-family:'宋体'; font-size:90%; width:180px; height:180px;}.calender_tb ...2010-12-14 14:19:39 · 108 阅读 · 0 评论 -
jsdoc使用
[code="java"]//使用说明:java -jar jsrun.jar app/run.js --helpUSAGE: java -jar jsrun.jar app/run.js [OPTIONS] ...OPTIONS: -a or --allfunctions Include all functions, even undocu...2010-12-17 09:18:05 · 537 阅读 · 0 评论 -
事件注册于移除的优化
编写跨浏览器的事件注册、移除代码,一般写法如下:[code="java"]function addHandler(target, eventType, handler) { if (target.addEventListener) { // DOM2 Events target.addEventListener(eventType, handler, false); } el...原创 2010-06-07 09:32:16 · 83 阅读 · 0 评论 -
模2除的小改进
一般写法:[code="js"]for (var i = 0, len = rows.length; i < len; i++) { if (i % 2) { className = "even"; } else { className = "odd"; } // apply class}[/code]小改进后的写法:[code="js"]f...原创 2010-06-07 09:36:31 · 88 阅读 · 0 评论 -
客户端页面往服务器传数据的简单方法
[code="js"]var url = '/status_tracker.php';var params = ['step=2', 'time=1248027314'];var beacon = new Image();beacon.src = url + '?' + params.join('&');beacon.onload = function() { if (th...原创 2010-06-07 09:38:18 · 380 阅读 · 0 评论 -
NaN小结
The value NaN has a couple of unique properties. First, any operation involving NaN always returns NaN(for instance, NaN /10), which can be problematic in the case of multistep computations. Secon...原创 2010-06-07 10:18:55 · 123 阅读 · 0 评论 -
字符串、数字、日期间的转换
[b]字符串转数字:Number(num)[/b]1. str 是空字符串,结果为0;2. str 不等于 空字符串,结果为 NaN;3. str = true,结果为14. str = false,结果为 05. 数字组成的字符串,结果为对应的 数字。6. 其它为 NaN[b]时间转字符串:[/b]New Date().toLocaleDateString() ...2010-06-07 10:37:34 · 116 阅读 · 0 评论 -
条件判断
[code="js"]if(a){ //非空字符串,数字(非0),对象(包括 new Boolean(false)) alert(true);}else{//空字符串,数字0,undefined,null,NaN alert(false);}[/code]...原创 2010-06-07 10:39:04 · 73 阅读 · 0 评论 -
当+ 号运算符遇到 boolean与string
如果 两个操作数中有一个是字符串,那么将会视为 字符串拼接:例如:[code="java"]2+ ‘3’ = ‘23’[/code]如果是遇到 Boolean(true/false),true将自动转换为数字1,false转换为0,前提是第一个加数是数字:例如:[code="java"] 2 + true + ‘3’ = ‘33’2 + ‘3’ + true =...原创 2010-06-07 10:41:36 · 93 阅读 · 0 评论 -
进制转换
[b]数字的定义:[/b]默认是十进制;十六进制:0x 开头;八进制 :0开头;没有二进制定义数字十进制数字进制之间的转换:[code="js"]var num = 16;num.toString();//16num.toString(2);// 10000num.toString(8);//20num.toString(10);//16num....2010-06-07 10:50:45 · 60 阅读 · 0 评论 -
typeof 与 instanceof
typeof 用于区分原始类型 和 对象类型。[code="java"]var s = “Nicholas”;var b = true;var i = 22;var u;var n = null;var o = new Object();alert(typeof s); //stringalert(typeof i); //numberalert(typeo...原创 2010-06-07 14:40:04 · 65 阅读 · 0 评论 -
诡异的Javascript
[b]Javascript 不存在块层次的作用域。[/b][code="java"]if (true) { var color = “blue”;}for (var i=0; i < 10; i++){ doSomething(i);}alert(i); //10alert(color); //”blue”[/code][b]pars...原创 2010-06-07 14:42:36 · 62 阅读 · 0 评论 -
页面跳转不保存历史轨迹
[code="html"]wowfunction replaceURL(){ //历史记录不被保存,将无法实现‘后退’ location.replace('http://www.baidu.com');}baidureplace[/code]原创 2010-06-07 14:56:25 · 930 阅读 · 0 评论 -
for循环迭代小改进
[b]常见写法:[/b][code="js"]// original loopsfor (var i=0; i < items.length; i++){ process(items[i]);}var j=0;while (j < items.length){ process(items[j++]]);}var k=0;do { p...原创 2010-06-08 10:35:24 · 238 阅读 · 0 评论 -
数组任务分解防止页面假死
当对一个数组的每一项进行处理,处理时间比较长的时候,浏览器会因为忙于计算而无法接收用户的请求,如页面点击无反应等,从而出现假死状态。解决方法:使用定时器分解任务,在任务切换‘空隙’可以允许浏览器对用户操作进行相应。[b]原始代码:[/b][code="js"]for (var i=0, len=items.length; i < len; i++){ process(it...原创 2010-06-08 10:51:53 · 69 阅读 · 0 评论 -
【Js小伎俩】小结
[b]复制数组[/b][code="js"]var orgArray = [];var target = orgArray.concat();[/code][b]foreach形式的便利特点[/b][code="js"]//该遍历会输出对象及其函数prototype上的属性/方法,但不会枚举出继承的属性!for (p in o) alert(p);[/c...原创 2010-06-09 17:22:14 · 94 阅读 · 0 评论 -
数字数组排序
数组的sort方法默认采用字符串的比较方式(字典排序),例如 '11'< '2'。假如数组中的数字以字符的形式存在,排序结果就会出现问题。示例:[code="js"]var arr = [1,2,11,13,5,30];arr.sort();alert(arr); //1,11,13,2,30,5[/code]因此,排序的时候我们应该自定义一个函数用于数字间的比较:...原创 2010-06-10 11:32:35 · 164 阅读 · 0 评论 -
实现JavaScript继承
javasript是基于prototype对象实现,继承的要点如下:1. 构造函数会存放"私有数据"--对实例而言。2. 函数的原型prototype对象会存放"公有"数据及函数3. 在子类的构造函数里面,调用 父类的构造方法--使用call(this)的形式,并定义自己的数据4. 设置子类的原型prototype对象指向一个父类的实例(或者是一个空函数的实例,该空函数的proto...2010-06-11 14:24:12 · 83 阅读 · 0 评论 -
事件的侦听、移除和事件对象解析
Javascript的事件处理模型依据不同的浏览器而有所区别,主要分两种:1.Firefox,Chrome,Safira支持的DOM Level 2事件模型;2.IE自己的事件处理模型。而 DOM Level 0 则是所有浏览器都支持的事件机制,但是在IE以及其它支持DOM Level 2的浏览器中,表现仍然有不同。以下代码在IE6,Firefox 3.0中运行通过。[size...2010-06-13 19:28:20 · 204 阅读 · 0 评论 -
页面mp3播放器作
HTML代码:[code="html"] Play[/code]控制脚本:[code="js"]function Play(){ var isIE = navigator.appName.indexOf("Microsoft"); var player = 'audio/niftyPlayer...2010-06-17 17:26:26 · 113 阅读 · 0 评论 -
input/textarea文本的选择与获取
[code="js"]//获取input/textarea中选择的文本function getSelectedText(textbox){ if (document.selection){//IE return document.selection.createRange().text; } else { return textbox.value.su...2010-07-13 15:27:34 · 902 阅读 · 0 评论 -
IE下clipboard的访问
clipboard数据通过[b]clipboardData[/b]对象访问,它有getData(),setData(),clearData()三个方法。[code="js"]window.clipboardData.getData(type):获取数据;window.clipboardData.setData(type, value):设置数据为value;window.clipb...2010-07-13 16:02:56 · 384 阅读 · 0 评论 -
富文本框基础
[b]1.在文档加载完成以后,通过设置document.designMode = 'on'使文档为可编辑。[/b][b]2.对文本的操作,如加粗、字体设置等,通过 document.execCommand(cmd,bool,param)来实现。[/b] 参数如下: cmd:字符串,要执行的命令; bool:布尔值,表示是否需要对该命令提供一个用户接口,Firefox在该值为tr...2010-07-14 16:31:20 · 150 阅读 · 0 评论 -
动态加载JS/CSS文件--改进版
[code="js"]function loadScript(url, callback,targetWin) { if(!targetWin) targetWin = self; var script = targetWin.document.createElement("script") script.type = "text/java...2011-01-11 17:22:42 · 102 阅读 · 0 评论 -
页面元素简单移动
[code="html"]moveElement[/code][code="js"]function doMoveElement(){ var el = document.getElementById('div1'); moveElement(el,240,200); }function moveElement(el,finalX,fi...2010-07-16 10:06:47 · 103 阅读 · 0 评论 -
一个比较完整的客户端判断
[code="js"]var client = function() { var engine = { // rendering engines ie : 0, gecko : 0, webkit : 0, khtml : 0, opera : 0, // specific version ver : null }; var brow...2010-07-16 11:09:49 · 145 阅读 · 0 评论