Archive for January, 2005

Pages (11): « First ... « 3 4 5 6 7 8 9 » ... Last »

XUL学习笔记

Jan 13, 2005 Author: | Filed under: Uncategorized

教程真的很不错！另存为 .xul 用 Firefox 打开

<?xml version="1.0" encoding="gb2312" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="window.sizeToContent();" title="testing" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <groupbox> <caption label="对这个Blog的态度是" /> <hbox> <menulist id="name"> <menupopup> <menuitem label="你"/> <menuitem label="我"/> <menuitem label="他"/> <menuitem label="她"/> </menupopup> </menulist> <menulist id="searchmode"> <menupopup> <menuitem label="喜欢"/> <menuitem label="厌恶"/> <menuitem label="没感觉"/> </menupopup> </menulist> <progressmeter id="oLoader" value="50%" style="margin: 4px;"/> </hbox> </groupbox> </vbox> <hbox> <spacer flex="1" /> <button label="确定" onclick="window.close()" /> <button label="取消" onclick="window.close()" /> </hbox> </window> 显示更多

[Edit on 2005-1-13 11:44:27 By guoshuang]

[Edit on 2005-1-13 11:47:51 By guoshuang]

0 Comments

about webdings

Jan 12, 2005 Author: | Filed under: Uncategorized

这是原问题，解决如下

▶

▼

▲

▶ unicode 详解

http://www.fileformat.info/info/unicode/char/25b2/index.htm

<pre> ▶ ▼ ▲ </pre> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Unicode from U+25A0 to U+25FF

点击这里打开新窗口浏览此网页

怎样在windows中输入unicode，我试了N下，总是弄不出来！谁知道，讲一下。

http://www.fileformat.info/tip/microsoft/enter_unicode.htm

Method 1: Universal

This method works regardless of any of your language settings, but is the most cumbersome to type.

1. Press and hold down the Alt key.

2. Press the + (plus) key on the numeric keypad.

3. Type the hexidecimal unicode value.

4. Release the Alt key.

Method 2: Input-language Specific

This method depends on the specific input language you are using.

1. Press and hold down the Alt key.

2. Type 0 (zero) and the decimal unicode value on the numeric keypad.

3. Release the Alt key.

You can see which input language you are using (and which are installed) by:

1. Start Menu

2. Settings

3. Control Panel

4. Regional and Language Options

5. Languages tab

6. Detail button

The entries in the Unicode character information section are using the Windows Latin 1 input language.

Method 3: Code-page Specific

This method depends on the specific code page you have installed.

1. Press and hold down the Alt key.

2. Type the decimal codepage value on the numeric keypad. Do not type any leading zeros.

3. Release the Alt key.

[Edit on 2005-1-12 13:56:58 By guoshuang]

0 Comments

HTMLSpecial Characters(html entities)html特殊字符

Jan 11, 2005 Author: | Filed under: Uncategorized

小雨手册只写了34以后的，今天有人问 tab 的实体，赶紧找了一下…

<pre> 水平Tab 换行回车 & 符号 @ 符号 / 斜杠 \ 反斜杠 " 双引号 ' 单引号空格或者空格 : 冒号 ; 引号 _ 下划线 € 或者 € 欧元 ‰ 或者 ‰ 千分之 </pre> ™ 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

更多字符实体：

http://www.tntluoma.com/sidebars/codes/

[Edit on 2005-1-12 11:40:53 By guoshuang]

[Edit on 2005-2-1 15:27:05 By guoshuang]

0 Comments

js dom practice（firefox）

Jan 11, 2005 Author: | Filed under: Uncategorized

attribute 方法

<div id="qing" align="right">aaaa aa</div> <script> alert(document.all.qing.getAttribute("align")) alert(document.all.qing.getAttributeNode("align")) alert(document.all.qing.getAttributeNode("align").nodeValue) alert(document.all.qing.getAttributeNode("align").nodeName) </script> <button onclick="document.getElementById('qing').removeAttribute('align')">removeAttribute align</button> <button onclick="document.getElementById('qing').removeAttribute('id')">removeAttribute id</button> <button onclick="alert(document.getElementById('qing'))">is that still a qing id?</button> <button onclick="document.getElementById('qing').removeAttributeNode(document.getElementById('qing').getAttributeNode('align'))">remove the attribute node</button> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

