BlogJava-小菜毛毛技术分享-文章分类-HTML+div+css实践

在线的HTML内容编辑器为用户提供文本的样式控制，例如文字的颜色、字体大小等。虽然现在网上有不少功能强大的编辑器（如：FCKEditor），但是在使用中需要许多复杂的配置，而且代码往往比较“臃肿”。本文的目的就是介绍如何开发一个HTML编辑器。应用本文介绍的方法，可以方便的开发出满足自己需求的，代码相对比较精简的HTML编辑器。以下是一个应用本文方法开发的HTML编辑器，实现了一些简单的功能：

代码下载在线演示

开发方法如下：

1.添加一个可编辑的iframe

实现HTML编辑器的第1步就是在网页中放置一个可编辑的iframe用来输入文本，使iframe可编辑方法相当简单，只需要将iframe的 designMode设置为on即可，具体步骤如下：

var editor = document.getElementById("IFRAME的ID");



var editorDoc = editor.contentWindow.document;

var editorWindow = editor.contentWindow;



editorDoc.designMode = "on";



editorDoc.open();

editorDoc.write("");

editorDoc.close();

2.设置选中文本的样式

设置选中文本样式的方法最简单的方式就是使用document.execCommand,但是execCommand功能比较局限，有时不能满足需求，例如：execCommand设置字体大小只能是1-7,不能使用像素大小，而且如果你在点击工具栏按钮到调用execCommand的过程中点击了其他的DIV，iframe的选中内容会消失，这时调用execCommand是无效的。因此本文介绍另一种方法，基本思路如下：

(1) 获取选中的HTML；
(2) 修改HTML的样式；
(3) 用修改后的HTML替换选中的HTML。

2.1 获取选中的HTML

在不同的浏览器中获取选中的HTML的方法是不同的，在IE中可以使用

var range = document.selection.createRange()

在Firefox,Chrome中则使用

var range = window.getSelection().getRangeAt(0);

2.2 替换选中的HTML

通过2.1的方法获取了表示选中内容的对象后，就可以调用其方法来替换掉选中的内容。在不同的浏览器中替换选中的HTML的方法有所差异，在IE中可以只需调用range.pasteHTML就行了，在Firefox,Chrome中则使用range.deleteContents 和 range.insertNode 两个方法来实现

2.3 封装一个操作选中HTML的类

由于2.1中获取的range对象的方法在不同浏览器中差异很大，因此，为了方便实现2.1和2.2提到的两个操作，封装了一个操作选中HTML的类SelectionRange，该类有两个方法，GetSelectedHtml和Replace，分别用于获取HTML和替换HTML。其代码如下：

//用于记录浏览器的类型

var browser = {};



var ua = navigator.userAgent.toLowerCase();



browser.msie = (/msie (["d.]+)/).test(ua);

browser.firefox = (/firefox"/(["d.]+)/).test(ua);

browser.chrome = (/chrome"/(["d.]+)/).test(ua);



//获取多个节点的HTML

function GetInnerHTML(nodes)

