IE:<param name="wmode" value="opaque" /> FF:<embed wmode="opaque" /> 和flash透明一样: IE:<param name="wmode" value="transparnet" /> FF:<embed wmode="transparnet" /> ie6中的双边bug解决方法:display:inline js获取css中的float属性:(ie中用cssFloat,FF中用styleFloat) ie中取消选择---onselectstart=return false ff中取消选择---css中定义:* {-moz-user-select:none} 下面例子比较ie和ff中document.getElementsByName()的区别: <input type="radio" name="aa" /> <input type="radio" name="aa" /> <input type="radio" name="aa" /> <div name="aa"></div> <div id="aa"></div> <div id="aa"></div> <script type="text/javascript"> <!-- window.onload=function(){ alert(document.getElementsByName("aa").length) } //--> </script>----------ie中获取的是id的obj(但包括name为radio checkbox等项),ff中获取的只是name项 这中思想蛮不错的: var w=100 low=true if(low=true){ w-- } if(w<=10){ w++ low=false } if(w>=100){ w-- low=true } if(low=false){ w++ } js弹出链接文本内容 <script language="javascript"> function altername(evt){ evt=evt?evt:window.event if(document.all){ alert(evt.srcElement.innerHTML) } else{ alert(evt.target.innerHTML) } } window.onload=function(){ var obj=document.getElementsByTagName("a") for(i=0;i<obj.length;i++){ obj[i].onmouseover=altername } } </script> <a href="">baidu</a><br> <a href="">google</a><br> <a href="">blueidea</a><br> <a href="">crsky</a> //主要考察event.srcElement和evt.target js用for in 遍历整个数组: for(i in aa){ document.write(i) } js用toLocaleString()获取整个时间: 例子: var qq=new Date() qq.toLocaleString() //或者写法如下: var qq=new Date() var nian=qq.getFulllYear() var yue=qq.getMonths() var ri=qq.getDate() var xingqi=qq.getDay() var hour=qq.getHours() var minute=qq.getMinutes() var second=qq.getSeconds() var millisecond=qq.getMilliseconds() 数组的定义 : 一维: 方案1: var aa=new Array() aa[0]="" aa[1]="" aa[3]="" 方案2: var aa=new Array("","","") 方案3: aa=["","",""] 二维: var aa=["0","1","2"] aa[0][0]="" aa[0][1]="" aa[1][0]="" aa[1][1]="" aa[2][0]="" aa[2][1]="" asp中定义数组: dim aa(3) aa(0)="" aa(1)="" aa(2)="" IE:attachEvent 例如在body中单击的时候弹出”你好“,我们可以这么做 首先定义一个函数: function alert_hello(){ alert("你好") } 绑定: document.body.attachEvent("onclick",alert_hello) 需要注意的是: 1:在绑定的时候一定不能这样写:alert_hello() 2:好在外部定义alert_hello这个函数 如果在内部定义则:document.body.attachEvent("onclick",function(){"alert('hello')"}) FF:addEventListener 同样实现在IE中的效果的时候这样做即可: 定义: function alert_hello(){ alert("你好") } 绑定: document.body.addEventListener("click",alert_hello,false) 以下为一个对象绑定:(ff和ie中都需要:div必须写在前面,如果是ie,这个时候把div放在后面的话,可以在声明语言的时候加入defer) <div id="xx">hello</div> <script language="javascript"> function aa(){ alert("hello") } document.getElementById("xx").addEventListener("click",aa,false) </script> IE和FF中的区别: 1:如果要执行的函数不止一个,例如: document.body.attachEvent("onclick",aa1) document.body.attachEvent("onclick",aa2) document.body.attachEvent("onclick",aa3) 即:body要同时绑定aa1,aa2,aa3这个三个函数, 这个时候,IE和FF中的解释循序是不一样的, ie:aa1,aa2,aa3 ff:aa3,aa2,aa1 2:在ie中是要写全时间名:例如,onclick,而ff中只要写click即可。。。 3:ie中绑定的时候比ff少一个参数,区别如下代码: <style type="text/css"> #aa { width:500px; height:500px; background:red; } #qq { width:200px; height:200px; background:black; } </style> <div id="aa">d <div id="qq" >d</div> </div> <script language="javascript"> function al(){ alert("hello") } document.getElementById("aa").addEventListener("click",al,true) //试试false和true的区别 </script> HTML页面标准排版: body.style.padding---页面中body的padding(例如在body的style中写:padding:20px) body.style.border---页面中body的border(例如在body的style中写:border:20px) body.clientLeft---页面中body的(左)border宽度 body.clientTop---页面中body的(上)border宽度 body.clientWidth---页面中body的宽度 body.offsetWidth---页面中body的宽度+边框长度(即body.clientWidth+边框长度) body.scrollWidth---页面中body出现滚动条时候的实际长度,当没有滚动条的时候body.scollWidth和body.clientWidth是相等的 (IE和FF中两者是相反的概念) body.clientHeight //同上 body.offsetHeight //同上 body.scrollHeight //同上 div.style.border---div中的border(有两个参数:width,height) div.style.padding---div中padding的值 div.style.left---div距离页面左边的距离(这个参数有三个类似的写法:具体如下:(先要明白.style.left返回的值是一个字符串,如果没有,返回空串) 1:div.style.posLeft---就是将left的值转化为数值类型,而且是浮点型 2: div.style.pixelLeft---是数值,是将left的值(如果是空串则赋为0)转化为像素值 注意;parseInt(posLeft)==pixelLeft 3: div.offsetLeft---返回对象距离窗口左边的距离(带边框+padding) ff中是没有1,2两个参数的,要应用的话一般统一用offsetLeft offsetLeft通常用于取值,而left则应用于赋值计算 例如:先通过offsetLeft取到div距离页面的距离x,然后在通过div.style.left=x+10+"px"将div往右移动10个PX,而在实际应用的时候一定要加上"px"(因为left的返回值为字符串) ) div.style.Top //同div.style.Left用法相同 div.offsetLeft//同div.offsetTop用法相同 注意:div.style.left是div距离页面左边的距离(不附带padding) div.offsetLeft是div距离页面左边的距离(附带padding) div.clientTop---返回div(上)border的高度 div.clientLeft---返回div(左)border的宽度 div.clientWidth---返回div宽度(包括padding,不包括border和滚动条的宽度) div.clientHeight---返回div高度(包括padding,不包括border和滚动条的高度度) div.scrollWidth---返回div中实际的高度(带滚动的高度) div.scrollHeight---返回div中实际的高度(带滚动的高度) ---详细分析见: http://images13.51.com/18/a/f8/40/sarten/1192242772_0.70754000.jpg IE:setCapture和releseCapture FF:captureEvents和releaseEvents setCapture主要是为某个对象或页面绑定一个事件,这个时间的主要目的就是为了能够在整个窗口下都可以起做用:比如下面的代码: <script type="text/javascript" defer> document.getElementById("xx").setCapture() </script> <div id="xx">hello</div> 这样就可以在页面中任何部位单击一次就可以弹出hello。。。 ff下和ie下的理解不一样,可以这样理解:(用上例子讲解) ie是对某个特定对象xx进行全屏捕捉,当设定setCapture时候,就可以在全屏捕捉到xx。。。单击的时候也会执行xx设定的单击执行的事件(函数)。。。可以全屏获取鼠标的位置 而ff中只是window.captureEvents...作用域是对整个页面(只是可以全屏获取鼠标的位置) creatElement(为页面创建对象) appendChild(为页面应用某个创建的对象) 例子1:在页面中创建一个table要求有一个单元格,一行,一个table文字 <script language="javascript" defer> var tb=document.createElement("table") var tbd=document.createElement("tbody") var tr=document.createElement("tr") var td=document.createElement("td") var txt=document.createTextNode("table") td.appendChild(txt) tr.appendChild(td) tbd.appendChild(tr) tb.appendChild(tbd) document.body.appendChild(tb)//对应下面两行 </script> <div id="tt"></div>//在指定的div中应用:document.getElementById("tt").appendChild(tb) 例子2:创建一个input对象radio,默认选中 <script type="text/javascript" defer> var pt=document.createElement("input") pt.type="radio"//写在对象创建之后 document.body.appendChild(pt) pt.checked="checked"//pt.setAttribute("checked",true) </script> text/radio/checkbox/file/hidden/submit/button/reset的创建都是和上例差不多, 需要注意的是:必须将.type写在紧跟对象创建之后,然后应用,在之后设置属性(也可以用setAttibute) 例子3:创建一个select对象 <script lanuguage="javascript" defer> var se=document.createElement("select") se.options[0]=new Option("123","123") se.options[1]=new Option("456","456") se.options[2]=new Option("789","789") document.body.appendChild(se) se.setAttribute("id","cre_se") se.onchange=function(){ alert(se.options[document.getElementById('cre_se').selectedIndex].value) } </script> createPopup:创建一个提示框(也相对于一个页面,当popup失去焦点的时候---popup消失) <script type="text/javascript" defer> var pp=window.createPopup() pp.document.body.style.background="#efefef" pp.document.body.style.border="1px solid black" pp.document.body.innerHTML="this is a popup" pp.show(10,20,250,20,document.getElementById("popup_div")) </script> <div id="popup_div" style="width:500px;height:50px;position:absolote;top:50px;left:50px;background:red"></div> ff下的添加收藏夹: window.sidebar.addpanel("百度","http://www.baidu.com","") ie下的添加收藏夹 window.external.addfavorite("http://www.baidu.com","百度") 滚动到页面指定位置:scrollIntoView() 例子: <a href="#" id="xx">内容</a><br> <a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br><a href="#">内容</a><br> <a href="javascript:document.getElementById('xx').scrollIntoView()">内容</a><br> 相当于: <a name="top">top</a> <a href="#top">go_top</a> createTextRange()//ie专有 例子1:(主要说明:textrange.text和textrange.htmltext的区别) <script language="javascript" defer> function test() { var rng=document.body.createTextRange() alert(rng.text) } function test1() { var rng=document.body.createTextRange() alert(rng.htmlText) } </script> <input type="button" value="text"> <input type="button" value="htmlText"> //如果为某个对象创建textrange的话,,,text和htmlText是没有区别的 如果是为整个body创建的话是有区别的(text表示文本内容,htmlText把整个页面代码输出) 例子2:获取指定文本框中的选中的文字:只响应先进个文本框 <script language="javascript" defer> function test() { var o = document.getElementById("inp1").createTextRange()//改为inp2的话就不响应了 var r = document.selection.createRange()//为选中的文字创建一个虚礼空间存起来(也是一个对象) if(o.inRange(r)){//在已经创建的textrange中查找range对象(createtextRange.inRange(createRange)) alert(r.text)//弹出createRange的文本createRange.text } } </script> <input id="inp1" type="text" value="1234567890"> <input id="inp2" type="text" value="1234567890"> <input type="button" value="确定"> 例子3:点击复制功能: <script language="javascript"> function copyContent(obj){ obj.select() var cont=obj.createTextRange() cont.execCommand("copy") //或者这样写: //obj.select() //obj.document.execCommad("copy") } </script> <input type="text" value="what you want to copy !" > iframe允许背景颜色为透明: <iframe src="xx.html" allowtransparency="true"> //xx.html中必须这样写:<body bgColor="transparent"> ie:window.eval("ID")//用来获取页面中id的对象,相当于document.getElementById("id") ff:window.eval("alert('xx')","javascript")//执行js代码,也可以执行asp代码 ie:window.execScript("alert('xx')","javascript")//执行js代码,也可以执行asp代码 文本框不自动提示: <input type="text" autocomplete="off"> 隐藏按钮点击时的虚线: <input type="button" hidefocus="hidefocus" value="按钮"> <input type="button" onfocus="this.blur()" value="按钮"> 脚本永不提示出错: <script language="javascript"> window.onerror=function(){ return false } </script> 事件对象返回值: srcElement.returnVlaue="false/true" 通过id获取某个对象: 通用:document.getElementById("idname") ie:window.eval("idname") 通过name获取对象 document.getElementsByName("name") 通过tagname获取对象 document.getElementsByTagName("tagname") 通过事件获取对象: window.event.srcElement//是一个对象 window.event.srcElement.tagName//获取到的对象的标签名 父标签: obj.parentNode()(dom) obj.parentElement(dhtml) 子对象: obj.childNodes() 鼠标位置: 1:绝对的body位置: ie:event.clientX event.clientY ff:event.clientX event.clientY 2:相对的body位置: ie:event.x event.y ff:event.pageX event.pageY 3:绝对的鼠标body中停留的位置: ie:event.offsetX event.offsetY ff:event.layerX event.layerY 4:整个页面绝对位置: screen.x screen.y 例子:动态获取鼠标在页面中的坐标位置 <script language="javascript"> function movemouse(evt){ evt=evt?evt:window.event var x=evt.clientX var y=evt.clientY document.getElementById("con").innerHTML="x: "+x+"y: "+y document.getElementById("con").style.left=x+"px" document.getElementById("con").style.top=y+"px" } document.onmousemove=movemouse </script> <div id="con" style="position:absolute;height:20px;width:100px;"></div> 类似:动态时间 <script language="javascript"> function aa(){ var date=new Date() document.body.innerHTML=date.toLocaleString() setTimeout("aa()",1000) } window.onload=aa </script> 双击滚屏代码: <script language="javascript"> scrollTo(0,0) var st function scroll_start(){ var x=document.body.scrollTop window.scroll(0,++x) st=setTimeout("scroll_start()",10)//不能写出var st=... if(x!=document.body.scrollTop){ stop_scroll() } } function stop_scroll(){ clearTimeout(st) } document.onmousedown=stop_scroll document.ondblclick=scroll_start </script> 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 页面中鼠标操作: oncontextmenu//右键 onselectstart//选中 oncopy//复制 onpaste//粘贴 oncut//剪切 ondragstart//拖动 窗体图片 document.images[索引] 窗体元素 document.窗体.elements[索引] 浏览器名称 document.navigator.appName document.navigator.plugins 转向制定页面: window.navigate("") window.location.href="" 符合标准的去除链接虚线两种方式: 1:通过links(窗体链接) <script type="text/javascript"> function aa(){ for(i=0;i<document.links.length;i++){ document.links[i].onfocus=function(){ this.blur() } } } window.onload=aa </script> 2:通过链接a对象 <script language="javascript"> aa=function(){ var obj=document.getElementsByTagName("a") for(i=0;i<obj.length;i++){ obj[i].onfocus=function qq(){ this.blur() } } } window.onload=aa </script> 文本值改变的时候: <input type="text" onpropertychange="alert('值改变了')"> 窗口的父对象: window.opener 框架的父对象: window.parent 给文本增加链接: <script language="javascript" defer> var text="百度" text=text.link("http://www.baidu.com") document.write(text) </script> ////////////////////////////实例: <script language="javascript" defer> var pic="<img src=''>" pic=pic.link("http://www.baidu.com") document.write(pic) </script> 获取css样式表 document.stylesheets[索引].rules[索引]//获取第几个<style type="text/css"></style>里的第几个样式 document.stylesheets[索引].rules[索引].selectorText//获取css样式名称 document.stylesheets[索引].rules[索引].style.cssText//获取css样式内容 例子: <style> body {color:red} p {color:blue} </style> <style> span {color:red} table {color:blue} </style> <body > 页面z坐标(z-index)://对象的z-index坐标必须在absolute情况下才能起作用 例子: <style type="text/css"> #pagea { width:200px; height:200px; position:absolute; left:100px; top:100px; background:red } #pageb { width:200px; height:200px; position:absolute; left:200px; top:200px; background:black; } </style> <script type="text/javascript"> var firstIndex=1 function zIndexChange(obj){ document.getElementById(obj).style.zIndex=firstIndex firstIndex++ } </script> <div id="pagea" >页面a</div> <div id="pageb" >页面b</div> 按住鼠标左键N秒执行: <script language="javascript"> var timerAl function al(){ alert("您按住鼠标2秒没动!请放松,谢谢!") } document.onmousedown=function(){ timerAl=setTimeout("al()",2000)//此处一定不能加var ,加了表示每次执行的时候都从新声明 } document.onmouseup=function(){ clearTimeout(timerAl) } </script> 本地实现图片现实: <script language="javascript"> function getError(){ imgdiv.innerHTML='' alert("格式错误或者不存在这个文件") } function checkSize(obj){ var w=obj.clientWidth var h=obj.clientHeight if(w>164){ obj.width=164 obj.heigth=164/w*h } } function showImg(filesrc){ imgdiv.innerHTML="<img id='tu' src='file:///"+filesrc+"' onerror='getError()' onload='checkSize(this)'>" } </script> <input type="file" size=25 onchange="showImg(this.value)"><br><br><br><br> <div id="imgdiv" align="center"></div> 表格的相关操作: 1:左右移动表格行:(表格外) <script language="javascript"> function tb1doTr(obj){ var tr=document.createElement("<tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb2doTr(this)'></tr>") var td1=document.createElement("<td align='center'></td>") var td2=document.createElement("<td align='center'></td>") var text1=document.createTextNode(obj.cells[0].innerHTML) var text2=document.createTextNode(obj.cells[1].innerHTML) td1.appendChild(text1) td2.appendChild(text2) tr.appendChild(td1) tr.appendChild(td2) document.getElementById("tb2_tbody").appendChild(tr) document.getElementById("tb1").deleteRow(obj.rowIndex) } function tb2doTr(o){ tr=document.getElementById("tb1").insertRow() tr.bgColor="#efefef" tr.onmouseover=function(){this.bgColor="#efef00"} tr.onmouseout=function(){this.bgColor="#efefef"} tr.onclick=function(){tb1doTr(this)} for(i=0;i<o.cells.length;i++){ var td=tr.insertCell() td.innerHTML=o.cells[i].innerHTML } document.getElementById("tb2").deleteRow(o.rowIndex) } </script> <table cellpadding="0" cellspacing="0" border="1" width="300" id="tb1" style="float:left;text-align:center"> <tr> <td bgcolor="#efefef" align="center">行</td> <td bgcolor="#efefef" align="center">值</td> </tr> <script type="text/javascript"> for(i=1;i<=20;i++){ document.write("<tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb1doTr(this)'><td align='center'>第"+i+"行</td><td align='center'>第"+i+"行的值</td></tr>") } </script> </table> <table cellpadding="0" cellspacing="0" border="1" width="300" id="tb2" style="text-align:center"> <tbody id="tb2_tbody"> <tr> <td bgcolor="#efefef" align="center">行</td> <td bgcolor="#efefef" align="center">值</td> </tr> </tbody> </table> 2:移动表格行的位置(表格内) 单击文字保存图片: <iframe height="0" width="0" src="偷拍的.jpg" id="saveImage"></iframe> <a href="###" >Click Me</a> //这里千万不能写出:document.getElementById('saveImage') 单元格颜色渐退: <script type="text/javascript"> var m=60 function changeColor(){ var obj=document.getElementById("tb1") obj.bgColor="rgb(100%,"+m+"%,100%)" m+=5 var st=setTimeout("changeColor()",10) if(m>100){ clearTimeout(st) m=60 obj.bgColor="#efefef" } } </script> <table cellpadding=0 cellspacing=0 width=100 border=0> <tr><td bgcolor="#efefef" onmouseout="changeColor()" id="tb1"> </td></tr> </table> 常识: <a href="#"></a> <a href="html.exe"></a> <a href="mailto:icyzhl@163.com?cc=icyzhl@126.com&subject='你好'&body='你好啊'"></a> <a href="#ffff"></a> <a name="ffff"></a> <a href="javascript:alert('你好')"></a> <a href="####"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(null)"></a> <a href="javascript:;"></a> <a href="#" ></a> <span style="cursor:hand"></span> a:link {font-size:12px;color:red;text-decoration:none;font-style:italic} a:link {font-size:14px;color:red;font-weight:normal;text-decoration:underline;font-style:normal} a:link {font-size:12px;font-family:华文行楷;font-weight:bolder;color:red;text-decoration:overline} style="writing-mode:tb-rl" style="writing-mode:lr-tb" <form> <select onchange="document.body.style.background=this.options[this.selectedIndex].value"> <option value=url(1.jpg)>背景1 <option value=url(2.jpg)>背景2 <option value=url(3.jpg)>背景3 </select></form> 调用css favicon <link href="" rel="shortcut icon"> <link href="" rel="bookmark"> <link href="css文件地址" rel="stylesheet"> <style type="text/css"> 在此写css </style> <span style="css样式内容"></span> <style style="text/css"> @import url("") </style> text-decoration:none text-decoration:overline text-decoration:underline text-underline-position:above/below(IE专有属性) text-decoration:line-through text-transform:uppercase/lowercase/capitalize font-size:大小 font-family:字体 font-style:normal/italic font-weight:normal/bold/bolder/lighter line-height:120% writing-mode:tb-rl/lr-tb text-indent:?px 综合 font:样式 变形 加粗 字号/行高 字体 example----font:italic bold 12px/120% 华文行楷 定义 调用 .css1 {} class=css1 #css2 {} id=css2 table {} 说明table 中的所有属性 table#css1 {} table中的所有css1都有这个属性 id=css1 table.css1 {} table中的所有css1都有这个属性 class=css1 body,table,input {} table和body和input都有这个属性 table #css1 table中其他标签拥有的属性 <table>...<span id=css1 table .css1 table中其他标签拥有的属性 <table>...<span class=css1 image: vaspace hspace width heigth dynsrc src lowsrc alt form : input type="text/password/radio/checkbox/sunmit/file/hidden/botton" select option textarea font: i b u strike < > & " ® © 在网页中加入html代码只要在代码前后加入:<xmp>和</xmp>就可以了 size color basefont color:red;... base href="" base target="_top" table td tr: align=center/right/left leftmargin topmargin cursor oncontextmenu ondragstart oncopy oncut onpaste onselectstart bgcolor background width heigth id cellpadding cellspacing border bgsound: loop=-1/infinite balance volume autostart marquee: direction:up/down/left/right align:center/right/left/right behavior:scroll slide alternate vspace hspace height width bgcolor scrolldelay scrollamount <span title="你好">你好</span> <span onmouseout="window.status=''" style="cursor:hand"></span> favicon.icon <link href="" rel="shortcut icon"> oncontextmenu="return false" ondraystart="return false" onselectstart="return false" oncopy="return false" onpaste="return false" oncut="return false" <meta name="description" content="内容" <meta name="keywords" conternt="内容" <meta name="author" content="张虹亮" <meta http-equiv="page-enter" content="revealtrans(duration='3';transition='23')" <meta http-equiv="page-exit" content="revealtrans(duration='3';transition='23')" <meta http-equiv="content-type" content="text/html;charset=gb2312" 取消表单按下时的虚线 <input type=radio hidefocus=true name=sex>你好 <input type=radio name=sex onfocus="this.blur()">你不好 加入收藏: <form> <input type="submit" ></form> a的全写:anchor <base target="_top">防止点击链接时新窗口都是在顶部打开 <p><br>比<br><p>多一行 如何让网页中的广告自动关闭: ---在网页广告条的网页head和/head中加入: <script language="javascript"> function close(){ setTimeout("self.close()",5000) }//本网页自动在5秒钟关闭 </script> 或者: function close(){ self.close() } setinterval("close()",5000) </script> frameset frame iframe: border bordercolor src name rows cols framespacing frameborder flash透明: <param name="wmode" value="transparent"> 半透明的表格: <table cellpadding=0 cellspacing=0 width=200 height=100><tr><td style="background-color:red;filter:alpha(opacity=20)"> </td></tr></table> 阴影表格: <div style="filter:shadow(color=red,direction=120);width=200;padding-right:10;padding-bottom:10"> <table cellpadding=0 cellspacing=0 width=200 height=100 bgcolor=red><tr><td> </td></tr></table></div> 特色的表单: <form> <input type="button" value="空的" disabled> <input type="text" value="520" readonly> <input type="text" size=30 style="border-top:1px dashed red;border-bottom:1px dashed black;border-right:1px dashed blue;border-left:1px dashed orange;" </form> <embed src="" width height> <bgsound src="" loop=-1/infinite autostart=false/true> <param name="wmode" value="transparent"> 背景更换效果 <style type="text/css"> .css1 {background-image:url("1.jpg")} .css2 {background-image:url("2.jpg")} </style> <table><tr><td onmouseout="this.className='css1'" >sage</td></tr></table> 关闭网页 <script language="javascript"> function closewindow(){ window.opener=null window.close() } </script> 调用:<form><input type="button" ></form> 鼠标指向时变背景颜色的表格 <table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td onmouseout="this.bgColor='#333333'" bgcolor="#ffffff"></td></tr></table> 细线表格1: <table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td bgcolor="#fffff"></td></tr></table> 细线表格2: <table border=1 bordercolor="#000000" width=100 height=20><tr bordercolor="#ffffff"><td></td></tr></table> 细线表格3: <input type="text" size=12 readonly="readonly"> <input type="text" size=12 disabled="disabled"> 凹下的立体表格: <table width="100" border="1" cellspacing="1" cellpadding="0" bgcolor=red> <tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr> <tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr> <tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr> </table> 凸出的立体表格: <table width="100" border="1" cellspacing="0" cellpadding="0" bordercolorlight=#333333 bordercolordark=#efefef> <tr><td bgcolor="#FF0000"> </td><td bgcolor="#FF0000"> </td></tr> <tr><td bgcolor="#FF0000"> </td><td bgcolor="#FF0000"> </td></tr> <tr><td bgcolor="#FF0000""> </td><td bgcolor="#FF0000"> </td></tr> </table> 有间距的表格: <table width="100" border="1" cellspacing="5" cellpadding="0" bgcolor=gray> <tr><td bgcolor="#999999"> </td></tr> </table> <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 <input style="ime-mode:disabled"> 关闭中文输入法 防止别人frame你的网页: <script language="javascript"> if(top.location!=self.location){ top.location=self.location } </script> 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 7. <input style="ime-mode:disabled"> 关闭输入法 8. 永远都会带着框架 <script language="JavaScript"><!-- if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 // --></script> 9. 防止被人frame <SCRIPT LANGUAGE=JAVASCRIPT><!-- if (top.location != self.location)top.location=self.location; // --></SCRIPT> 10. 网页将不能被另存为 <noscript><iframe src=*.html></iframe></noscript> 11. <input type=button value=查看网页源代码 > 12.删除时确认 <a href='javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"'>删除</a> <a href="return confirm("确认删除吗?")" 13. 取得控件的绝对位置 //Javascript <script language="Javascript"> function getIE(e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } alert("top="+t+"/nleft="+l); } </script> //VBScript <script language="VBScript"><!-- function getIE() dim t,l,a,b set a=document.all.img1 t=document.all.img1.offsetTop l=document.all.img1.offsetLeft while a.tagName<>"BODY" set a = a.offsetParent t=t+a.offsetTop l=l+a.offsetLeft wend msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置" end function --></script> 14. 光标是停在文本框文字的后 <script language="javascript"> function cc() { var e = event.srcElement; var r =e.createTextRange(); r.moveStart('character',e.value.length); r.collapse(true); r.select(); } </script> <input type=text name=text1 value="123" onfocus="cc()"> 15. 判断上一页的来源 javascript:document.referrer 16. 小化、大化、关闭窗口 <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object> <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" VALUE="Close"></OBJECT> <input type=button value=小化 onclick=hh1.Click()> <input type=button value=大化 onclick=hh2.Click()> <input type=button value=关闭 onclick=hh3.Click()> 本例适用于IE 17.屏蔽功能键Shift,Alt,Ctrl <script> function look(){ if(event.shiftKey) alert("禁止按Shift键!"); //可以换成ALT CTRL } document.onkeydown=look; </script> 18. 网页不会被缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者<META HTTP-EQUIV="expires" CONTENT="0"> 19.怎样让表单没有凹凸感? <input type=text style="border:1 solid #000000"> 或 <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea> 20.<div><span>&<layer>的区别? <div>(division)用来定义大段的页面元素,会产生转行 <span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行 <layer>是ns的标记,ie不支持,相当于<div> 21.让弹出窗口总是在后面: <body onblur="this.focus();"> 22.不要滚动条? 让竖条没有: <body style='overflow:scroll;overflow-y:hidden'> </body> 让横条没有: <body style='overflow:scroll;overflow-x:hidden'> </body> 两个都去掉?更简单了 <body scroll="no"> </body> 23.怎样去掉图片链接点击后,图片周围的虚线? <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a> 24.电子邮件处理提交表单 <form name="form1" method="post" action="mailt****@***.com" enctype="text/plain"> <input type=submit> </form> 25.在打开的子窗口刷新父窗口的代码里如何写? window.opener.location.reload() 26.如何设定打开页面的大小 <body > 打开页面的位置<body > 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 <STYLE> body {background-image:url(logo.gif); background-repeat:no-repeat; background-position:center;background-attachment: fixed} </STYLE> 28. 检查一段字符串是否全由数字组成 <script language="Javascript"><!-- function checkNum(str){return str.match(//D/)==null} alert(checkNum("1232142141")) alert(checkNum("123214214a1")) // --></script> 29. 获得一个窗口的大小 document.body.clientWidth; document.body.clientHeight 30. 怎么判断是否是字符 if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"); else alert("全是字符"); 31.TEXTAREA自适应文字行数的多少 <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> </textarea> 32. 日期减去天数等于第二个日期 <script language=Javascript> function cc(dd,dadd) { //可以加上错误处理 var a = new Date(dd) a = a.valueOf() a = a - dadd * 24 * 60 * 60 * 1000 a = new Date(a) alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日") } cc("12/23/2002",2) </script> 33. 选择了哪一个Radio <HTML><script language="vbscript"> function checkme() for each ob in radio1 if ob.checked then window.alert ob.value next end function </script><BODY> <INPUT name="radio1" type="radio" value="style" checked>Style <INPUT name="radio1" type="radio" value="barcode">Barcode <INPUT type="button" value="check" > </BODY></HTML> 34.脚本永不出错 <SCRIPT LANGUAGE="JavaScript"> <!-- Hide function killErrors() { return true; } window.onerror = killErrors; // --> </SCRIPT> 35.ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9"> window.event.returnvalue="false" window.event事件可以返回值,,, window.event.srcElement.returnValue="" 例子:<body ontextmenu="window.event.returnvalue='false'">//禁止鼠标右键 判断上一页的来源:javascript:document.referrer; 让网页不被别人 iframe: <script> if(top.location!=self.location){ top.location=self.location } </script> 让页面打开大化: <script> window.resizeTo(screen.width,screen.height) window.moveTo(0,0) //相关函数:window.moveTo,window.moveBy,window.resizeTo,window.resizeTo </script> javascipt相关对象: math.max(x,y) math.min(x,y) math.ceil(x) math.floor(x) math.sqrt(x) math.round(x,y) math.random() var qq=new Date() qq.getYear() qq.getFullYear() qq.getMonth() qq.getDay() qq.getDate() qq.getHours() qq.getMinutes() qq.getSeconds() qq.getMilliSeconds() qq.getTime() string.link() string.fontsize() string.fontcolor() string.bold() string.sup()/上标 string.sub()/下标 string.toUpperCase() string.toLowerCase() string.Indexof() string.charAt() string.charCodeAt() string.substr() string.substring() string.fromCharCode() string.search() 链接a的全写:anchor 在html和xml中相关字符引用: ' ' & & " " < < > > 如果要在html网页中加入html标签代码(大量),加<xmp></xmp> iframe控制父窗口:window.parent. 父窗口控制子页面:window.子页面名称 用js保护网页中邮箱: <script> name="icyzhl" witch="163" document.write("<a href='mailto:"+icyzhl+"@"+witch+".com+"'>") docuemnt.write("</a>") </script> marquee标记用法: vspace; hspace; direction:up/left/right/down; behavior:slide/scroll/alternate; bgcolor; scrolldelay; scrollamount; bgsound:infinite/loop=-1 autostart src 符合标准的打开新窗口 <script> var anchors=document.getElementsByTagName("a") for(i=0;i<anchors.length;i++){ obj=anchors[i] if(obj.getAttribute("href") && obj.getAttribute("rel")=="external"){ obj.target="_blank" } } </script> textarea自动高度 <textarea style="overflow-y:visible"> sdagdsg文字内容 </textarea> 隐藏表单按下的虚线; <input type="radio" hidefocus="hidefocus"> <input type="radio" onfocus="this.blur()"> 只读文本: <input type="text" value="xagd" disabled="disabled"> <input type="text" value="xagd" readonly="readonly"> 文本值发生改变: <input type="text" onpropertychange="alert('xx')"> 不能为中文: <input type="text" style="ime-mode:disabled"> 收藏夹个性图标: <link rel="ShortCut Icon" href="favicon.ico"////favorite 以上div+css技巧和javascript技巧如果大家有什么意见可以联系我本人哈. QQ:499375381