合肥網(wǎng)站建設(shè)
文章閱讀
網(wǎng)建技巧
優(yōu)化技巧
網(wǎng)建問題
謹(jǐn)宸新聞
行業(yè)新聞

首頁 > 合肥網(wǎng)站建設(shè) > 正文

貢獻(xiàn)05年學(xué)習(xí)javascript和div+css時(shí)候總結(jié)的一些小技巧

發(fā)布時(shí)間:2011/05/05字體:
摘要:貢獻(xiàn)05年學(xué)習(xí)javascript和div+css時(shí)候總結(jié)的一些小技巧,javascript和div+css小技巧,由于工作和分享熱情,本人在此貢獻(xiàn)出05年學(xué)習(xí)javascript和div+css時(shí)候總結(jié)的一些小技巧,希望大家在學(xué)習(xí)javascript和div+css的時(shí)候有些技巧總結(jié),如果不

IE:
FF:

和flash透明一樣:
IE:
FF:


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()的區(qū)別:








----------ie中獲取的是id的obj(但包括name為radio checkbox等項(xiàng)),ff中獲取的只是name項(xiàng)



這中思想蠻不錯(cuò)的:
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彈出鏈接文本內(nèi)容

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[i].onmouseover=altername
}
}

baidu

google

blueidea

crsky
//主要考察event.srcElement和evt.target


js用for in 遍歷整個(gè)數(shù)組:
for(i in aa){
    document.write(i)
}
js用toLocaleString()獲取整個(gè)時(shí)間:
例子:
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()
數(shù)組的定義 :
一維:
方案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中定義數(shù)組:
dim aa(3)
aa(0)=""
aa(1)=""
aa(2)=""

IE:attachEvent
    例如在body中單擊的時(shí)候彈出”你好“,我們可以這么做
首先定義一個(gè)函數(shù):
    function alert_hello(){
        alert("你好")
    }
綁定:
    document.body.attachEvent("onclick",alert_hello)
需要注意的是:
    1:在綁定的時(shí)候一定不能這樣寫:alert_hello()
    2:最好在外部定義alert_hello這個(gè)函數(shù)
如果在內(nèi)部定義則:document.body.attachEvent("onclick",function(){"alert('hello')"})

FF:addEventListener
    同樣實(shí)現(xiàn)在IE中的效果的時(shí)候這樣做即可:
定義:
    function alert_hello(){
        alert("你好")
    }
綁定:
    document.body.addEventListener("click",alert_hello,false)

以下為一個(gè)對象綁定:(ff和ie中都需要:div必須寫在前面,如果是ie,這個(gè)時(shí)候把div放在后面的話,可以在聲明語言的時(shí)候加入defer)
hello


function aa(){
?????? alert("hello")
}
document.getElementById("xx").addEventListener("click",aa,false)


IE和FF中的區(qū)別:
1:如果要執(zhí)行的函數(shù)不止一個(gè),例如:
        document.body.attachEvent("onclick",aa1)
        document.body.attachEvent("onclick",aa2)
        document.body.attachEvent("onclick",aa3)
    即:body要同時(shí)綁定aa1,aa2,aa3這個(gè)三個(gè)函數(shù),
這個(gè)時(shí)候,IE和FF中的解釋循序是不一樣的,
    ie:aa1,aa2,aa3
    ff:aa3,aa2,aa1
2:在ie中是要寫全時(shí)間名:例如,onclick,而ff中只要寫click即可。。。
3:ie中綁定的時(shí)候比ff少一個(gè)參數(shù),區(qū)別如下代碼:

#aa {
??? width:500px;
??? height:500px;
??? background:red;
}
#qq {
??? width:200px;
??? height:200px;
??? background:black;
}

d
d



function al(){
?????? alert("hello")
}
document.getElementById("aa").addEventListener("click",al,true)
//試試false和true的區(qū)別




HTML頁面標(biāo)準(zhǔn)排版:
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出現(xiàn)滾動(dòng)條時(shí)候的實(shí)際長度,當(dāng)沒有滾動(dòng)條的時(shí)候body.scollWidth和body.clientWidth是相等的
(IE和FF中兩者是相反的概念)
body.clientHeight  //同上
body.offsetHeight  //同上
body.scrollHeight //同上

