Several common controls are recommended (New DHTML controls). Note: Since windows built-in controls are directly used, the following code does not consider compatibility issues. To make the page display normally, you need to enable ActiveX in the browser.
1. Microsoft Masked Edit Control, version 6.0.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft Masked Edit Control, version 6.0 </TITLE> </HEAD> <BODY onload = "init () "> <input type =" text "id =" result "readonly \> <input type =" button "value =" value "onclick =" getValue () "\> <BR \> <object id =" MaskEdit "WIDTH =" 160 "HEIGHT =" 25 "CLASSID =" CLSID: c932BA85-4374-101B-A56C-00AA003668DC> </OBJECT> <SCRIPT LANGU AGE = "JavaScript"> <! -- Function init () {MaskEdit. foreColor = 255; MaskEdit. mask = "IP :###. ###. ###. ### ";} function getValue () {result. value = MaskEdit. text;} // --> SCRIPT </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
2. Microsoft Date and Time Picker Control, version 6.0
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft Date and Time Picker Control, version 6.0 </TITLE> </HEAD> <BODY onload = "init ()"> <object id = "DatePicker" WIDTH = "120" HEIGHT = "25" codebase =" http://activex.microsoft.com/controls/vb6/MSComCt2.cab "CLASSID =" CLSID: 20dd1b9e-87c4-11d1-8be3-rjf8754da1 "> </OBJECT> <p id =" result "> </p> <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 + "Year" + DatePicker. month + "Month" + DatePicker. day + "Day"; // --> SCRIPT </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Add codebase so that users who have not installed it can also use it...
3. Microsoft Slider Control, version 6.0
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft Slider Control, version 6.0 </TITLE> </HEAD> <BODY onload = "init ()"> current value: <input type = "text" id = "currentValue" \> <input type = "button" value = "Set value" onclick = "setValue () "\> <BR \> maximum value: <input type = "text" id = "maxValue" \> <input type = "button" value = "Set value" onclick = "setMax () "\> <BR \> <object id =" Slider "WIDTH =" 300 "CL ASSID = "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 </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
4. Microsoft Common Dialog Control, version 6.0.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft Common Dialog Control, version 6.0 </TITLE> </HEAD> <BODY> <input type = "button" value = "open" onclick = "showOpen () "\> <input type =" button "value =" color "onclick =" showColor () "\> <input type =" button "value =" save "onclick =" showSave () "\> <input type =" button "value =" help "onclick =" showHelp () "\> <input type =" button "val Ue = "print" onclick = "showPrinter ()" \> <input type = "button" value = "font" onclick = "showFont () "\> <BR \> [Result]: <BR \> <p id = "result" width = "100%"> </p> <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 = "text file (*. txt) | *. txt | all files (*. *) | *. * "; CDC. dialogTitle = "Open File"; CDC. showOpen (); result. innerText = "file name:" + CDC. fileName;} function showSave () {CDC. dialogTitle = "Save result"; CDC. filter = "text file (*. txt) | *. txt | all files (*. *) | *. * "; CDC. showSave (); result. innerText = "File Name: "+ CDC. fileName;} function showFont () {CDC. showFont (); result. innerText = "Font:" + CDC. fontName + ", size:" + CDC. fontSize + CDC. fontBold? ", Bold": "" + CDC. FontItalic? ", Italic": "";} function showColor () {CDC. showColor (); result. innerHTML = "color value (RGB): #" + CDC. color. toString (16) + ", color value (Long):" + CDC. color + "" ;}// --> SCRIPT </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
5. Microsoft TabStrip Control, version 6.0.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft TabStrip Control, version 6.0 </TITLE> </HEAD> <BODY onload = "init () "> <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", "pen"); TabStrip. tabs. add (2, "tab2", "ink"); TabStrip. tabs. add (3, "tab3", "paper"); TabStrip. tabs. add (4, "tab4", "");} // --> SCRIPT <script language = "JavaScript" for = "TabStrip" event = "Click"> <! -- Result. value = TabStrip. SelectedItem. Caption; // --> SCRIPT </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
6. Microsoft ProgressBar Control, version 6.0.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> Microsoft ProgressBar Control, version 6.0 </TITLE> </HEAD> <BODY onload = "init () "> <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 </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]