{

var builder = [];

for (var i = 0; i < nodes.length; i++)

{

if (nodes[i].nodeValue != undefined)

{

builder.push(nodes[i].innerHTML);

}

else

{

if (nodes[i].textContent) builder.push(nodes[i].textContent.replace(/", function() { return "<"; }));

else if (nodes[i].nodeValue) builder.push(nodes[i].nodeValue.replace(/", function() { return "<"; }));

}

}

return builder.join("");

}



function SelectionRange(doc, range)

{

//获取选中的内容的HTML

this.GetSelectedHtml = function()

{

if (range == null) return "";



if (browser.msie)

{

if (range.htmlText != undefined) return range.htmlText;

else return "";

}

else if (browser.firefox || browser.chrome)

{

return GetInnerHTML(range.cloneContents().childNodes);

}

else

{

return "";

}

}



//用html替换选中的内容的HTML

this.Replace = function(html)

{

if (range != null)

{

if (browser.msie)

{

if (range.pasteHTML != undefined)

{

//当前选中html可能以为某种原因（例如点击了另一个DIV）而丢失，重新选中

range.select();

range.pasteHTML(html);

return true;

}

}

else if (browser.firefox || browser.chrome)

{

if (range.deleteContents != undefined && range.insertNode != undefined)

{

//将文本html转换成DOM对象

var temp = doc.createElement("DIV");

temp.innerHTML = html;



var elems = [];

for (var i = 0; i < temp.childNodes.length; i++)

{

elems.push(temp.childNodes[i]);

}



//删除选中的节点

range.deleteContents();



//将html对应的节点(即temp的所有子节点)逐个插入到range中，并从temp中删除

for (var i in elems)

{

temp.removeChild(elems[i]);

range.insertNode(elems[i]);

}

return true;

}

}

}

return false;

}

}

与此同时，还实现了一个函数GetSelectionRange用于获取当前选中文本对应的SelectionRange对象，

function GetSelectionRange(win)

{

var range = null;



if (browser.msie)

{

range = win.document.selection.createRange();

if (range.parentElement().document != win.document)

{

range = null;

}

}

else if (browser.firefox || browser.chrome)

{

var sel = win.getSelection();

if (sel.rangeCount > 0) range = sel.getRangeAt(0); else range = null;

}



return new SelectionRange(win.document, range);

}

2.4 修改选中的HTML的样式

修改选中的HTML的样式方法并不复杂，只需要将HTML转成DOM对象，然后递归的设置每一个节点对应的样式的值即可,具体代码如下：

function SetNodeStyle(doc, node, name, value)

{

if (node.innerHTML == undefined)

{

return node;

}

else

{

node.style[name] = value;



for (var i = 0; i < node.childNodes.length; i++)

{

var cn = node.childNodes[i];

if (node.innerHTML != undefined)

{

SetNodeStyle(doc, cn, name, value);

}

}



return node;

}

}



function SetStyle(doc, html, name, value)

{

var dom = doc.createElement("DIV");

dom.innerHTML = html;



for (var i = 0; i < dom.childNodes.length; i++)

{

var node = dom.childNodes[i];



if (node.innerHTML == undefined)

{

//如果是文本节点，则转换转换成span

var span = doc.createElement("SPAN");

span.style[name] = value;

if (node.nodeValue != undefined) span.innerHTML = node.nodeValue.replace(/", function() { return "<"; });

else if (node.textContent != undefined) span.innetHTML = node.textContent.replace(/", function() { return "<"; });

//替换掉文本节点

dom.replaceChild(span, node);

}

else

{

SetNodeStyle(doc, node, name, value);

}

}



return dom.innerHTML;

}

2.5 示例

使用以上的代码，就可以相当方便的实现一个HTML编辑器，例如，以下代码实现将选中文本的字体大小设置为32px：

var range = GetSelectionRange(editorWindow);

var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px");

range.Replace(html);

同理，你可以实现设置行距，缩进，插入图片等功能。

小菜毛毛 2010-05-27 09:37 发表评论

blog式日期控件

小菜毛毛 — Wed, 24 Feb 2010 08:56:00 GMT

摘要: 二种JavaScript日期控件(日期选择器) 2006年4月26日 16:33:05 发布:yaosansi QQ群:Y③WEB开发(DIV+CSS）号码:16610506 QQ群:Y④WEB开发(JS+AJAX）号码:16143998 QQ群:Y⑤WEB开发(新手）号码:12777715 MSN群:yaosansi[at]126.com 本站大... 阅读全文

小菜毛毛 2010-02-24 16:56 发表评论

键盘KeyCode值列表

小菜毛毛 — Thu, 28 Jan 2010 03:24:00 GMT

keycode 8 = BackSpace BackSpace
keycode 9 = Tab Tab

keycode 12 = Clear
keycode 13 = Enter

keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock

keycode 27 = Escape Escape

keycode 32 = space space
keycode 33 = Prior
keycode 34 = Next
keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute

keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 section threesuperior
keycode 52 = 4 dollar
keycode 53 = 5 percent
keycode 54 = 6 ampersand
keycode 55 = 7 slash braceleft
keycode 56 = 8 parenleft bracketleft
keycode 57 = 9 parenright bracketright

keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E EuroSign
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M mu
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q at
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z

keycode 96 = KP_0 KP_0
keycode 97 = KP_1 KP_1
keycode 98 = KP_2 KP_2
keycode 99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock

keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon

keycode 192 = numbersign apostrophe

keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters

keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde

keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

触发组合键：

如：当按下ctrl+enter时触发

if(event.ctrlKey&&event.keyCode==13){

//function
}

当按下shift+enter时触发

         if(event.shiftKey&&event.keyCode==13){
             //function
        }

小菜毛毛 2010-01-28 11:24 发表评论

showModelessDialog()使用详解

小菜毛毛 — Mon, 25 Jan 2010 06:33:00 GMT

Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：

　　showModalDialog() (IE 4+ 支持)
　　showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
  dialogHeight 对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　dialogWidth: 对话框宽度。
　　dialogLeft: 距离桌面左的距离。
　　dialogTop: 离桌面上的距离。
　　center:     {yes | no | 1 | 0 }              ：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　help:        {yes | no | 1 | 0 }              ：是否显示帮助按钮，默认yes。
　　resizable: {yes | no | 1 | 0 }IE5＋]   ：是否可被改变大小。默认no。
　　status:      {yes | no | 1 | 0 } IE5+]    ：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
         scroll:      { yes | no | 1 | 0 | on | off } ：指明对话框是否显示滚动条。默认为yes。

  还有几个属性是用在HTA中的，在一般的网页中一般不使用。
         dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
         edge:{ sunken | raised }                     ：指明对话框的边框样式。默认为raised。
         unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

传入参数：
要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

test1.htm
====================

test2.htm
====================

test3.htm
====================

可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

test4.htm
===================

test5.htm
===================

常见问题：
1，如何在模态对话框中进行提交而不新开窗口？
如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作：例子，

test6.htm
===================

test7.htm
===================
if(window.location.search) alert(window.location.search)

test8.htm
===================

2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？
答案是不能。但在frame里是可以的。

showModalDialog和showModelessDialog使用心得

一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上就可以了。这句话一般是放在和之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

reload...

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　
　　也要配合，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)
　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。
　　例子：
　　　　现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

　　　　　　一般的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",var_name)
　　　　　　　　//传递var_name变量
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments)//读取var_name变量
　　　　　　　　window.dialogArguments="oyiboy"//设置var_name变量
　　　　这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。
　　　　
　　　　　　以下是我建议使用的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",window)
　　　　　　　　//不管要操作什么变量，只直传递主窗口的window对象
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments.var_name)//读取var_name变量
　　　　　　　　window.dialogArguments.var_name="oyiboy"//设置var_name变量

　　　　　　　　同时我也可以操作var_id变量
　　　　　　　　alert(window.dialogArguments.var_id)//读取var_id变量
　　　　　　　　window.dialogArguments.var_id="001"//设置var_id变量

　　　　　　　　同样还可以对主窗口的任何对象进行操作，如form对象里的元素。
　　　　　　　　window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
　　因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

　　以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。
　　var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"） //打开控制窗口
　　var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px"）　　//打开被控制窗口

　　控制.htm的部份代码。
　　
　　
　　
　　
　　

　　以上关键部份是：
　　　　窗口命名方式：var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"）
　　　　变量访问方式：window.dialogArguments.s2.dialogTop

　　这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了。

小菜毛毛 2010-01-25 14:33 发表评论

使得select选择框也可以输入

小菜毛毛 — Mon, 12 Oct 2009 01:53:00 GMT

小菜毛毛 2009-10-12 09:53 发表评论

JavaScript 颜色梯度和渐变效果 --转载：http://www.cnblogs.com/cloudgamer/

小菜毛毛 — Mon, 14 Sep 2009 02:19:00 GMT

摘要: JavaScript 颜色梯度和渐变效果很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果 0 ? parseFloat(x, 10) * 2.55 : x, 10); } ) } else {//color var mappi... 阅读全文

小菜毛毛 2009-09-14 10:19 发表评论

JS常用代码:五行搞定checkbox全选/全不选

小菜毛毛 — Wed, 19 Aug 2009 09:19:00 GMT

无标题文档

全选/全不选

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lkhdmail/archive/2008/12/16/3530060.aspx

小菜毛毛 2009-08-19 17:19 发表评论

玩转弹出窗口（转）

小菜毛毛 — Tue, 11 Aug 2009 04:35:00 GMT

玩转弹出窗口（转）

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。
　【1、最基本的弹出窗口代码】
　　其实代码非常简单：

1<SCRIPT LANGUAGE="javascript">
2
5SCRIPT>

　　因为这是一段javascripts代码，所以它们应该放在 js脚本结束【3、用函数控制弹出窗口】

　　下面是一个完整的代码：　
　　

1 <html>
2 　　<head>
3 　　<script LANGUAGE="JavaScript">
4 　　
10 　　script>
11 　　head>
12 　　<body onload="openwin()">
13 　　任意的页面内容
14 　　body>
15 　　html>
16

　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？
　
　　方法一：浏览器读页面时弹出窗口；
　
　　方法二：浏览器离开页面时弹出窗口；
　
　　方法三：用一个连接调用：打开一个窗口
注意：使用的“#”是虚连接。
　
　　方法四：用一个按钮调用：

　　【4、同时弹出2个窗口】

　　对源代码稍微改动一下：
　　

　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

　　如下代码加入主窗口区：
　　

1<script language="javascript">
2　　
7　　script>
8

　　加入区：
　　open即可。

　　【6、弹出的窗口之定时关闭控制】

　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？

　　首先，将如下代码加入page.html文件的区：
　　

1 　<script language="JavaScript">
2 　　function closeit() {
3 　　setTimeout("self.close()",10000) //毫秒
4 　　}
5 　　script>

　　然后，再用这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

　　【7、在弹出窗口中加上一个关闭按钮】
　　
　　
　　呵呵，现在更加完美了！
　　
　　【8、内包含的弹出窗口-－－一个页面两个窗口】
　　
　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

1 <html>
2 　　<head>
3 　　<SCRIT LANGUAGE="JavaScript">
4 　　function openwin()
5 　　{
6 　　OpenWindow=window.open("", "newwin", "height=250, 　　
7 　　width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
8 　　//写成一行
9 　　OpenWindow.document.write("<TITLE>例子TITLE>")
10 　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
11 　　OpenWindow.document.write("<h1>Hello!h1>")
12 　　OpenWindow.document.write("New window opened!")
13 　　OpenWindow.document.write("BODY>")
14 　　OpenWindow.document.write("HTML>")
15 　　OpenWindow.document.close()
16 　　}
17 　　SCRIPT>
18 　　head>
19 　　<body>
20 　　<a href="#" onclick="openwin()">打开一个窗口a>
21 　　<input type="button" onclick="openwin()" value="打开窗口">
22 　　body>
23 　　html>
24

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。【9、终极应用--弹出的窗口之Cookie控制】

　　然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

小菜毛毛 2009-08-11 12:35 发表评论

js正则

小菜毛毛 — Mon, 27 Jul 2009 08:33:00 GMT

摘要: JS的正则表达式 //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return fals... 阅读全文

小菜毛毛 2009-07-27 16:33 发表评论

判断checkbox是否至少有选择一项

小菜毛毛 — Tue, 21 Jul 2009 03:01:00 GMT

假设我们有个checkbox叫optHSCameratyp，我们写个函数来判断

function chkCheckBoxChs(objNam){ //檢測是否有選擇多选框的至少一项
   var obj = document.getElementsByName(objNam); //獲取多選框數組
   var objLen= obj.length; //獲取數據長度
   var objYN; //是否有選擇
   var i;
   objYN=false;
   for (i = 0;i< objLen;i++){
   if (obj [i].checked==true) {
   objYN= true;
   break;
   }
   }
   return objYN;

}

然后在递交程式就如此调用：

function okSend()

{

if(chkChsHSC(optHSCameratyp)== false){

   alert('请至少选择一项！');

}

   return;

}

因为checkbox有多个，名字一样，所以在js里面如果简单document.all.checkboxNam根本识别不了到底是哪一个控件，必须用document.getElementsByName，当成一个数组来区分他们

小菜毛毛 2009-07-21 11:01 发表评论

createPopup() 方法

小菜毛毛 — Mon, 08 Jun 2009 14:33:00 GMT

HTML DOM createPopup() 方法

返回 HTML DOM Window 对象参考手册

定义和用法

createPopup() 方法用于创建一个 pop-up 窗口。

语法

window.createPopup()

实例

小菜毛毛 2009-06-08 22:33 发表评论

js操作html的table,包括添加行，添加列，删除行，删除列

小菜毛毛 — Thu, 04 Jun 2009 01:45:00 GMT

记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：

第1/1列	第1/2列	第1/3列	第1/4列	第1/5列
第2/1列	第2/2列	第2/3列	第2/4列	第2/5列
第3/1列	第3/2列	第3/3列	第3/4列	第3/5列
第4/1列	第4/2列	第4/3列	第4/4列	第4/5列
第5/1列	第5/2列	第5/3列	第5/4列	第5/5列
第6/1列	第6/2列	第6/3列	第6/4列	第6/5列
第7/1列	第7/2列	第7/3列	第7/4列	第7/5列
第8/1列	第8/2列	第8/3列	第8/4列	第8/5列
第9/1列	第9/2列	第9/3列	第9/4列	第9/5列

从第行到行
从第列到列

现在做这个问题，看起来简单，但我还是花了很长时间，可能是我的思路不对吧？主要就是用js来操作html，我现在实现了添加行，删除行，添加列，删除列 ，但合并单元格却不能完整的实现 ，主要是表格会乱掉 。现在把这个问题发出来，有兴趣的同仁可以自己在有空的时候研究下，看自己能不能做出来！主要是合并单元格的问题！也可以帮我看看合并单元格的问题。

　我自己实现的部分代码：

html部分写道

从第行到　　　行
从第列到列

生成表格，采用appendChild 写道

添加行，使用appendChild方法写道

function addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
　　document.getElementById(length+1).setAttribute("id",length+2);*/
　　var tr=document.createElement("tr");
　　tr.id=length+1;
　　var td=document.createElement("td");
　　for(i=1;i<4;i++){
　　　　td.id=tr.id+"/"+i;
　　　　td.appendChild(document.createTextNode("第"+td.id+"列"));
　　　　tr.appendChild(td);

　　}
　　document.getElementById("newbody").appendChild (tr);
}

添加行的另一种方法insertRow 写道

function addRow_withInsert(){
　　　varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
　var rowCount =document.getElementById("table").rows.length;

　var countCell=document.getElementById("table").rows.item(0).cells.length;
　for(var i=0;i 　　　var cell=row.insertCell(i);

　　　cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
　　　cell.id=(rowCount)+"/"+(i+1);

　　}
}

删除行，采用deleteRow(row Index) 写道

/*删除行，采用deleteRow(row Index)*/
function removeRow(){
/* var row=document.getElementById("2");
　　var index=row.rowIndex;
　　alert(index);*/
　　　document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}

添加列，采用insertCell(列位置)方法写道

function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
用来获得表格的列数
*/
for(var i=0;i 　　var cell=document.getElementById("table").rows[i].insertCell(2);
　　cell.innerHTML="第"+(i+1)+"/"+3+"列";

}
}

