Js技术资料
1.让Iframe高度自适应
function page_resizeframe(){
try{
var o=parent.document.getElementById(window.name);
if(o){
o.height = document.body.scrollHeight;
}
}catch(e){}
}
在iframe的页面引用:
<body onload="page_resizeframe();">
2.获得以时间为种子的随机数
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
}
function rand(number) {
return Math.ceil(rnd()*number);
}
使用方法：rand(8);
3.隔行换色：
/*
*tab是页面中以'tab'为id的表格。
*/
css样例：
tr.t1 td {background-color:#eaf0fe;}/* 第一行的背景色 */
tr.t2 td {background-color:#ffffff;}/* 第二行的背景色 */
tr.t3 td {background-color:#51aaff;color:#ffffff;}/* 鼠标经过时的背景色 */
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i<Ptr.length+1;i++) {
trObj = Ptr[i-1];
trObj.className = (i%2>0)?"t1":"t2";
trObj.onclick = resetBgColor(trObj);
}
}
window.onload=$;
var oldObj;
var oldClassName = "";
function resetBgColor(obj){
if(obj!=oldObj){
if(typeof(oldObj)!="undefined"){
oldObj.className = oldClassName;
}
var tempObj = obj.parentNode;
oldClassName = tempObj.className;
tempObj.className = "t3";
oldObj = tempObj;
}
}
4. 经典的时间控件
http://www.my97.net/dp/index.asp
5. 经典的弹出窗口
greybox
shadowbox
6.onbeforeunload与onunload事件
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法：
·object.onbeforeunload = handler
·<element onbeforeunload = “handler” … ></element>
描述：
事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回，前进，刷新，主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素：
·BODY, FRAMESET, window
平台支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onbeforeunload测试</title>
<script>
function checkLeave(){
event.returnValue="确定离开当前页面吗？";
}
</script>
</head>
<body onbeforeunload="checkLeave()">
</body>
</html>
用法：
·object.onbeforeunload = handler
·<element onbeforeunload = "handler"></element>
当用户关闭一个页面时触发 onunload 事件。
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回，前进，刷新，主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
alert("欢迎下次再来！");
}
</script>
</head>
<body onunload="checkLeave()">
</body>
</html>
7. js禁用右键和选择
onselectstart="return false" oncontextmenu="return false"
使用方法：<body onselectstart="return false" oncontextmenu="return false">
window.print() 实际上，是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但是这种方式最致命的缺点是不能设置打印参数，比如纸型，页边距，选择打印机等等。
需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送去打印，打印后又处理回来。
function window.onbeforeprint()
{
//将一些不需要打印的隐藏
}
function window.onafterprint()
{
//放开隐藏的元素
}
通过这两个方法，就可以实现页面的部分打印
9. js写入javascript代码
document.write(unescape("%3Cscript src='" + js文件路径 + "' type='text/javascript'%3E%3C/script%3E"));
这种方法能避免写入的JS无效。
10. 限制textarea的字数
function checkTxtArea(obj,maxlimit){
var charcnt = obj.value.length;
if (charcnt > maxlimit) {
obj.value = obj.value.substring(0, maxlimit);
}
}
<textarea id="signature" name="signature" class="tx"
onKeyDown="checkTxtArea(this,20)"
onKeyUp="checkTxtArea(this,20)"
onFocus="checkTxtArea(this,20)"></textarea>
11.控制选取和右键
function onselstaCtl(){
var the = event.srcElement ;
//通过body的onselectstart属性，控制页面内容的可选状态。
//标签是 input text 以及 文本域textarea 的，均为可以选择项目。
if( !( ( the.tagName.toLowerCase()== "input" && the.type.toLowerCase() == "text" )
|| the.tagName.toLowerCase()== "textarea"
|| the.tagName.toLowerCase() == "select") ){
return false;
}else{
return true ;
}
}
使用方法：
<body onselectstart="return onselstaCtl();" oncontextmenu="return false">
另一种方法：将下面的文件保存为js，在页面导入即可
----------------------
//屏蔽按键
function initial(){
document.onkeydown=function()
{
try{
if((event.altKey)
|| ((event.keyCode==8) && (event.srcElement.type!="text" && event.srcElement.type!="textarea" && event.srcElement.type!="password"))
|| ((event.ctrlKey) && ((event.keyCode==78) || (event.keyCode==82)))
|| (event.keyCode==116))
{
event.keyCode=0;
event.returnValue=false;
}
}catch(e){}
}
}
function addEvent(obj, type, fn)
{
if (obj.attachEvent)
obj.attachEvent('on' + type, fn);
else
obj.addEventListener(type, fn, false);
}
addEvent(window, "load", initial);
-------------------------
-------------------------------------------------------------------
不断补充中： 最近工作较忙，以后会把经常用到的js共享到这里。希望对大家有所帮助。