createElement + appendChild

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-language" content="gb2312" /> <style type="text/css" media="all"> table {border-collapse:collapse} </style> </head> <body> </body> </html> <script type="text/javascript"> oBody=document.getElementsByTagName("body").item(0); oTable=document.createElement("table"); oTbody=document.createElement("tbody"); for(i=0;i<3;i++){ oRow=document.createElement("tr"); for(j=0;j<4;j++){ oCell=document.createElement("td"); oCellText=document.createTextNode("第"+i+"行第"+j+"列"); oCell.appendChild(oCellText); oRow.appendChild(oCell); } oTbody.appendChild(oRow) } oTable.appendChild(oTbody); oBody.appendChild(oTable); oTable.setAttribute("border","1"); oTable.setAttribute("cellpadding","4"); oTable.setAttribute("style","background-color:#eee"); </script> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

styleSheets

ss = document.styleSheets; for(ii=0;ii<ss.length;ii++) { for(i=0;i<ss[0].cssRules.length;i++) { dump( ss[ii].cssRules[i].style.selectorText + " " ); } } 显示更多

addEventListener stopPropagation

<html> <head> <style> #t-daddy { border: 1px solid red } #t1 { background-color: pink; } </style> <script> function l_func(e) { t2 = document.getElementById("t2"); t2.innerHTML = "three"; e.stopPropagation(); // this ought to keep t-daddy from getting the click. } function load() { el = document.getElementById("t"); el.addEventListener("click", l_func, false); } </script> </head> <body onload="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="t"> <td id="t1">one</td> </tr> <tr> <td id="t2">two</td> </tr> </table> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title></title> <script language="JavaScript" type="text/javascript">  </script> </head> <body onload="respond()">  </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

来自：

http://www.mozilla.org/docs/dom/domref/examples.html

[Edit on 2005-1-11 17:15:19 By guoshuang]

0 Comments

firefox 中对应 IE currentStyle 的方法

Jan 10, 2005 Author: | Filed under: Uncategorized

在 firefox 中， object.style 只能返回 inline（行内）方式书写的 CSS，而且没有 currentStyle 属性。

[Edit on 2005-1-10 17:35:43 By guoshuang]

0 Comments

DOM 代码实例

Jan 10, 2005 Author: | Filed under: Uncategorized

setTimeout() 每隔一段时间执行

document.getElementById(”text”+el).style.color=”rgb(”+aa+”,”+aa+”,”+aa+”)”; //颜色值递减

document.getElementById(”text”+el).style.left=tt+”px”; //left 递增