div.style.border---div中的border(有兩個(gè)參數(shù):width,height)
div.style.padding---div中padding的值
div.style.left---div距離頁面左邊的距離(這個(gè)參數(shù)有三個(gè)類似的寫法:具體如下:(先要明白.style.left返回的值是一個(gè)字符串,如果沒有,返回空串)
1:div.style.posLeft---就是將left的值轉(zhuǎn)化為數(shù)值類型,而且是浮點(diǎn)型
2: div.style.pixelLeft---是數(shù)值,是將left的值(如果是空串則賦為0)轉(zhuǎn)化為像素值
    注意;parseInt(posLeft)==pixelLeft
3: div.offsetLeft---返回對象距離窗口左邊的距離(帶邊框+padding)
ff中是沒有1,2兩個(gè)參數(shù)的,要應(yīng)用的話一般統(tǒng)一用offsetLeft
offsetLeft通常用于取值,而left則應(yīng)用于賦值計(jì)算
例如:先通過offsetLeft取到div距離頁面的距離x,然后在通過div.style.left=x+10+"px"將div往右移動(dòng)10個(gè)PX,而在實(shí)際應(yīng)用的時(shí)候一定要加上"px"(因?yàn)閘eft的返回值為字符串)
)
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和滾動(dòng)條的寬度)
div.clientHeight---返回div高度(包括padding,不包括border和滾動(dòng)條的高度度)

div.scrollWidth---返回div中實(shí)際的高度(帶滾動(dòng)的高度)
div.scrollHeight---返回div中實(shí)際的高度(帶滾動(dòng)的高度)
---詳細(xì)分析見:
http://images13.51.com/18/a/f8/40/sarten/1192242772_0.70754000.jpg



IE:setCapture和releseCapture
FF:captureEvents和releaseEvents
setCapture主要是為某個(gè)對象或頁面綁定一個(gè)事件,這個(gè)時(shí)間的主要目的就是為了能夠在整個(gè)窗口下都可以起做用:比如下面的代碼:

??? document.getElementById("xx").setCapture()

hello

這樣就可以在頁面中任何部位單擊一次就可以彈出hello。。。

ff下和ie下的理解不一樣,可以這樣理解:(用上例子講解)
ie是對某個(gè)特定對象xx進(jìn)行全屏捕捉,當(dāng)設(shè)定setCapture時(shí)候,就可以在全屏捕捉到xx。。。單擊的時(shí)候也會執(zhí)行xx設(shè)定的單擊執(zhí)行的事件(函數(shù))。。??梢匀莲@取鼠標(biāo)的位置

而ff中只是window.captureEvents...作用域是對整個(gè)頁面(只是可以全屏獲取鼠標(biāo)的位置)



creatElement(為頁面創(chuàng)建對象)
appendChild(為頁面應(yīng)用某個(gè)創(chuàng)建的對象)
例子1:在頁面中創(chuàng)建一個(gè)table要求有一個(gè)單元格,一行,一個(gè)table文字

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)//對應(yīng)下面兩行

//在指定的div中應(yīng)用:document.getElementById("tt").appendChild(tb)

例子2:創(chuàng)建一個(gè)input對象radio,默認(rèn)選中

var pt=document.createElement("input")
pt.type="radio"http://寫在對象創(chuàng)建之后
document.body.appendChild(pt)
pt.checked="checked"http://pt.setAttribute("checked",true)

text/radio/checkbox/file/hidden/submit/button/reset的創(chuàng)建都是和上例差不多,
需要注意的是:必須將.type寫在緊跟對象創(chuàng)建之后,然后應(yīng)用,在之后設(shè)置屬性(也可以用setAttibute)

例子3:創(chuàng)建一個(gè)select對象

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)
}




createPopup:創(chuàng)建一個(gè)提示框(也相對于一個(gè)頁面,當(dāng)popup失去焦點(diǎn)的時(shí)候---popup消失)

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"))




ff下的添加收藏夾:
window.sidebar.addpanel("百度","http://www.baidu.com","")
ie下的添加收藏夾
window.external.addfavorite("http://www.baidu.com","百度")


