1、首先我们在sublime_text软件编辑工具里面编写DIV+CSS代码，先把呈现给用户的界面写出来，用户界面代码如下所示。<form name="form1">请输入格式化的数字：<input type="text" name="str"><br><br><br>请输入格式化数字的长度：<input type="text" name="le"><br><br><br>格式化的数字：<input type="text" name="lastStr"><br><br><br><input type="button" name="submit1" onclick="deal();" value="转换"><input type="button" name="submit2" value="刷新" onclick="qc();"></form>我特意写在了form标签里面，这在下面的JS代码中会有用处的；此外我还调用了2个方法，红框中已经标出。
2、代码写好之后，我们用浏览器打开，看看有没有什么失误之处，如果不美观，大家也能修改一下。
3、修改美观之后，我们就开始做功能了，说白了这些功能是JS构造的函数，然后在点击的时候就会触发这个函数，功能就实现了。第一个功能是长度测试方法，使用for方法遍历格式化的长度，然后以0填充空位。代码如下所示。function cscd(str,len){ var strLen=str.length; for(i=0;i<len-strLen;i++) { str="0"+str; } return str;}
4、二个方法是验证用户输入信息的方法，主要是调用第一个函数，将指定的数字格式化为指定长度。代码如下所示：function deal(){if(form1.str.value==""){alert("请输入要格式化的数字！");form1.str.focus();return false;}if(isNaN(form1.str.value)){alert("您输入数字不正确！");form1.str.foucus();return false;}if(form1.le.value==""){alert("请输入格式化的长度！");form1.le.focus();return false;}if(isNaN(form1.le.value)){alert("您输入格式化的长度不正确");form1.le.foucus();return false;}form1.lastStr.value=cscd(form1.str.value,form1.le.value);}
5、接下来就是第三个函数了，这个函数不用调用前面的函数，这是个独立函数，用来刷新的，点击刷新按钮所有文本框的字符串为空。代码如下所示：function qc(){form1.str.value="";form1.le.value="";form1.lastStr.value="";}
6、代码编写完后，接下来就需要测试BUG了，如果有问题则需要继续修改代码。接下来我们测试一下，我们先在第一个框内输入非数字的字符，会提示我们【您输入的数字不正确】。
7、第一个木有问题，接下来我们来看第二个框，我们先在第二个框内输入非数字的字符，会提示我们【您输入的格式化的长度不正确】，这个也木有问题。
8、接下来我们测试第三个框，我们在前两个框内输入6，第三个框内输出000006，经过测试发现木有问题。