<html> <head> <script> //////////////////////////////////////////////////////////////////////////////// // Produced by Marcio Galli for Netscape Communications. // Uses DOM 1 and CSS to change color. // // References: // // http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html // http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/ // http://www.geckonnection.com // // This is a basic color fade in effect. There are 6 elements in the HTML // section at the end of this document. Each one is a div that contains // a text node. When the page is loaded, the colorfade animation procedure is called. // // It moves the text whose id is "text"+el to the right and at the same // time changes the color from white (255,255,255) to gray. // When both the background and the text are white (255,255,255), // it creates a transparency effect. // /////////////////////////////////////////////////////////////////////////////////////// // Variables used as parameters for the animation. // cc=20; // Number of frames in the animation. aa=255; // Initial value used as color parameter for Red, Green and Blue channels. tt=0; // Aux counter - the left position of the element. el=0; // Index of the element. function colorfade() { // Animates until cc >0. It's an animation in 20 steps. Note that cc was initialized with 20. if(cc>0) { tt+=cc; // tt value increased by cc. NOTE that // tt value is used to update the left position. // It's using the acceleration approach. In the beginning // the position is updated by high values (20,19,18..) // and in the end it's updated by low values (4,3,2..). // It will produce a gradual slowing effect. // Sets the left position using tt parameter. document.getElementById("text"+el).style.left=tt+"px"; // aa color value. Decreasing by 5 units. aa-=5; // Sets the color value. document.getElementById("text"+el).style.color="rgb("+aa+","+aa+","+aa+")"; // Decreases the animation counter. cc--; // Call colorfade again... setTimeout("colorfade()",20); } else { // Reset all animation parameters except the el index. cc=20; aa=255; tt=0; // Call again the colorfade procedure increasing the el index until all // elements (see HTML section bellow) are animated. The last element animated // is the sixth element. if(el<5) { el++; setTimeout("colorfade()",20); } } } </script> </head> <body onload="colorfade()" bgcolor="white"> <div id="text0" style="position:absolute;left:0px;top:0px;color:rgb(255,255,255);font-size:16pt;"> Gecko </div> <div id="text1" style="position:absolute;left:0px;top:20px;color:rgb(255,255,255);font-size:16pt;"> Technology </div> <div id="text2" style="position:absolute;left:0px;top:40px;color:rgb(255,255,255);font-size:16pt;"> Text </div> <div id="text3" style="position:absolute;left:0px;top:60px;color:rgb(255,255,255);font-size:16pt;"> Transitions </div> <div id="text4" style="position:absolute;left:0px;top:80px;color:rgb(255,255,255);font-size:16pt;"> Fades </div> <div id="text5" style="position:absolute;left:0px;top:100px;color:rgb(255,255,255);font-size:16pt;"> without opacity </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<html> <head> <script> //////////////////////////////////////////////////////////////////////////////// // Produced by Marcio Galli for Netscape Communications. // // This demo uses DOM Level 1 to animate text elements left and top position dynamically // and to change style properties like Letter Spacing and Color. // // References: // // http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html // http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/ // http://www.geckonnection.com // ani_counter=0; // Animation frame counter. colorintensity=255; // Color intensity. //////////////////////////////////////////////////////////////////////////////// // This 20 step animation script produces a visual effect interlacing two words. The // word "standard" was broken into two pieces: "s*a*d*r*" and "*t*n*a*d". Imagine the * as the // font spacing between each font letter. The idea of the effect is to increase the // Letter Spacing style attribute (using standards like CSS and DOM), and make both words interlace // to form the word "s*t*a*n*d*a*r*d". // // s a d r - starts in the right side and moves to the left position until the end of the animation. // t n a d - starts in the left side and moves to the right position until the end of the animation. // // The letter spacing starts with 1 pixel (see HTML code below), and it's increased through the // animation steps. Also there is a color fade visual effect. Note that the color was initialized // with the same color of the background (rgb:255,255,255), and its value decreases during the // animation until it reaches black (rgb:0,0,0). // function fontmove() { // Will animate for 20 steps. See setTimeout call in the end of this if statement. // if(ani_counter<20) { ani_counter++; // Retrieves the current Letter Spacing value. Note that letter-spacing style property // was started with 1 pixel value. See the HTML code below. // currentSpace=parseFloat(document.getElementById("text0").style.letterSpacing); currentSpace+=1; // Increase the font spacing by one pixel. // Updates the letter spacing. document.getElementById("text0").style.letterSpacing=currentSpace+"px"; document.getElementById("text1").style.letterSpacing=currentSpace+"px"; // colorintensity is decreased by 25 units for each animation step after the // first 10 steps. You can change this parameter. // if(ani_counter>10) colorintensity-=25; // Updates the color values for both text elements. // document.getElementById(”text0″).style.color=”rgb(”+colorintensity+”,”+colorintensity+”,”+colorintensity+”)”; document.getElementById(”text1″).style.color=”rgb(”+colorintensity+”,”+colorintensity+”,”+colorintensity+”)”; // Increases the left position of the first text element by 3 pixels. posleft=parseInt(document.getElementById(”text0″).style.left); posleft+=3; document.getElementById(”text0″).style.left=posleft+”px”; // Decreases the left position of the second text element by 3 pixels. posleft2=parseInt(document.getElementById(”text1″).style.left); posleft2-=3; document.getElementById(”text1″).style.left=posleft2+”px”; // Call fontmove again… setTimeout(”fontmove()”,50); } } </script> </head> <body onload="fontmove()" bgcolor="white"> <div id="text0" style="position:absolute;left:000px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;"> tnad </div> <div id="text1" style="position:absolute;left:102px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;"> sadr </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我的练习