滾動(dòng)到頁面指定位置:scrollIntoView()
例子:
內(nèi)容

內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容
內(nèi)容

內(nèi)容


相當(dāng)于:
top
go_top


createTextRange()//ie專有
例子1:(主要說明:textrange.text和textrange.htmltext的區(qū)別)

function test()
{
var rng=document.body.createTextRange()
alert(rng.text)
}
function test1()
{
var rng=document.body.createTextRange()
alert(rng.htmlText)
}



//如果為某個(gè)對象創(chuàng)建textrange的話,,,text和htmlText是沒有區(qū)別的
如果是為整個(gè)body創(chuàng)建的話是有區(qū)別的(text表示文本內(nèi)容,htmlText把整個(gè)頁面代碼輸出)


例子2:獲取指定文本框中的選中的文字:只響應(yīng)第一個(gè)文本框

function test()
{
var o = document.getElementById("inp1").createTextRange()//改為inp2的話就不響應(yīng)了
var r = document.selection.createRange()//為選中的文字創(chuàng)建一個(gè)虛禮空間存起來(也是一個(gè)對象)
if(o.inRange(r)){//在已經(jīng)創(chuàng)建的textrange中查找range對象(createtextRange.inRange(createRange))
??? alert(r.text)//彈出createRange的文本createRange.text
??? }
}






例子3:點(diǎn)擊復(fù)制功能:

function copyContent(obj){
??? obj.select()
??? var cont=obj.createTextRange()
??? cont.execCommand("copy")
//或者這樣寫:
//obj.select()
//obj.document.execCommad("copy")
}



