曲名：テルーの呗[地海传说] |
曲名：Пастушок
|
曲名：初音甩葱歌 Ievan Polkka
|
| 我做了3个小时的车，快到的时候堵了一个小时，我等不及了就半路下车了。 真是十一不出门你不知道中国人多啊，我站在路中间，往前看，全是人，往后看，全是人，往山上看，全是人。 那人叫一个多啊，人挤人，人堆人，人上踩着人，人山人海。 我到卖票的那一看，那队伍有300米长。我找了10分钟，找到了队伍的尾巴。 人流中，我在思考一个问题，今天的长城是爬还是不爬，这确实是个问题。 犹豫了一个半小时后我终于做出了决定：“不爬了”。 我往回走，到站牌那，结果那里等车回家的队伍排了400米长。 深夜十二点，我TM终于到家了。 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript创建元素</title> <style type="text/css" media="screen"> <!-- #list { font-size: 12px; } #list dl { width: 500px; background: #F4FBFF; border: 1px #CEE1FF solid; } #list dt { clear: both; overflow: hidden; zoom: 1; padding: 15px; } #list strong { display: block; float: left; width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } #list dt a { color: #0066CC; } #list span { float: right; font-size: 10px; font-family: verdana,tahoma,Arial black,Arial,Helvetica,sans-serif; color: #999; } #list dd { clear: both; margin: 0; padding: 0 15px 15px; line-height: 1.8; } --> </style> </head> <body> <script language="JavaScript" type="text/javascript"> <!--//--><![CDATA[//><!-- (function () { var body = document.body; var createE = function(tagName,obj) { var element = document.createElement(tagName); if (obj){ if(obj.text){ var text = document.createTextNode(obj.text); element.appendChild(text); } if(obj.id) element.id = obj.id; if(obj.Name) element.className = obj.Name; if(obj.href) element.href = obj.href; if(obj.title) element.title = obj.title; } return element; } div = createE('div',{id:'list'}); for ( i=1;i<=3;i++ ) { dl = createE('dl'); dt = createE('dt'); dd = createE('dd',{text:'内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'}); strong = createE('strong'); a = createE('a',{href:'1111',text:'标题标题标题标题标题标题标题标题标题标题标题标题',title:'标题标题标题标题标题标题标题标题标题标题标题标题'}); span = createE('span',{text:'2008-8-25 16:29:43'}); //生成HTML body.appendChild(div); div.appendChild(dl); dl.appendChild(dt); dt.appendChild(strong); strong.appendChild(a); dt.appendChild(span); dl.appendChild(dd); } })(); //--><!]]> </script> </body> </html> |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>点击得到元素</title> <script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script> <script src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script> <script src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script> </head> <body> <input id="text" type="text" value="请在这里输入关键字" /> <div>一个普通的层</div> <a href="#">链接</a> <ul> <li><input type="checkbox" />无序列表1</li> <li>无序列表2</li> </ul> <script language="JavaScript" type="text/javascript"> <!--//--><![CDATA[//><!-- (function () { var YD = YAHOO.util.Dom, YE = YAHOO.util.Event, body = document.body; YE.on(body,'click',snake) function snake(_e){ console.log(YE.getTarget(_e)) } })(); //--><!]]> </script> </body> </html> 强调：console.log()是FireBug特有的方法，在FireBug的控制台看效果。当然你也可以alert一下（alert(YE.getTarget(_e).nodeName)）。 使用JS框架可以省去很多麻烦。 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <style type="text/css" media="screen"> <!-- html,body { height: 100%; margin: 0; } #snake { position: absolute; overflow: hidden; width: 10px; height: 10px; background: #ff0000; } --> </style> </head> <body> <div id="snake"> </div> <script language="JavaScript" type="text/javascript"> <!--//--><![CDATA[//><!-- (function () { var snake = document.getElementById("snake"); document.body.onmousedown = function() { snake.style.left = event.clientX; snake.style.top = event.clientY; }; })(); //--><!]]> </script> </body> </html> |
曲名：The Heart Never Lies
|
| 学习JS快一个月了，终于找到点门道。感觉JS这个东西和CSS很相似（和CSS2更相似了）。 上面的话可能说的不对，应该是JS DOM操作和CSS相似。 JS DOM是：找到对象，附加行为。 CSS是：找到对象，附加样式。 下面是我写的一个结构，表现，行为分离的一个TAB，留个纪念，或许若干年之后自己再看到能笑话一下自己。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new TAB </title> <style type="text/css" media="screen"> <!-- #tab li { display: inline; list-style: none; } #tab li.active { font-weight: 700; } #content div { display: none; } #content div.active { display: block; } --> </style> </head> <body> <ul id="tab"> <li class="active"><a href="#">tab1</a></li> <li><a href="#">tab2</a></li> <li><a href="#">tab3</a></li> <li><a href="#">tab4</a></li> </ul> <div id="content"> <div class="active">content1</div> <div>content2</div> <div>content3</div> <div>content4</div> </div> <script language="JavaScript" type="text/javascript"> <!--//--><![CDATA[//><!-- var tab = document.getElementById("tab").getElementsByTagName("li"); var content = document.getElementById("content").getElementsByTagName("div"); !function() { for ( i=0 ; i<tab.length ; i++ ) { tab[i].onclick = function() { showMe(this); } } }(); function showMe(_this) { for ( i=0 ; i<tab.length ; i++ ){ if (tab[i]==_this) { tab[i].className="active"; content[i].className="active"; } else { tab[i].className="" content[i].className=""; } } } //--><!]]> </script> </body> </html> 发现OBLOG的编辑器在FF下很不好用。 |