删除列，采用deleteCell(列位置)的方法写道

/*删除列，采用deleteCell(列位置)的方法*/
function removeCell(){
　　for(var i=0;i 　　　　document.getElementById("table").rows[i].deleteCell(0);
　　}
}

合并单元格（未实现）写道

我的代码有问题，主要是表格会乱掉，一直没有改好 ：
function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*开始行*/
var endRow=document.getElementById("endRow").value;/*结束行*/

var beginCol=document.getElementById("beginCol").value;/*开始列*/
var endCol=document.getElementById("endCol").value;/*结束列*/

var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);

/*删除要合并的单元格*/
for(var x=beginRow;x<=endRow;x++){
　　for(var i=beginCol;i<=endCol;i++){
　　　　if(x==beginRow){

　　　　　　document.getElementById("table").rows[x].deleteCell(i+1);

　　　　}
　　　　else{

　　　　　　document.getElementById("table").rows[x].deleteCell(i);

　　　　}

　　　}
　　}
　　　td.rowSpan=(endRow-beginRow)+1;
}

小菜毛毛 2009-06-04 09:45 发表评论

动态增加记录

小菜毛毛 — Mon, 01 Jun 2009 14:07:00 GMT

姓名：
语文：
数学：
外语：

小菜毛毛 2009-06-01 22:07 发表评论