iframe允許背景顏色為透明:
<br /> //xx.html中必須這樣寫:<body bgColor="transparent"><br /> <br /> ie:window.eval("ID")//用來獲取頁面中id的對象,相當(dāng)于document.getElementById("id")<br /> ff:window.eval("alert('xx')","javascript")//執(zhí)行js代碼,也可以執(zhí)行asp代碼<br /> ie:window.execScript("alert('xx')","javascript")//執(zhí)行js代碼,也可以執(zhí)行asp代碼<br /> <br /> 文本框不自動(dòng)提示:<br /> <input type="text" autocomplete="off"><br /> <br /> 隱藏按鈕點(diǎn)擊時(shí)的虛線:<br /> <input type="button" hidefocus="hidefocus" value="按鈕"><br /> <input type="button" onfocus="this.blur()" value="按鈕"><br /> <br /> 腳本永不提示出錯(cuò):<br /> <script language="javascript"><br /> window.onerror=function(){<br />     return false<br /> }<br /> </script><br /> <br /> 事件對象返回值:<br /> srcElement.returnVlaue="false/true"<br /> <br /> 通過id獲取某個(gè)對象:<br /> 通用:document.getElementById("idname")<br /> ie:window.eval("idname")<br /> <br /> 通過name獲取對象<br /> document.getElementsByName("name")<br /> <br /> 通過tagname獲取對象<br /> document.getElementsByTagName("tagname")<br /> <br /> 通過事件獲取對象:<br /> window.event.srcElement//是一個(gè)對象<br /> window.event.srcElement.tagName//獲取到的對象的標(biāo)簽名<br /> <br /> 父標(biāo)簽:<br /> obj.parentNode()(dom)<br /> obj.parentElement(dhtml)<br /> 子對象:<br /> obj.childNodes()<br /> <br /> 鼠標(biāo)位置:<br /> 1:絕對的body位置:<br /> ie:event.clientX  event.clientY<br /> ff:event.clientX  event.clientY<br /> <br /> 2:相對的body位置:<br /> ie:event.x  event.y<br /> ff:event.pageX  event.pageY<br /> <br /> 3:絕對的鼠標(biāo)body中停留的位置:<br /> ie:event.offsetX  event.offsetY<br /> ff:event.layerX  event.layerY<br /> <br /> 4:整個(gè)頁面絕對位置:<br /> screen.x          screen.y<br /> <br /> 例子:動(dòng)態(tài)獲取鼠標(biāo)在頁面中的坐標(biāo)位置<br /> <br /> <script language="javascript"><br /> function movemouse(evt){<br />     evt=evt?evt:window.event<br />     var x=evt.clientX<br />     var y=evt.clientY<br /> document.getElementById("con").innerHTML="x: "+x+"y: "+y<br /> document.getElementById("con").style.left=x+"px"<br /> document.getElementById("con").style.top=y+"px"<br /> <br /> }<br /> document.onmousemove=movemouse<br /> </script><br /> <div id="con" style="position:absolute;height:20px;width:100px;"></div><br /> <br /> 類似:動(dòng)態(tài)時(shí)間<br /> <script language="javascript"><br /> function aa(){    <br />     var date=new Date()<br />     document.body.innerHTML=date.toLocaleString()<br />     setTimeout("aa()",1000)<br /> }<br /> window.onload=aa<br /> </script><br /> <br /> 雙擊滾屏代碼:<br /> <script language="javascript"><br /> scrollTo(0,0)<br /> var st<br /> function scroll_start(){<br /> var x=document.body.scrollTop<br /> window.scroll(0,++x)<br /> st=setTimeout("scroll_start()",10)//不能寫出var st=...<br /> if(x!=document.body.scrollTop){<br /> stop_scroll()<br /> }<br /> }<br /> function stop_scroll(){<br /> clearTimeout(st)<br /> }<br /> document.onmousedown=stop_scroll<br /> document.ondblclick=scroll_start<br /> </script><br /> <br /> <br /> <br /> 事件按鍵<br /> event.keyCode<br /> event.shiftKey<br /> event.altKey<br /> event.ctrlKey<br /> <br /> 頁面中鼠標(biāo)操作:<br /> oncontextmenu//右鍵<br /> onselectstart//選中<br /> oncopy//復(fù)制<br /> onpaste//粘貼<br /> oncut//剪切<br /> ondragstart//拖動(dòng)<br /> <br /> 窗體圖片<br /> document.images[索引]<br /> <br /> 窗體元素<br /> document.窗體.elements[索引]<br /> <br /> 瀏覽器名稱<br /> document.navigator.appName<br /> document.navigator.plugins<br /> <br /> 轉(zhuǎn)向制定頁面:<br /> window.navigate("")<br /> window.location.href=""<br /> <br /> <br /> 符合標(biāo)準(zhǔn)的去除鏈接虛線兩種方式:<br /> 1:通過links(窗體鏈接)<br /> <script type="text/javascript"><br /> function aa(){<br />     for(i=0;i<document.links.length;i++){<br />         document.links[i].onfocus=function(){<br />             this.blur()<br />         }<br />     }<br /> }<br /> window.onload=aa<br /> </script><br /> 2:通過鏈接a對象<br /> <script language="javascript"><br /> aa=function(){<br />     var obj=document.getElementsByTagName("a")<br />     for(i=0;i<obj.length;i++){<br />         obj[i].onfocus=function qq(){<br />             this.blur()<br />     }<br /> }<br /> }<br /> window.onload=aa<br /> </script><br /> <br /> <br /> 文本值改變的時(shí)候:<br /> <input type="text" onpropertychange="alert('值改變了')"><br /> <br /> 窗口的父對象:<br /> window.opener<br /> 框架的父對象:<br /> window.parent<br /> <br /> 給文本增加鏈接:<br /> <script language="javascript" defer><br /> var text="百度"<br /> text=text.link("http://www.baidu.com")<br /> document.write(text)<br /> </script><br /> ////////////////////////////實(shí)例:<br /> <script language="javascript" defer><br /> var pic="<img src=''>"<br /> pic=pic.link("http://www.baidu.com")<br /> document.write(pic)<br /> </script><br /> <br /> <br /> 獲取css樣式表<br /> document.stylesheets[索引].rules[索引]//獲取第幾個(gè)<style type="text/css"></style>里的第幾個(gè)樣式<br /> document.stylesheets[索引].rules[索引].selectorText//獲取css樣式名稱<br /> document.stylesheets[索引].rules[索引].style.cssText//獲取css樣式內(nèi)容<br /> 例子:<br /> <style><br /> body {color:red}<br /> p {color:blue}<br /> </style><br /> <style><br /> span {color:red}<br /> table {color:blue}<br /> </style><br /> <body ><br /> <br /> 頁面z坐標(biāo)(z-index)://對象的z-index坐標(biāo)必須在absolute情況下才能起作用<br /> 例子:<br /> <style type="text/css"><br /> #pagea {<br />     width:200px;<br />     height:200px;<br />     position:absolute;<br />     left:100px;<br />     top:100px;<br />     background:red<br /> }<br /> #pageb {<br />     width:200px;<br />     height:200px;<br />     position:absolute;<br />     left:200px;<br />     top:200px;<br />     background:black;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> var firstIndex=1<br /> function zIndexChange(obj){<br />     document.getElementById(obj).style.zIndex=firstIndex<br />     firstIndex++<br /> }<br /> </script><br /> <div id="pagea" >頁面a</div><br /> <div id="pageb" >頁面b</div><br /> <br /> 按住鼠標(biāo)左鍵N秒執(zhí)行:<br /> <script language="javascript"><br /> var timerAl<br /> function al(){<br />     alert("您按住鼠標(biāo)2秒沒動(dòng)!請放松,謝謝!")<br /> }<br /> document.onmousedown=function(){<br />     timerAl=setTimeout("al()",2000)//此處一定不能加var ,加了表示每次執(zhí)行的時(shí)候都從新聲明<br /> }<br /> document.onmouseup=function(){<br />     clearTimeout(timerAl)<br /> }<br /> </script><br /> <br /> 本地實(shí)現(xiàn)圖片現(xiàn)實(shí):<br /> <script language="javascript"><br /> function getError(){<br /> imgdiv.innerHTML=''<br /> alert("格式錯(cuò)誤或者不存在這個(gè)文件")<br /> }<br /> function checkSize(obj){<br /> var w=obj.clientWidth<br /> var h=obj.clientHeight<br /> if(w>164){<br /> obj.width=164<br /> obj.heigth=164/w*h<br /> }<br /> }<br /> function showImg(filesrc){<br /> imgdiv.innerHTML="<img id='tu' src='file:///"+filesrc+"' onerror='getError()' onload='checkSize(this)'>"<br /> }<br /> </script><br /> <br /> <input type="file" size=25 onchange="showImg(this.value)"><br><br><br><br><br /> <div id="imgdiv" align="center"></div><br /> <br /> 表格的相關(guān)操作:<br /> 1:左右移動(dòng)表格行:(表格外)<br /> <script language="javascript"><br /> function tb1doTr(obj){<br /> var tr=document.createElement("<tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb2doTr(this)'></tr>")<br /> var td1=document.createElement("<td align='center'></td>")<br /> var td2=document.createElement("<td align='center'></td>")<br /> var text1=document.createTextNode(obj.cells[0].innerHTML)<br /> var text2=document.createTextNode(obj.cells[1].innerHTML)<br /> td1.appendChild(text1)<br /> td2.appendChild(text2)<br /> tr.appendChild(td1)<br /> tr.appendChild(td2)<br /> document.getElementById("tb2_tbody").appendChild(tr)<br /> document.getElementById("tb1").deleteRow(obj.rowIndex)<br /> }<br /> <br /> function tb2doTr(o){<br />     tr=document.getElementById("tb1").insertRow()<br />     tr.bgColor="#efefef"<br />     tr.onmouseover=function(){this.bgColor="#efef00"}<br />     tr.onmouseout=function(){this.bgColor="#efefef"}<br />     tr.onclick=function(){tb1doTr(this)}<br /> <br />     for(i=0;i<o.cells.length;i++){<br />         var td=tr.insertCell()<br />         td.innerHTML=o.cells[i].innerHTML<br />     }<br />     document.getElementById("tb2").deleteRow(o.rowIndex)<br /> }<br /> </script><br /> <br /> <table cellpadding="0" cellspacing="0" border="1" width="300" id="tb1" style="float:left;text-align:center"><br /> <tr><br />     <td bgcolor="#efefef" align="center">行</td><br />     <td bgcolor="#efefef" align="center">值</td><br /> </tr><br /> <script type="text/javascript"><br /> for(i=1;i<=20;i++){<br />     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>")<br /> }<br /> </script><br /> </table><br /> <br /> <table cellpadding="0" cellspacing="0" border="1" width="300" id="tb2" style="text-align:center"><br /> <tbody id="tb2_tbody"><br /> <tr><br />     <td bgcolor="#efefef" align="center">行</td><br />     <td bgcolor="#efefef" align="center">值</td><br /> </tr><br /> </tbody><br /> </table><br /> <br /> 2:移動(dòng)表格行的位置(表格內(nèi))<br /> <br /> <br /> 單擊文字保存圖片:<br /> <iframe height="0" width="0" src="偷拍的.jpg" kesrc="偷拍的.jpg" id="saveImage">
Click Me
//這里千萬不能寫出:document.getElementById('saveImage')


