javascript
[导入]javascript总结
1.動(dòng)態(tài)添加一行，和刪除當(dāng)前行
<script>?
var count=0;
?function ff()
?{
?var txt1=document.getElementById("Text1");
?var table1=document.getElementById("table1");
?rowNo=table1.rows.length;
?Tr=table1.insertRow(rowNo);
?Tr.id="tr"+count;
?Td=Tr.insertCell(0);
?Td.id="td"+count;
?Td.innerText=txt1.value;
?Td2=Tr.insertCell(1);
?Td2.innerHTML+='<input οnclick="del(this)" type="button" value="刪除"/>'
?count +=1;
?
?}
?function del(btn)
?{
?var tr=btn.parentNode.parentNode;
?var tb=tr.parentNode;
?tb.removeChild(tr);
?}
?
??</script>
?</HEAD>
?<body MS_POSITIONING="GridLayout">
??<form id="Form1" method="post" runat="server">
???<input id="Text1" runat="server" type="text" NAME="Text1">
???<table id="table1" border="1" bordercolor="red">
???</table>
???<input id="Button1" type="button" οnclick="ff()">
??</form>
?</body>
</HTML>
2。表格斜線
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
?<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
??? <TD id="td1"> </TD>
??? <TD>張三</TD>
??? <TD>李四</TD>
??? <TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>數(shù)學(xué)</TD>
??? <TD>55</TD>
??? <TD>66</TD>
??? <TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>英語(yǔ)</TD>
??? <TD>99</TD>
??? <TD>68</TD>
??? <TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
??? <TD>語(yǔ)文</TD>
??? <TD>33</TD>
??? <TD>44</TD>
??? <TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
??? var tmp
??? if(x1>=x2)
??? {
??????? tmp=x1;
??????? x1=x2;
??????? x2=tmp;
??????? tmp=y1;
??????? y1=y2;
??????? y2=tmp;
??? }
??? for(var i=x1;i<=x2;i++)
??? {
??????? x = i;
??????? y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
??????? a(x,y,color);
??? }
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>
3?？赏蟿?dòng)的Table
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;??????? //當(dāng)前拖動(dòng)對(duì)象
var relLeft;??????? //鼠標(biāo)按下位置相對(duì)對(duì)象位置
var relTop;
var zindex=-1;//控制被拖動(dòng)對(duì)象的z-index值
function f_mdown(obj)
{
??????? currentMoveObj = obj;??????????????? //當(dāng)對(duì)象被按下時(shí)，記錄該對(duì)象
??????? currentMoveObj.style.position = "absolute";
??????? relLeft = event.x - currentMoveObj.style.pixelLeft;
??????? relTop = event.y - currentMoveObj.style.pixelTop;
??????? zindex=currentMoveObj.style.zIndex;//記錄原z-index值
??????? currentMoveObj.style.zIndex=10000;
}
window.document.onmouseup = function()
{????? currentMoveObj.style.zIndex=zindex;//恢復(fù)
??????? zindex=-1;
??????? currentMoveObj = null;??????? //當(dāng)鼠標(biāo)釋放時(shí)同時(shí)釋放拖動(dòng)對(duì)象
?????? }
function f_move(obj)
{
??????? if(currentMoveObj != null)
??????? {
??????????????? currentMoveObj.style.pixelLeft=event.x-relLeft;
??????????????? currentMoveObj.style.pixelTop=event.y-relTop;
??????? }
}
//-->
</SCRIPT>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
??????? <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
??????? <TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
??????? <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
??????? <TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>
2.解析XML 成Table
<XML ID="oXmlData">
<tab>
<row>
<col name="Col1"/>
<col name="Col2"/>
<col name="Col3"/>
</row>
<row>
<col name="Col4"/>
<col name="Col5"/>
<col name="Col6"/>
</row>
<row>
<col name="Col7"/>
<col name="Col8"/>
<col name="Col9"/>
</row>
</tab>
</XML>
<input type="button" value="生成XML表格" onClick="createXmlTable()">
<div id="oDiv_createXmlTable"></div>
<script language="JavaScript">
function createXmlTable(){
var HTML='';
var row=oXmlData.XMLDocument.getElementsByTagName('row');
var col=oXmlData.XMLDocument.getElementsByTagName('col');
HTML+='<table border><tr>';
for(i=1;i<col.length+1;i++){
HTML+='<td>'+col[i-1].getAttribute('name')+'</td>';
if(i%row.length==0 && i!=col.length) HTML+='</tr><tr>';
}
HTML+='</tr></table>';
oDiv_createXmlTable.innerHTML=HTML;
}
</script>
4.可拖動(dòng)的列
<style>
.tdLine {
?float:right;
?width:6px;
?cursor:w-resize;
?height:100%;
?background:red;
}
</style>
<body>
<table border="1">
<tr>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
function run(obj){
?var _sx = event.x;
?document.onmouseup = function(){
??this.onmousemove = null;
?}
?document.onmousemove = function(){
??var _xx = event.x - _sx;;
??obj.parentNode.width = obj.parentNode.width * 1 + _xx;
??_sx = event.x;
??window.status = "x = " + _sx;
?}
}
</script>
6。javascript setTimeout 和 setInterval的區(qū)別
setTimeout (表達(dá)式,延時(shí)時(shí)間)
setInterval(表達(dá)式,交互時(shí)間)
延時(shí)時(shí)間/交互時(shí)間是以豪秒為單位的(1000ms=1s)
setTimeout? 在執(zhí)行時(shí),是在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次
setInterval 在執(zhí)行時(shí),它從載入后,每隔指定的時(shí)間就執(zhí)行一次表達(dá)式
set Timeout 也可以實(shí)現(xiàn)象setInterval一樣的功能
set Timeout:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
setTimeout("reloop()",1000);
}
reloop();
</script>
setInterval:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
}
setInterval("reloop()",1000);
</script>
7.取得鼠標(biāo)所在位置的對(duì)象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 取得鼠標(biāo)所在位置的對(duì)象 </TITLE>
<META NAME="Author" CONTENT="寶玉 [url]http://www.nwpubbs.net[/url]">
</HEAD>
<script language="javascript">
??? <!--
?function fnGetTable( oEl )
??? {
??try{
???while( null != oEl && oEl.tagName!="TABLE" )
???{
????oEl = oEl.parentElement;
???}
???return oEl;
??}
??catch(e)
??{
???return null;
??}
??? }
?function pos()
?{
??try{
??oElement = document.elementFromPoint(event.x,event.y);
??oElement = fnGetTable(oElement);
??if(oElement.tagName=="TABLE")
???show.innerText=oElement.id;
??}
??catch(e)
??{}
??? }
?// -->
</script>
<BODY οnmοusemοve="pos()">
<table border="1" cellpadding="" cellspacing="" width="" id="table1">
<tr>
?<td>table1</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table2">
<tr>
?<td>table2</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table3">
<tr>
?<td>table3</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table4">
<tr>
?<td>table4</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table5">
<tr>
?<td>table5</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table6">
<tr>
?<td>table6</td>
</tr>
</table><br /><br />
鼠標(biāo)當(dāng)前在：<span id="show"></span>
</BODY>
</HTML>
9。精典的拖動(dòng)效果
<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包為js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//開(kāi)始拖動(dòng);
function startDrag(obj)
{
??????? if(event.button==1)
??????? {
??????????????? //鎖定標(biāo)題欄;
??????????????? obj.setCapture();
??????????????? //定義對(duì)象;
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? //記錄鼠標(biāo)和層位置;
??????????????? x0 = event.clientX;
??????????????? y0 = event.clientY;
??????????????? x1 = parseInt(win.style.left);
??????????????? y1 = parseInt(win.style.top);
??????????????? //記錄顏色;
??????????????? normal = obj.style.backgroundColor;
??????????????? //改變風(fēng)格;
??????????????? obj.style.backgroundColor = hover;
??????????????? win.style.borderColor = hover;
??????????????? obj.nextSibling.style.color = hover;
??????????????? sha.style.left = x1 + offx;
??????????????? sha.style.top? = y1 + offy;
??????????????? moveable = true;
??????? }
}
//拖動(dòng);
function drag(obj)
{
??????? if(moveable)
??????? {
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? win.style.left = x1 + event.clientX - x0;
??????????????????????????????? sha.style.left = parseInt(win.style.left) + offx;
??????????????????????????????? if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
??????????????? win.style.top? = y1 + event.clientY - y0;
??????????????? sha.style.top? = parseInt(win.style.top) + offy;
??????????????? }
??????? }
}
//停止拖動(dòng);
function stopDrag(obj)
{
??????? if(moveable)
??????? {
??????????????? var win = obj.parentNode;
??????????????? var sha = win.nextSibling;
??????????????? var msg = obj.nextSibling;
??????????????? win.style.borderColor???? = normal;
??????????????? obj.style.backgroundColor = normal;
??????????????? msg.style.color?????????? = normal;
??????????????? sha.style.left = obj.parentNode.style.left;
??????????????? sha.style.top? = obj.parentNode.style.top;
??????????????? obj.releaseCapture();
??????????????? moveable = false;
??????? }
}
//獲得焦點(diǎn);
function getFocus(obj)
{
??????? if(obj.style.zIndex!=index)
??????? {
??????????????? index = index + 2;
??????????????? var idx = index;
??????????????? obj.style.zIndex=idx;
??????????????? obj.nextSibling.style.zIndex=idx-1;
??????? }
}
//最小化;
function min(obj)
{
??????? var win = obj.parentNode.parentNode;
??????? var sha = win.nextSibling;
??????? var tit = obj.parentNode;
??????? var msg = tit.nextSibling;
??????? var flg = msg.style.display=="none";
??????? if(flg)
??????? {
??????????????? win.style.height? = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
??????????????? sha.style.height? = win.style.height;
??????????????? msg.style.display = "block";
??????????????? obj.innerHTML = "0";
??????? }
??????? else
??????? {
??????????????? win.style.height? = parseInt(tit.style.height) + 2*2;
??????????????? sha.style.height? = win.style.height;
??????????????? obj.innerHTML = "2";
??????????????? msg.style.display = "none";
??????? }
}
//關(guān)閉;
function cls(obj)
{
??????? var win = obj.parentNode.parentNode.parentNode;
??????? //var sha = win.nextSibling;
??????? win.style.visibility = "hidden";
??????? //sha.style.visibility = "hidden";
}
//顯示/隱藏;
function ShowHide()
{
??????? if (xx!=null)
??????????????????????? if (xx.style.visibility == "hidden")
??????????????????????????????? xx.style.visibility = "visible";
??????????????????????? else if (xx.style.visibility == "visible")
??????????????????????????????? xx.style.visibility = "hidden";
}
//創(chuàng)建一個(gè)對(duì)象;
function xWin(id,w,h,l,t,tit,msg)
{
??????? index = index+2;
??????? this.id????? = id;
??????? this.width?? = w;
??????? this.height? = h;
??????? this.left??? = l;
??????? this.top???? = t;
??????? this.zIndex? = index;
??????? this.title?? = tit;
??????? this.message = msg;
??????? this.obj???? = null;
??????? this.bulid?? = bulid;
??????? this.bulid();
??????? xx = document.getElementById('allx');
??????? xx.style.visibility = "visible";
}
//初始化;
function bulid()
{
??????? var str = ""
??????????????? + "<div id='allx'><div id='xMsg'" + this.id + " "
??????????????? + "style='"
??????????????? + "z-index:" + this.zIndex + ";"
??????????????? + "width:" + this.width + ";"
??????????????? + "height:" + this.height + ";"
??????????????? + "left:" + this.left + ";"
??????????????? + "top:" + this.top + ";"
??????????????? + "background-color:" + normal + ";"
??????????????? + "color:" + normal + ";"
??????????????? + "font-size:11px;"
??????????????? + "font-family:Verdana;"
??????????????? + "position:absolute;"
??????????????? + "cursor:default;"
??????????????? + "border:2px solid " + normal + ";"
??????????????? + "' "
??????????????? + "οnmοusedοwn='getFocus(this)'>"
??????????????????????? + "<div "
??????????????????????? + "style='"
??????????????????????? + "background-color:" + normal + ";"
??????????????????????? + "width:" + (this.width-2*2) + ";"
??????????????????????? + "height:20;"
??????????????????????? + "color:white;"
??????????????????????? + "' "
??????????????????????? + "οnmοusedοwn='startDrag(this)' "
??????????????????????? + "οnmοuseup='stopDrag(this)' "
??????????????????????? + "οnmοusemοve='drag(this)' "
??????????????????????? + "οndblclick='min(this.childNodes[1])'"
??????????????????????? + ">"
??????????????????????????????? + "<span style='width:" + (this.width-2*14-4) + ";padding-left:3px;'>" + this.title + "</span>"
??????????????????????????????? + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='min(this)'>0</span>"
??????????????????????????????? + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>r</span>"
??????????????????????? + "</div>"
??????????????????????????????? + "<div style='"
??????????????????????????????? + "width:100%;"
??????????????????????????????? + "height:" + (this.height-20-4) + ";"
??????????????????????????????? + "background-color:white;"
??????????????????????????????? + "line-height:14px;"
??????????????????????????????? + "word-break:break-all;"
??????????????????????????????? + "padding:3px;"
??????????????????????????????? + "'>" + this.message + "</div>"
??????????????? + "</div>"
??????????????? + "<div id='xshadow' style='"
??????????????? + "width:" + this.width + ";"
??????????????? + "height:" + this.height + ";"
??????????????? + "top:" + this.top + ";"
??????????????? + "left:" + this.left + ";"
??????????????? + "z-index:" + (this.zIndex-1) + ";"
??????????????? + "position:absolute;"
??????????????? + "background-color:black;"
??????????????? + "filter:alpha(opacity=40);"
??????????????? + "'>by wildwind</div></div>";
??????? document.getElementById('msgbox').innerHTML = str;
???????????????
???????????????
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
??????? var a = new xWin("1",460,400,200,200,"是要這個(gè)效果嗎？","<br>這里有幾點(diǎn)需要注意的地方：<br><br>1、xx這個(gè)變量是你自己添加的吧？想法是對(duì)的，但是放錯(cuò)了地方，你只在cls()這個(gè)方法里面給xx賦值，這就造成了這個(gè)對(duì)象在窗口第一次出現(xiàn)時(shí)由于沒(méi)有被賦值(關(guān)閉按鈕還沒(méi)有被點(diǎn)擊)，導(dǎo)致無(wú)法獲取，所以應(yīng)該把對(duì)xx賦值這個(gè)工作放在窗口第一次初始化完成的地方，也就是xWin函數(shù)中，this.build語(yǔ)句之后。當(dāng)然也可能你已經(jīng)試過(guò)放在這里，但是發(fā)現(xiàn)根本不起作用，這就涉及到下一個(gè)要注意的問(wèn)題了。<br><br>2、Build函數(shù)的最后，你是通過(guò)insertAdjacentHTML()方法把生成的代碼放在了網(wǎng)頁(yè)全部html標(biāo)簽之后，因此生成的代碼中的對(duì)象在頁(yè)面中使用getElementById()方法根本訪問(wèn)不到，所以才會(huì)不起作用，怎么改呢？方法很多，我是這樣處理的，在頁(yè)面body的關(guān)閉標(biāo)簽之前插入一個(gè)div，然后用innerHTML()方法寫(xiě)入。<br><br>3、對(duì)于代碼，我進(jìn)行了一點(diǎn)修正，因?yàn)榘l(fā)現(xiàn)你的cls()方法當(dāng)中把xWin和他的陰影一并隱藏了，但是在ShowHide()方法中卻只把xWin顯示出來(lái)，這就導(dǎo)致關(guān)閉(實(shí)質(zhì)上是hidden)后再打開(kāi)的窗體已經(jīng)沒(méi)有了陰影，當(dāng)然這也不算什么大問(wèn)題，我在xWin和他的陰影外面套了一個(gè)allx的div，再把這個(gè)對(duì)象賦給xx，然后就可以一并隱藏一并顯示了，更方便一些。<br><br>4、主要就是這幾個(gè)地方，這個(gè)效果還是很不錯(cuò)的，不過(guò)程序結(jié)構(gòu)還可以再優(yōu)化一些，代碼比較多，我也沒(méi)有細(xì)看，稍微改了一下，可能不是最好的方法。大家繼續(xù)提建議啊。希望對(duì)樓主能有幫助。");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' οncοntextmenu='return false' scroll='no'>
<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">
<table width="242" height="160" border="1" ID="Table2">
??? <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080"? onMouseMove="bgColor='#ffff99'" οnmοuseοut="bgColor='#FFFFFF'" οnclick="ShowHide()">顯示隱藏</td>
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>
suiqirui 2007-06-03 22:17 發(fā)表評(píng)論
文章來(lái)源:http://www.cnblogs.com/suiqirui19872005/archive/2007/06/03/769663.html
轉(zhuǎn)載于:https://www.cnblogs.com/QiRuiNet-helloworld/archive/2007/06/17/786340.html
總結(jié)
以上是生活随笔為你收集整理的[导入]javascript总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 树形数据查询示例
- 下一篇： [转]javascript小技巧,超强推