面试题

一个网页，只包含一个文本框和一个提交按钮,文本框只能6~10个任意数字和字母，输入成功文本框消失，只显示纯文本，点击提交显示"输入了X个数字X个字母",点击网页返回则可以重新输入
<input type="text"/><span id="displayDiv"></span>
<input type="button" onClick="ChangeStatue" value="提交">
<script type="text/javaScript">
function ChangeStatue()
{
}
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

面試題大多數都是網上down的，你查查，估計會有結果，這題其實不難
"输入了X个数字X个字母"
这个用正则把非数字替换掉看length
不知有没有更好的方法
<html>
<head>
<script type="text/javascript">
function ChangeStatue()
{
  var v = document.getElementById("input").value;
  if(v.length < 6 || v.length >10)
  return;

  var pattern = new RegExp("^([0-9]||[A-Za-z])*$");
  if(pattern.test(v))
  {
  document.getElementById("show").style.diplay = "";
  document.getElementById("show").innerHTML = v;
  document.getElementById("submit").style.display = "none";
  document.getElementById("input").style.display = "none";
  }
}

function returnHome()
{
  document.getElementById("show").style.display = "none";
  document.getElementById("submit").style.display = "";
  document.getElementById("input").style.display = "";
}
</script>
</head>
<body>
<div id="show">
</div>
<input type="text" id="input"/>
<input type="button" id="submit" value="submit" onclick="ChangeStatue()"/>
<br/>
<input type="button" value="return" stype="display:none" onclick="returnHome()"/>
</body>
</html>注：计算字母和数字的个数没有实现，自己写下吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function $(id)
{
return (typeof id == 'string')? document.getElementById(id) : id;
}function checkTxt(str)
{
return /^[a-zA-Z0-9]{6,10}$/.test(str);
}function partten(str)
{
var num = 0;
var letter = 0;
var _len = str.length;
var _strTemp = '';
for(var i = 0; i< _len; i++)
{
_strTemp = str.substr(i, 1);
if(!isNaN(_strTemp))
{
num += 1;
}
else
{
letter += 1;
}
}
return [num, letter];
}function changeState(txtID, showID, button)
{
$(txtID).onblur = function(){
var str = this.value;
var v = checkTxt(str);
if(v)
{
$(txtID).style.display = 'none';
$(showID).innerHTML = str;
$(button).onclick = function(){
var p = partten(str);
$(showID).innerHTML = '输入了'+ p[0] +'个数字'+ p[1] +'个字母';
}
}
}
}
</script>
</head>
<body>
<input type="text" id='txt'/><span id="displayDiv"></span>
<input type="button" id='b' value="提交">
<script type="text/javaScript">
changeState('txt', 'displayDiv', 'b');
</script>
</body>
</html>
有你们那么麻烦吗<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script>
function ChangeStatue(){
var expression = /^[A-Za-z0-9]+$/;
var val = $('#test').val();
var _length = val.length;
if(_length >=6 && _length <=10){
if(expression.test(val)){
var model = $('#model').find('span').clone();
$(model).append(val);
$('#test').replaceWith(model);
var number = val.replace(/[^\d]/g,'');
var number_length = number.length;
var English_length = _length - number_length;
alert("有"+number_length+"个数字"+English_length+"个字母");
}
}
}
</script>
</head>
<body>
<input id="test" type="text"/>
<input type="button" onClick="ChangeStatue()" value="提交">
<div id="model" style="display:none">
<span id="displayDiv"></span>
</div>
</body>
</html>
把考卷稍改下下：<script type="text/javaScript">
function $(){
         var o = arguments;
         return o.length == 2 ? o[1](o[0]) : o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) :
         (/^#/.test(o[0]) ? document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))) : null;
}
$(function(){
         $("#input")[1].onclick = function(){
                  var i = 0, str = $("#input")[0].value, final = "只能提交6~10个任意数字和字母，请重新输入。";
                  str.replace(/\d/g, function(){i++}),j = str.length - i;
                  /^[A-Za-z0-9]{6,10}$/.test(str) && ($("#input")[0].style.display = "none", $("displayDiv").innerHTML =
                  "输入了" + i + "个数字" + j + "个字母")||($("#input")[0].value = "", $("displayDiv").innerHTML = final);
         }
})
</script><input type="text"/><span id="displayDiv"></span>
<input type="button" value="提交">
再改进：<script type="text/javaScript">
function $(){
         var o = arguments;
         return o.length == 2 ? o[1](o[0]) : o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) :
         (/^#/.test(o[0]) ? document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))) : null;
}
$(function(){
         $("#input")[1].onclick = function(){
                  var str = $("#input")[0].value, final = "只能提交6~10个任意数字和字母，请重新输入。",
                  n = $(str, function(arg){var i = 0; arg.replace(/\d/g, function(){i++}); return [i, str.length-i]});
                  /^[A-Za-z0-9]{6,10}$/.test(str) && ($("#input")[0].style.display = "none", $("displayDiv").innerHTML =
                  "输入了" + n[0] + "个数字" + n[1] + "个字母")||($("#input")[0].value = "", $("displayDiv").innerHTML = final);
         }
})
</script><input type="text"/><span id="displayDiv"></span>
<input type="button" value="提交">
再改进：<script type="text/javaScript">
function $(){
         var o = arguments;
         return o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) : (/^#/.test(o[0]) ?
         document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))):
         o.length == 2 ? o[1](o[0]) : o.length == 3 ? function(e, t, f){e.attachEvent ?
         e.attachEvent('on'+ t, function(){f.call(e)}):e.addEventListener(t, f, false)}(o[0],o[1],o[2]):
         null
}$(function(){
         $($("#input")[1], "click", function(){
                  var str = $("#input")[0].value, final = "只能提交6~10个任意数字和字母，请重新输入。",
                  n = $(str, function(arg){var i = 0; arg.replace(/\d/g, function(){i++}); return [i, str.length-i]});
                  /^[A-Za-z0-9]{6,10}$/.test(str) && ($("#input")[0].style.display = "none", $("displayDiv").innerHTML =
                  "输入了" + n[0] + "个数字" + n[1] + "个字母")||($("#input")[0].value = "", $("displayDiv").innerHTML = final);
         })
})
</script><input type="text"/><span id="displayDiv"></span>
<input type="button" value="提交">