單元格顏色漸退:

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"
??? }
}



 



常識:












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"

背景1背景2背景3
調(diào)用css
favicon  




在此寫css



@import url("")

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% 華文行楷


            定義           調(diào)用
           
            .css1 {}         class=css1
            #css2 {}         id=css2
            table {}         說明table 中的所有屬性
            table#css1 {}    table中的所有css1都有這個(gè)屬性   id=css1
            table.css1 {}    table中的所有css1都有這個(gè)屬性   class=css1
            body,table,input {}   table和body和input都有這個(gè)屬性       
            table #css1           table中其他標(biāo)簽擁有的屬性   ...             table .css1           table中其他標(biāo)簽擁有的屬性  
...

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 < > & " ? ?

在網(wǎng)頁中加入html代碼只要在代碼前后加入:和就可以了

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


你好



favicon.icon     

oncontextmenu="return false"
ondraystart="return false"
onselectstart="return false"
oncopy="return false"
onpaste="return false"
oncut="return false"


取消表單按下時(shí)的虛線
你好
你不好

加入收藏:




a的全寫:anchor


防止點(diǎn)擊鏈接時(shí)新窗口都是在頂部打開


多一行


如何讓網(wǎng)頁中的廣告自動(dòng)關(guān)閉:
---在網(wǎng)頁廣告條的網(wǎng)頁head和/head中加入:


