Tip: you can modify some code before running
<html><head> <title>Dynamic password input control code demonstration</title><script type="text/javascript" language="javascript">// Define global container IDvar OBJID = "layerDisplay"; // object selector function $ (obj) {return document. getElementById (obj);} // load the function load () {var id = OBJID; // control the internal HTML $ (id ). innerHTML = ""; // reload the library $ (id ). innerHTML = getControl (); // Display $ (id ). style. display = "block" ;}// hide function hide () {var id = OBJID; $ (id ). style. display = "none" ;}// obtain the control function getControl () {var strHtml = ""; // initialize the keyboard strHtml + = initNum (5 ); // OK button strHtml + ="<input type="button" id="btnReload" name="btnReload" value="Rest" class="command" onclick="load()"/>"; // Hide the button strHtml + ="<input type="button" id="btnHide" name="btnHide" value="Hide" class="command" onclick="hide()"/>"; // Set the button and display return strHtml;} function addNum (obj) {var strVal = null; // empty object if (null = obj) {return ;} // empty string or invalid string strVal = obj. value; if ("" = strVal | 0 = strVal. length) {return;} // Append the string $ ("txtDisplay "). value + = strVal // load ()} // initialize the function initNum (line) {var strHtml = ""; var arr = new Array () if (line <1 | line> 10) {return;} // compile a random array while (arr. length <10) {// returns the integer var num between 0-9. = Math. floor (10 * Math. random (); // traverse the array to find the empty var flag = false; for (var I = 0; I <arr. length; I ++) {if (arr [I] = num) {flag = true; break ;}} if (! Flag) {arr [arr. length] = num ;}// list of output buttons for (var I = 9; I >=0; I --) {strHtml + ='<input type="button" class="number" value="' + arr[i] + '" onclick = "addNum(this)" />'; // Control line feed if (0 = (I % line) {strHtml + ='<br />';}} Return strHtml}</script><style type ="text/css">Input {border: 1px solid # CCC; margin: 1px ;}. text {height: 20px; width: 200px; font-size: 28px ;}. number {height: 20px; width: 20px; color: # 00F ;}. command {height: 20px; width: 50px; color: # F00 ;}# layerDisplay {position: absolute; top: 40px; left: 10px; z-index: 1000; border: 1px solid # CCC; background-color: # EEE; display: none ;}</style></head><body><input type="text" id="txtDisplay" name="txtDisplay" onfocus ="load(OBJID)" value="http://www.111cn.net" /><div id="layerDisplay"></div></body></html></td> </tr></table>
Tip: you can modify some code before running
