1."rich" textarea editor.
前段時間有個霓虹燈的小項目。后臺用asp.net給硬件傳接口(具體怎樣就不清楚了)，前臺網頁讓做個可即時變色的textarea editor，把內容傳給后臺就行了。其實如果不要求即時變色的話，自定義個命名規則就行了。
沒辦法只能上網搜。先試了document.selection，可惜只支持IE而且bug不少(比如不能隔行操作)。后來搜到了一些開源的editor，人家用純js寫的小框架，真是牛。
自己也用iframe寫了個簡單的，一般功能是沒問題了：
程序目錄結構
img
***.gif
js
common.js
iframe.html
test.html
test.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 img{cursor:pointer;}
8 .class1{
9 border:solid 1px;
10 width:600px;
11 height:400px;
12 }
13 </style>
14 <script type="text/javascript" src="js/common.js"></script>
15 <title>iframe editor</title>
16 </head>
17 <body onload="init()">
18 <form id="form1">
19
20 <div style="width:600px">
21 <div align=right style="float:right;">
22 <img src="img/1.gif" onclick="chgFont()" title="Change Font!" />
23 <img src="img/2.gif" onclick="addIMG()" title="Add Image!" />
24
25 </div>
26 </div>
27
28 <iframe src="iframe.html" id="editor" class="class1"></iframe>
29
30 <div style="width:600px" align=right>
31 <input type="button" id="button1" value="Get Editor Value" onclick="getDocValue()" />
32 </div>
33
34 </form>
35 </body>
36 </html>
iframe.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 </head>
7 <body>Hello World! 啊啊</body>
8 </html>
common.js
1 function $(tagid){
2 return document.getElementById(tagid);
3 }
4
5 function getDocValue(){
6 alert($("editor").contentWindow.document.body.innerHTML);
7 }
8
9 function init(){
10 var win = $("editor").contentWindow;
11 win.document.designMode= "on";
12 win.document.contentEditable = true;
13 win.focus();
14 }
15
16 function chgFont() {
17 var win=$("editor").contentWindow;
18 win.document.execCommand("ForeColor",false,"red");
19 win.document.execCommand("FontSize",false,"10");
20 win.focus();
21 }
22
23 function addIMG() {
24 var win=$("editor").contentWindow;
25 win.document.execCommand("InsertImage",false,"img/a.gif");
26 win.focus();
27 }
注：document.execCommand可以改變很多樣式，詳情請參照手冊:)
2.Advertisement Board.
在CSDN看到的項目投標的廣告滾動條，用的是iframe + window.scrollBy，挺有意思的。
自己把源碼做了點改進，并加了個暫停滾動的功能：
test.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>iframe scroll</title>
7 <style type="text/css">
8 iframe{margin: 0pt; width: 180px; height: 32px;}
9 </style>
10 </head>
11 <body>
12 <form id="form1">
13 <h4>Exciting Advertisement Board</h4>
14 <iframe src="iframe.html" scrolling="no" frameborder="1"></iframe>
15
16 </form>
17 </body>
18 </html>
iframe.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 *{margin:0;padding:0;}
8 body {background:#F2F2FC;font:normal 12px verdana,sans-serif;}
9 ul{list-style-type:none;}
10 li{width:180px;}
11 a{color:#03C;text-decoration:none;}
12 a:hover{color:#F00;text-decoration:none;}
13 </style>
14 </head>
15 <body>
16 <ul id="scrollCon" onmouseover="suspend()" onmouseout="resume()">
17 <li>Hello!</li>
18 <li><a href="aaa">I'm aaa.</a></li>
19
20 <li>Hi!</li>
21 <li><a href="bbb">I'm bbb.</a></li>
22
23 <li>How are you!</li>
24 <li><a href="ccc">I'm ccc.</a></li>
25 </ul>
26
27 <script language="javascript">
28 var con=document.getElementById("scrollCon");
29 var items=con.getElementsByTagName("li");
30 var item_count=items.length/2;
31 var line_height=items[0].offsetHeight;
32 var timer1,timer2;
33 var step=0,cstep=0;
34 var isPlayed=false;
35
36 function startScroll(){
37 timer1=setInterval("doScroll()",40);//數值越大，滾動越慢
38 }
39 function doScroll(){
40 window.scrollBy(0,2);//滾動幅度
41 step++;
42 if(step>=line_height) {
43 clearInterval(timer1);
44 step=0;
45 cstep++;
46 if(cstep>=item_count){
47 cstep=0;
48 window.scrollTo(0,0);
49 }
50 }
51 }
52 function start(){
53 if(isPlayed)return;
54 isPlayed=true;
55 timer2=setInterval("startScroll()",3000);//滾動間隔
56 }
57 function suspend(){
58 clearInterval(timer1);
59 clearInterval(timer2);
60 }
61 function resume(){
62 timer2=setInterval("startScroll()",3000);
63 }
64 function stop(){
65 isPlayed=false;
66 clearInterval(timer2);
67 }
68
69 start();
70 </script>
71 </body>
72 </html>