静坐常思己过,闲谈莫论人非,能受苦乃为志士,肯吃亏不是痴人,敬君子方显有德,怕小人不算无能,退一步天高地阔,让三分心平气和,欲进步需思退步,若着手先虑放手,如得意不宜重往,凡做事应有余步。持黄金为珍贵,知安乐方值千金,事临头三思为妙,怒上心忍让最高。切勿贪意外之财,知足者人心常乐。若能以此去处事,一生安乐任逍遥。

Mustache.js语法

作者:大鹏 发布于:2013-7-6 1:11 Saturday 分类:JavaScript与HTML
标签: javascript

1.简单的变量调换:{{name}}


var data = { "name": "Willy" };

Mustache.render("{{name}} is awesome.",data);

返回成果 Willy is awesome.


2.若是变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用{{&name}}


var data = {
           "name" : "<br>Willy<br>"
        };
        var output = Mustache.render("{{&name}} is awesome.", data);
        console.log(output);

阅读全文>>


评论(0) 引用(0) 浏览(131429)

javascript URL解析

作者:大鹏 发布于:2013-6-18 23:13 Tuesday 分类:JavaScript与HTML
标签: javascript

/**
*@param {string} url 完整的URL地址
*@returns {object} 自定义的对象
*@description 用法示例:var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
myURL.file='index.html'
myURL.hash= 'top'
myURL.host= 'abc.com'
myURL.query= '?id=255&m=hello'
myURL.params= Object = { id: 255, m: hello }
myURL.path= '/dir/index.html'
myURL.segments= Array = ['dir', 'index.html']
myURL.port= '8080'
myURL.protocol= 'http'
myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
*/ 
function parseURL(url) {
	var a =  document.createElement('a');
	a.href = url;
	return {
		source: url,
		protocol: a.protocol.replace(':',''),
		host: a.hostname,
		port: a.port,
		query: a.search,
		params: (function(){
			var ret = {},
			seg = a.search.replace(/^\?/,'').split('&'),
			len = seg.length, i = 0, s;
			for (;i<len;i++) {
				if (!seg[i]) { continue; }
				s = seg[i].split('=');
				ret[s[0]] = s[1];
			}
			return ret;
		})(),
		file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
		hash: a.hash.replace('#',''),
		path: a.pathname.replace(/^([^\/])/,'/$1'),
		relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
		segments: a.pathname.replace(/^\//,'').split('/')
	};
}


评论(0) 引用(0) 浏览(212379)

微博内容增加内容图片转播到微博的功能

作者:大鹏 发布于:2012-3-29 0:44 Thursday 分类:JavaScript与HTML
标签: 图片分享 微博 转播

微博浏览内容时,鼠标移动到图片上去中增加图片分享功能。点击相应的社交网络图标可以将此图片分享到此社交网络上,此功能还有待完善。等完善之后再将使用方法分享出来供大家使用。

点击查看原图

点击查看原图


评论(0) 引用(0) 浏览(81559)

image图像预加载

作者:大鹏 发布于:2011-7-6 15:31 Wednesday 分类:JavaScript与HTML
标签: javascript


[code]
var source = ['img1.gif','img2.gif'];  
var img = new Image();  
for(var i = 0; i < source.length; i++) {  
    img.src = source[i];  
}
[/code]
以上方法只能预加载最后一张,修改为下面的代码之后才能全部预加载:

[code]
var source = ['img1.gif','img2.gif'];  
for(var i = 0; i < source.length; i++) {  
    var img = new Image();  
    img.src = source[i];  
}
[/code]


评论(0) 引用(0) 浏览(12561)

0.1+0.2 != 0.3

作者:大鹏 发布于:2011-7-6 15:03 Wednesday 分类:JavaScript与HTML
标签: javascript


JavaScript将小数作为浮点数对待,所以可能会产生一些四舍五入的错误,比如:

[code]
0.1 + 0.2; // 0.30000000000000004
[/code]
你可以通过toFixed方法指定四舍五入的小数位数:



[code]
(0.1 + 0.2).toFixed(); // "0"
[/code]
[code]
(0.1 + 0.2).toFixed(1); // "0.3"
[/code]


评论(0) 引用(0) 浏览(13009)

table.innerHTML在IE下是只读属性

作者:大鹏 发布于:2011-7-6 15:02 Wednesday 分类:JavaScript与HTML

table.innerHTML在IE下是只读属性
我们经常通过节点的innerHTML属性来填充节点,比如:
[code]
<div id="container1"> </div>

document.getElementById('container1').innerHTML = "Hello World!";
[/code]
但是在IE下设置table.innerHTML将会导致错误:
[code]
<table id="table1"> </table>
// works well in Firefox, but fail to work in IE
document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";
[/code]
实际上,table, thead, tr, select等元素的innerHTML属性在IE下都是只读的。

那么如果动态的创建一个table呢,下面提供了一种可行的方法:

[code]
<div id="table1"> </div>

document.getElementById('table1').innerHTML = "<table><tr><td>Hello</td><td>World!</td></tr></table>";

[/code]


评论(0) 引用(0) 浏览(12888)

jQuery和ExtJS的timeOut超时设置和event事件处理

作者:大鹏 发布于:2010-4-3 14:23 Saturday 分类:JavaScript与HTML
标签: javascript ajax extjs jquery 超时

ajax请求如何自定义超时时间,并处理相应的超时事件呢?

对jQuery 来说,超时可以直接设置timeout参数,并在error事件中捕获第二个参数,如果是“timeout”则表明捕获了超时事件,非常清楚。

例子:
[code]
$.ajax({

        type: "POST"
,

        contentType: "application/json"
,

        url: "../ws/MyService.asmx/test"
,

        data: '{"email":"'
+email+'"}'
,

        timeout: 30000, //超时时间:30秒


        dataType: 'json'
,

        error: function
(XMLHttpRequest, textStatus, errorThrown){

        //TODO: 处理status, http status code,超时 408


        // 注意:如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能


              //是"timeout", "error", "notmodified" 和 "parsererror"。


        },

        success: function
(result) {

          // TODO: check result


        }

});        
[/code]        
另外,error事件返回的第一个参数XMLHttpRequest有一些有用的信息:

阅读全文>>


评论(0) 引用(0) 浏览(50521)

ExtJS中grid的JsonStore、Ext.PagingToolbar带条件查询问题

作者:大鹏 发布于:2009-11-27 8:54 Friday 分类:JavaScript与HTML
标签: extjs

Extjs中的帮助文档中都是些简单的查询,grid的分页查询只是默认传入start,limit,sort,dir等参数,但实际情况中可能需要传入自定义参数,试了好多次都没有发布传入
  在网上找一个一个办法,利用JsonStore的beforeload事件来强制添加自定义的参数列表即可以实现,关键代码如下:
[code]
var ds = new Ext.data.JsonStore({
url: "../Handlers/PageHandlerPage.aspx",
//url: "../Handlers/PageHandler.ashx",
root: "root",
totalProperty: "totalProperty",
id: "id",
baseParams:{id:Ext.get("txtId").dom.value,name:Ext.get("txtName").dom.value},
fields:["id","name","descn"
],
remoteSort:true
});

ds.on("beforeload", function(thiz, options) {
//debugger
thiz.baseParams["id"] = Ext.get("txtId").dom.value;
thiz.baseParams["name"] = Ext.get("txtName").dom.value;
});
[/code]


评论(0) 引用(0) 浏览(14358)

利用Javascript刷新网页方法大全(转)

作者:大鹏 发布于:2009-6-30 17:33 Tuesday 分类:JavaScript与HTML
标签: javascript

先来看一个简单的例子:
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>
[/code]

阅读全文>>


评论(0) 引用(0) 浏览(13613)

ExtJsGridPanel中IE6中出现长滚动条的解决方法

作者:大鹏 发布于:2009-6-11 16:13 Thursday 分类:JavaScript与HTML
标签: extjs

在IE6中GridPanel如果不是设置成固定的宽度,则会出现一个很长的滚动条,整个GridPanel似乎变得有页面10倍宽,
解决方法:
修改ext-all.css第 #337 行:
[code]
.x-grid3-header-offset{padding-left:1px;width:10000px;}
[/code]
to
[code]
.x-grid3-header-offset{padding-left:1px;width:auto;}
[/code]
或者直接在页面中加入:
[code]
<style type="text/css">
.x-grid3-header-offset{padding-left:1px;width:auto;}
</style>
[/code]


评论(0) 引用(0) 浏览(13083)

禁止用户手动输入input[type=&quot;file&quot;]的文件路径

作者:大鹏 发布于:2009-6-10 15:39 Wednesday 分类:JavaScript与HTML
标签: html

禁止用户手动输入input[type="file"]的文件路径,最简单的方式是

[code]<input type="file" ContentEditable="false" />[/code]


评论(0) 引用(0) 浏览(8232)

a href=&quot;#&quot; 与 a href=&quot;javascript:void(0)&quot; 的区别

作者:大鹏 发布于:2009-6-10 14:28 Wednesday 分类:JavaScript与HTML
标签: javascript

"#"包含了一个位置信息
默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接

这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)
或者<input onclick>
<div onclick>等

