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 "">
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 editortitle>
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 "">
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 "">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>iframe scrolltitle>
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 Boardh4>
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 "">
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>
【责编:Chuan】
--------------------next---------------------
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 }
--------------------next---------------------
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "">
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>
--------------------next---------------------
阅读(617) | 评论(0) | 转发(0) |