document.createElement("input")动态创建html元素

小菜毛毛 — Mon, 01 Jun 2009 14:02:00 GMT

var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
echkbox.setAttribute("checked","checked");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
alert(document.getElementById("inputid").checked);

ie7显示出来的checkbox居然是未选中的但是alert出来的却是true，而FF一切正常
后来查了半天资料说是ie显示的时候只对状态改变比较敏感
改成
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
echkbox.setAttribute("checked","checked");
alert(document.getElementById("inputid").checked);

一切ok
radio同样是这种情况。

小菜毛毛 2009-06-01 22:02 发表评论

select multiple

小菜毛毛 — Sun, 31 May 2009 01:14:00 GMT

HTML代码：

   " />

   " />

JAVASCRIPT代码：
function addTache(){
  var len= document.getElementById("allTimeLimitmr").length;
  for(var i=0;i    var option = document.getElementById("allTimeLimitmr").options[i];
   if(option.selected == true && option.index!=0){
    var newoption = document.createElement('option');
                newoption.value = option.value;
    newoption.text = option.text;

    document.getElementById("select").add(newoption);
   }
  }
}
function removeTache(){
  var len= document.getElementById("select").length;
  for(var i=0;i       var option = document.getElementById("select").options[i];
   if(option.selected == true && option.index!=0 ){
    var tempoption = document.getElementById("select").options[i];
    document.getElementById("select").options[i].removeNode(true);
   }
  }
}