function close(){
setTimeout("self.close()",5000)
}//本網(wǎng)頁自動(dòng)在5秒鐘關(guān)閉

或者:
function close(){
self.close()
}
setinterval("close()",5000)


frameset frame iframe:
border bordercolor src name rows cols framespacing frameborder

flash透明:


半透明的表格:

 


陰影表格:

 


特色的表單:









背景更換效果

.css1 {background-image:url("1.jpg")}
.css2 {background-image:url("2.jpg")}

sage


關(guān)閉網(wǎng)頁

function closewindow(){
window.opener=null
window.close()
}

調(diào)用:

鼠標(biāo)指向時(shí)變背景顏色的表格


細(xì)線表格1:


細(xì)線表格2:


細(xì)線表格3:



凹下的立體表格:




     
     
     


凸出的立體表格:




     
     
     


有間距的表格:


  


IE地址欄前換成自己的圖標(biāo)

可以在收藏夾中顯示出你的圖標(biāo)

關(guān)閉中文輸入法

防止別人frame你的網(wǎng)頁:

if(top.location!=self.location){
top.location=self.location
}


1. oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵
no
可用于Table

2. 取消選取、防止復(fù)制

3. onpaste="return false" 不準(zhǔn)粘貼

4. oncopy="return false;" oncut="return false;" 防止復(fù)制

5. IE地址欄前換成自己的圖標(biāo)

6. 可以在收藏夾中顯示出你的圖標(biāo)

7. 關(guān)閉輸入法

8. 永遠(yuǎn)都會帶著框架



9. 防止被人frame



10. 網(wǎng)頁將不能被另存為



11. >

12.刪除時(shí)確認(rèn)

刪除

13. 取得控件的絕對位置

//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);
}


//VBScript


14. 光標(biāo)是停在文本框文字的最后


function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}



15. 判斷上一頁的來源

javascript:document.referrer

16. 最小化、最大化、關(guān)閉窗口











本例適用于IE

17.屏蔽功能鍵Shift,Alt,Ctrl


function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!"); //可以換成ALT CTRL
}
document.onkeydown=look;


18. 網(wǎng)頁不會被緩存




或者

19.怎樣讓表單沒有凹凸感?