打开新窗口链接的几种办法
1.window.open('url')
2.用自定义函数
<script>
function openWin(tag,obj)
{
obj.target="_blank";
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
obj.click();
}
</script>
<a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a>
window.location.href=""

阅读全文>>


评论(0) 引用(0) 浏览(311123)

javascript 禁止复制 右键

作者:大鹏 发布于:2009-4-7 15:17 Tuesday 分类:JavaScript与HTML
标签: javascript

经常会用到的一些代码,又比较容易忘记,再次收藏一下。
[code]
onselect="document.selection.empty()" oncopy="document.selection.empty()"

<!--禁止网页另存为: -->
<noscript><iframe src=*.html></iframe></noscript>
<!-- 禁止选择文本: -->
<script type="text/javascript">
    var omitformtags = ["input", "textarea", "select"]
    omitformtags = omitformtags.join("|")
    function disableselect(e) {
        if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
            return false
    };
    function reEnable() {
        return true
    };
    if (typeof document.onselectstart != "undefined")
        document.onselectstart = new Function("return false");
    else {
        document.onmousedown = disableselect;
        document.onmouseup = reEnable;
    }
</script>
<!-- 禁用右键: -->
<script>
function stop(){
  return false;
}
document.oncontextmenu=stop;
</script>
[/code]