<html> <style type="text/css"> #guo1,#guo2 {font-size:20px;font-family:"黑体",sans-serif;position:absolute;letter-spacing:0;} #guo1 {left:100px;} #guo2 {left:180px;/*top:100px;*/} </style> <body onload="textTrans()"> <div id="guo1">郭的落</div> <div id="guo2">爽部格</div> <script> var loopNum=20; var colorTrans=255; function textTrans(){ if(loopNum>0){ loopNum--; colorTrans-=10; left1=parseFloat(document.defaultView.getComputedStyle(guo1,null).getPropertyValue("left")); left2=parseInt(document.defaultView.getComputedStyle(guo2,null).getPropertyValue("left")); letterSpacing1=parseFloat(document.defaultView.getComputedStyle(guo1,null).getPropertyValue("letter-spacing")); letterSpacing2=parseInt(document.defaultView.getComputedStyle(guo2,null).getPropertyValue("letter-spacing")); document.getElementById("guo1").style.left=left1+2; document.getElementById("guo2").style.left=left2-1; document.getElementById("guo1").style.letterSpacing=letterSpacing1+1; document.getElementById("guo2").style.letterSpacing=letterSpacing2+1; document.getElementById("guo1").style.color="rgb("+colorTrans+","+colorTrans+","+colorTrans+")"; document.getElementById("guo2").style.color="rgb("+colorTrans+","+colorTrans+","+colorTrans+")"; setTimeout(textTrans,50) } } </script> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<HTML> <head> <script> //////////////////////////////////////////////////////////////////////////////// // Produced by Marcio Galli for Netscape Communications. // Uses DOM 1 to dynamically create a set of text elements. // Then animates it producing a scroll effect. // // References: // // http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html // http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/ // http://www.geckonnection.com // creditList= new Array( "DOM 1 Scroll Effect", "", "by mgalli", "", "Component of", "DOM/CSS Font Family Demos", "", "starring", "DOM Level 1", "DOM Level 2", "JavaScript", "Cascading Style Sheets", "new W3C Standards", "Gecko Layout Engine / NGT", "", "thanks to", "mozilla.org", "geckonnection.com", "taboca.com", "netscape.com", "w3c.org", "", "featuring", "animation", "visual effects", "dynamic control", "dynamic creation", "and more", ":-)", "", "Find more info", "at", "DMOZ.ORG [W3C DOM] Category”, “”, “Filmed for the Web”, “” ); //————————————————————————————- // start function // // This function is called when the page is loaded. // See the onload=”start()” attribute in the body tag. // function start() { nodeCredits=document.getElementById(”credits”); ww=window.innerWidth; // ww receives the window.innerWidth hh=window.innerHeight; // hh receives the window.innerHeight createDivs(creditList); // Note: the height attribute have the size of the screen height area. // Also the overflow attribute is set to hidden. // if (navigator.userAgent.indexOf(”Gecko”)>-1) nodeCredits.setAttribute(”style”,”position:absolute;top:”+hh+”px;left:0px;width:”+ww+”;height:”+0+”;font-size:15px;overflow:hidden;”); else nodeCredits.style.cssText = “position:absolute;top:”+hh+”px;left:0px;width:”+ww+”;height:”+0+”;font-size:15px;overflow:hidden;”; o1=document.getElementById(”credits”); scroll(); } ///////////////////////////////////////////////////////////////////////////////// // Global variables used for the scroll animation // o1=null; // stores the object reference. ttt=0; // stores position. hhh=0; // stores position. hh=0; // window.innerHeight size. ///////////////////////////////////////////////////////////////////////////////// // Scroll first step 20/1000*second. It moves the top position for the o1 // element and call scroll2… // function scroll() { ttt=parseInt(o1.style.top); if (isNaN(ttt)) ttt = 0; ttt-=2; o1.style.top=ttt+”px”; setTimeout(”scroll2()”,20); } precounter=0; // aux counter. fadeout_on=false; // aux Flag. fadein_on=false; // aux Flag iid=0; // aux used to index elements. iii=0; // aux generic counter iii2=0; // aux generic counter iid2=0; // aux used to index elements. ccc=0; // aux used to set color ccc2=255; // aux used to set color ///////////////////////////////////////////////////////////////////////////////// // Scroll second step 20/1000*second. It increases the height size for the o1 // element and call scroll… // // This second scroll function takes care of the fade in and fade out color // effect. // function scroll2() { // Increases the size of the height property. // hhh=parseInt(o1.style.height); if (isNaN(hhh)) hhh = 0; hhh+=2; o1.style.height=hhh+”px”; ////////////////////////////////////////////////////////////////////////// // Now is the color that works with color to simulate a fade in / fade out // effect. // Wait twenty cicles to start fading in. // precounter++; if(precounter>20) { fadein_on=true; } // If fadein mode is on, // if(fadein_on) { // must verify if the element is valid. // if(iid<creditList.length) { // Gets the element.. pieceofText=document.getElementById("textobject"+iid); // Changes the color (ccc from 000 to 255..) pieceofText.style.color="rgb("+ccc+","+ccc+","+ccc+")"; ccc+=17; } // increases one fadein cycle. iii++; // Each 15 cycles, next element must fade in... if(iii>15) { iii=0; // fade in cycle counter=0 ccc=0; // resets color to 0 iid++; // next element index. } } // Same thing but now for the fadeout system. // Waits the first element to be next to the top to start fadeing out. // o1top=parseInt(o1.style.top); if (isNaN(o1top)) o1top = 0; if(o1top<(60)&&fadeout_on==false) { fadeout_on=true; } // So... if(fadeout_on) { // must verify if the element is valid. // if(iid2<=creditList.length) { pieceofText2=document.getElementById("textobject"+iid2); if (pieceofText2) pieceofText2.style.color="rgb("+ccc2+","+ccc2+","+ccc2+")"; ccc2-=17; // decreases the color value. } iii2++; // increases the fade out cycle // counter. if(iii2>15) { // When number of cycles is 15, iid2++; // set index to next element. ccc2=255; // reset color to 255. iii2=0; // reset cycle counter to 0. } } // warning bug - it continues scrolling forever. setTimeout(”scroll()”,20); } ////////////////////////////////////////////////////////////////////////////// // Creates credit divs inside credits div. // ii=0; function createDivs(list) { node=document.getElementById(”credits”); toppos=0; beforediv2=document.createElement(”CENTER”); node.appendChild(beforediv2); for(i=0;i <list.length;i++) { beforediv=document.createElement("DIV"); if (navigator.userAgent.indexOf("Gecko")>-1) beforediv.setAttribute(”style”,”position:relative;color:black;font-size:20px”); else beforediv.style.cssText = “position:relative;color:black;font-size:20px”; beforediv.setAttribute(”id”,”textobject”+ii); ii++ insidediv=document.createTextNode(list[i]); beforediv.appendChild(insidediv); insidediv=document.createElement(”BR”); beforediv.appendChild(insidediv); beforediv2.appendChild(beforediv); } } </script> </head> <body onload="start()" bgcolor="black" color="white"> <div id="credits" style="position:absolute;color:white"> </div> </body> </HTML> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

More Examples:

http://www.mozilla.org/docs/dom/samples/

[Edit on 2005-1-11 10:17:10 By guoshuang]

0 Comments