20.
&的區(qū)別?

(division)用來定義大段的頁面元素,會產(chǎn)生轉(zhuǎn)行
用來定義同一行內(nèi)的元素,跟
的唯一區(qū)別是不產(chǎn)生轉(zhuǎn)行
是ns的標(biāo)記,ie不支持,相當(dāng)于



21.讓彈出窗口總是在最后面:



22.不要滾動(dòng)條?

讓豎條沒有:


讓橫條沒有:


兩個(gè)都去掉?更簡單了



23.怎樣去掉圖片鏈接點(diǎn)擊后,圖片周圍的虛線?



24.電子郵件處理提交表單





25.在打開的子窗口刷新父窗口的代碼里如何寫?

window.opener.location.reload()

26.如何設(shè)定打開頁面的大小


打開頁面的位置

27.在頁面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)


body
{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}


28. 檢查一段字符串是否全由數(shù)字組成



29. 獲得一個(gè)窗口的大小

document.body.clientWidth; document.body.clientHeight

30. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");

31.TEXTAREA自適應(yīng)文字行數(shù)的多少

<br />

32. 日期減去天數(shù)等于第二個(gè)日期


function cc(dd,dadd)
{
//可以加上錯(cuò)誤處理
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)


33. 選擇了哪一個(gè)Radio


function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function

Style
Barcode



34.腳本永不出錯(cuò)





35.ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框




window.event.returnvalue="false"
window.event事件可以返回值,,,
window.event.srcElement.returnValue=""
例子://禁止鼠標(biāo)右鍵

判斷上一頁的來源:javascript:document.referrer;

讓網(wǎng)頁不被別人 iframe:

??? if(top.location!=self.location){
??? ??? top.location=self.location
??? }


讓頁面打開最大化:

window.resizeTo(screen.width,screen.height)
window.moveTo(0,0)

//相關(guān)函數(shù):window.moveTo,window.moveBy,window.resizeTo,window.resizeTo


javascipt相關(guān)對象:
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()/上標(biāo)
string.sub()/下標(biāo)
string.toUpperCase()
string.toLowerCase()
string.Indexof()
string.charAt()
string.charCodeAt()
string.substr()
string.substring()
string.fromCharCode()
string.search()


鏈接a的全寫:anchor

在html和xml中相關(guān)字符引用:
'   '
&   &
"   "
<   <
>   >

如果要在html網(wǎng)頁中加入html標(biāo)簽代碼(大量),加


iframe控制父窗口:window.parent.
父窗口控制子頁面:window.子頁面名稱


用js保護(hù)網(wǎng)頁中郵箱:

name="icyzhl"
witch="163"
??? document.write("")
??? docuemnt.write("
")





marquee標(biāo)記用法:
vspace;
hspace;
direction:up/left/right/down;
behavior:slide/scroll/alternate;
bgcolor;
scrolldelay;
scrollamount;

bgsound:infinite/loop=-1  autostart   src  


符合標(biāo)準(zhǔn)的打開新窗口

var anchors=document.getElementsByTagName("a")
for(i=0;i ??? obj=anchors[i]
??? if(obj.getAttribute("href") && obj.getAttribute("rel")=="external"){
??? ??? obj.target="_blank"
??? }
}



textarea自動(dòng)高度
<br /> sdagdsg文字內(nèi)容<br />


隱藏表單按下的虛線;



只讀文本:



文本值發(fā)生改變:


不能為中文:


收藏夾個(gè)性圖標(biāo):


本文標(biāo)題:貢獻(xiàn)05年學(xué)習(xí)javascript和div+css時(shí)候總結(jié)的一些小技巧
本文網(wǎng)址:http://www.wbi7736.cn/wangjianjiqiao/49.html
原創(chuàng)網(wǎng)址:合肥網(wǎng)絡(luò)公司<謹(jǐn)宸科技> 版權(quán)所有,轉(zhuǎn)載請注明出處,并以鏈接形式鏈接網(wǎng)址:www.wbi7736.cn
文章標(biāo)簽:javascriptdiv+css
 上一篇:如何利用apache重寫靜態(tài)頁面
 下一篇:教你總結(jié)php+mysql常用函數(shù)