function submitTache(){

  var len = document.getElementById("select").length;
  var formobject = document.getElementById("alarmRuleForm");
  for(var i=0;i    var option = document.getElementById("select").options[i];
   if(option.index!=0 ){
       var actiontype= "0";
    var input = document.createElement("");
    input.value=option.value;
    formobject.insertAdjacentElement("beforeEnd",input);
   }
  }
  formobject.submit();
}

小菜毛毛 2009-05-31 09:14 发表评论

BlogJava-小菜毛毛技术分享-文章分类-HTML+div+css实践

CSS 资源大全

本文地址：http://www.woiweb.net/top-75-best-design-resources-of-2008.html

字体

css

Logo 设计

图标

设计启发

教程

Photoshop 资源下载

wordpress

开发HTML编辑器

1.添加一个可编辑的iframe

2.设置选中文本的样式

2.1 获取选中的HTML

2.2 替换选中的HTML

2.3 封装一个操作选中HTML的类

2.4 修改选中的HTML的样式

2.5 示例

blog式 日期控件

键盘KeyCode值列表

showModelessDialog()使用详解

使得select选择框也可以输入

JavaScript 颜色梯度和渐变效果 --转载：http://www.cnblogs.com/cloudgamer/

JS常用代码:五行搞定checkbox全选/全不选

玩转弹出窗口（转）

js正则

判断checkbox是否至少有选择一项

createPopup() 方法

HTML DOM createPopup() 方法

定义和用法

语法

实例

js操作html的table,包括添加行，添加列，删除行，删除列

动态增加记录

document.createElement("input")动态创建html元素

select multiple

blog式日期控件