评论(0) 引用(0) 浏览(21993)

JQuery 相关用法

作者:大鹏 发布于:2009-4-7 14:24 Tuesday 分类:JavaScript与HTML
标签: javascript ajax jquery

jQuery each迴圈中的continue及break
continue :return true;
break :return false;
也可以利用return即可跳出jQuery

获取一组radio被选中项的值  
    var item = $('input[@name=items][@checked]').val();  
获取select被选中项的文本  
    var item = $("select[@name=items] option[@selected]").text();  
select下拉框的第二个元素为当前选中值  
    $('#select_id')[0].selectedIndex = 1;  
radio单选组的第二个元素为当前选中值  
   $('input[@name=items]').get(1).checked = true;  

阅读全文>>


评论(0) 引用(0) 浏览(88222)

类似Gmail添加附件的效果

作者:大鹏 发布于:2008-11-13 23:34 Thursday 分类:JavaScript与HTML
标签: javascript ajax google gmail

利用Ajax技术无刷新添加附件,类似于Gmail的添加附件功能。从网上找到的,有空再仔细研究一下。

阅读全文>>


评论(0) 引用(0) 浏览(13513)

Javascript实现的DES加密/解密程序

作者:大鹏 发布于:2008-7-25 9:39 Friday 分类:JavaScript与HTML

引用
DES算法的入口参数有三个:Key、Data、Mode。其中Key为8个字节共64位,是DES算法的工作密钥;Data也为8个字节64位,是要被加密或被解密的数据;Mode为DES的工作方式,有两种:加密或解密。

DES算法是这样工作的:如Mode为加密,则用Key 去把数据Data进行加密,生成Data的密码形式(64位)作为DES的输出结果;如Mode为解密,则用Key去把密码形式的数据Data解密,还原为Data的明码形式(64 位)作为DES的输出结果。在通信网络的两端,双方约定一致的Key,在通信的源点用Key对核心数据进行DES加密,然后以密码形式在公共通信网(如电话网)中传输到通信网络的终点,数据到达目的地后,用同样的Key对密码数据进行解密,便再现了明码形式的核心数据。这样,便保证了核心数据(如PIN、 MAC等)在公共通信网中传输的安全性和可靠性。

通过定期在通信网络的源端和目的端同时改用新的Key,便能更进一步提高数据的保密性,这正是现在金融交易网络的流行做法。

阅读全文>>


评论(0) 引用(0) 浏览(180551)

Extjs Tree通过递归删除子节点信息

作者:大鹏 发布于:2008-7-16 21:42 Wednesday 分类:JavaScript与HTML
标签: javascript extjs

function removeChildrenRecursively(node) {
    if (!node) return;
    while (node.hasChildNodes()) {
        removeChildrenRecursively(node.firstChild);
        node.removeChild(node.firstChild);
    }
}


评论(0) 引用(0) 浏览(15480)

关于ExtJS中TabPanel的Tab页关闭后再打开组件无法显示的问题

作者:大鹏 发布于:2008-7-4 18:28 Friday 分类:JavaScript与HTML
标签: javascript ajax extjs

EXT中的TabPanel如果需要把被用户关闭的页缓存,则在TabPanel的属性中加入如下:  
[code]
listeners:{//当前侦听到关闭事件时,把要关闭的Panel隐藏
                remove: function(tp, c) {
                    c.hide();
                }
        },
        autoDestroy:false,//被关闭的Panel不会被自动释放
[/code]===========================================================
初始化组件的方法要在Ext.onReady里的执行,要不然很有可能报错,因为之前浏览器页面还没有加载好其元素不完整。


评论(1) 引用(0) 浏览(38688)

EXT Ajax访问url返回405错误的解决办法

作者:大鹏 发布于:2008-6-28 15:48 Saturday 分类:JavaScript与HTML
标签: javascript ajax c#

昨日用了Ext Tree组件做一个东西,需要用到ajax对节点逐级加载,开始数据用的静态数据data.txt,一切程序都测好了然后放到系统中测试,将data.txt换成了servlet,发现什么都不显示,单独访问servlet也能正常返回json数据,猜想应该是出现ajax调用错误了,检查了传递的参数与服务端需要的参数名也丝毫没有问题,Loader的代码大致是这样的:

阅读全文>>


评论(0) 引用(0) 浏览(66931)

Ext智能提示 - Dreamweaver CS3

作者:大鹏 发布于:2008-6-22 16:37 Sunday 分类:JavaScript与HTML
标签: javascript ajax .net

Dreamweaver CS3的Ext 2.0.2智能提示.它提供了非常准确的Ext API提示。
如图:
点击在新窗口中浏览此图片

阅读全文>>


评论(0) 引用(0) 浏览(782233)