推荐发几个常用控件(新加DHTML控件)_javascript技巧

注意:由于是直接使用windows内置控件,以下的代码都没有考虑兼容问题。要使页面正常显示需要开启浏览器的ActiveX。
1.Microsoft Masked Edit Control, version 6.0

<title> Microsoft Masked Edit Control, version 6.0 </title> <input type="text" id="result" readonly> <input type="button" value="取值" onclick="getValue()"> <br><br> <object id="MaskEdit" width="160" height="25" classid="CLSID:C932BA85-4374-101B-A56C-00AA003668DC"> </object> <script language="JavaScript"> <!-- function init(){ MaskEdit.ForeColor = 255; MaskEdit.Mask = "IP: ###.###.###.###"; } function getValue(){ result.value=MaskEdit.Text; } //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.Microsoft Date and Time Picker Control, version 6.0

<title> Microsoft Date and Time Picker Control, version 6.0 </title> <object id="DatePicker" width="120" height="25" codebase="http://activex.microsoft.com/controls/vb6/MSComCt2.cab" classid="CLSID:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1"> </object> <div id="result"></div> <script language="JavaScript"> <!-- function init(){ DatePicker.CalendarBackColor = 8421631; DatePicker.CalendarForeColor = 65280; DatePicker.CalendarTitleBackColor = 16744576; DatePicker.CalendarTitleForeColor = 65535; DatePicker.CalendarTrailingForeColor = 255; DatePicker.CheckBox=true; } //--> </script> <script language="JavaScript" for="DatePicker" event="Change"> <!-- result.innerHTML = "GMT：" + DatePicker.Value + " Custom:" + DatePicker.Year + "年" + DatePicker.Month + "月" + DatePicker.Day + "日"; //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

添加codebase,使没有安装过的用户也可以使用...
3.Microsoft Slider Control, version 6.0

<title> Microsoft Slider Control, version 6.0 </title> 当前值：<input type="text" id="currentValue"> <input type="button" value="设值" onclick="setValue()"><br> 最大值：<input type="text" id="maxValue"> <input type="button" value="设值" onclick="setMax()"><br> <object id="Slider" width="300" classid="CLSID:F08DF954-8592-11D1-B16A-00C0F0283628"> </object> <script language="JavaScript"> <!-- function init(){ currentValue.value=0; Slider.max=100; maxValue.value=Slider.max; } function setValue(){ Slider.value=currentValue.value; } function setMax(){ Slider.max=maxValue.value; } //--> </script> <script language="JavaScript" for="Slider" event="Scroll"> <!-- currentValue.value=Slider.value; //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

4. Microsoft Common Dialog Control, version 6.0

<title> Microsoft Common Dialog Control, version 6.0 </title> <input type="button" value="打开" onclick="showOpen()"> <input type="button" value="颜色" onclick="showColor()"> <input type="button" value="保存" onclick="showSave()"> <input type="button" value="帮助" onclick="showHelp()"> <input type="button" value="打印" onclick="showPrinter()"> <input type="button" value="字体" onclick="showFont()"> <br><br> [结果]: <br> <div id="result" width="100%"></div> <object id="CDC" classid="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"> </object> <script language="JavaScript"> <!-- function showHelp(){ CDC.ShowHelp(); } function showPrinter(){ CDC.ShowPrinter(); } function showOpen(){ CDC.InitDir = "%windir%"; CDC.Filter = "文本文件(*.txt)|*.txt|全部文件(*.*)|*.*"; CDC.DialogTitle = "打开文件"; CDC.ShowOpen(); result.innerText = "文件名：" + CDC.FileName; } function showSave(){ CDC.DialogTitle = "保存结果"; CDC.Filter = "文本文件(*.txt)|*.txt|全部文件(*.*)|*.*"; CDC.ShowSave(); result.innerText = "文件名：" + CDC.FileName; } function showFont(){ CDC.ShowFont(); result.innerText = "字体：" + CDC.FontName + ",大小：" + CDC.FontSize + CDC.FontBold?",粗体":"" + CDC.FontItalic?",斜体":"" ; } function showColor(){ CDC.ShowColor(); result.innerHTML = "<font color='#" + CDC.color.toString(16) + "'>颜色值(RGB):#" + CDC.color.toString(16) + ",颜色值(Long):" + CDC.color + ""; } //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

5.Microsoft TabStrip Control, version 6.0

<title> Microsoft TabStrip Control, version 6.0 </title> <input type="text" value="" id="result"> <br> <object id="TabStrip" width="400" height="300" classid="CLSID:1EFB6596-857C-11D1-B16A-00C0F0283628"> </object> <script language="JavaScript"> <!-- function init(){ TabStrip.Tabs.Clear(); TabStrip.MultiRow=true; // TabStrip.Tabs.Add ([pvIndex],[pvKey],[pvCaption],[pvImage]); TabStrip.Tabs.Add (1, "tab1", "笔"); TabStrip.Tabs.Add (2, "tab2", "墨"); TabStrip.Tabs.Add (3, "tab3", "纸"); TabStrip.Tabs.Add (4, "tab4", "砚"); } //--> </script> <script language="JavaScript" for="TabStrip" event="Click"> <!-- result.value = TabStrip.SelectedItem.Caption; //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

6.Microsoft ProgressBar Control, version 6.0

<title> Microsoft ProgressBar Control, version 6.0 </title> <input type="text" id="result"> <br> <object id="ProgressBar" width="300" height="10" classid="CLSID:35053A22-8589-11D1-B16A-00C0F0283628"> </object> <script language="JavaScript"> <!-- function init(){ ProgressBar.Max = 100; setInterval ("Progressing()",100); } function Progressing(){ if (ProgressBar.Value<ProgressBar.Max) { ProgressBar.Value++; result.value = ProgressBar.Value * 100 / ProgressBar.Max + "%" ; } } //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]