weirhp/jsNumGuess.html

## jsNumGuess.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js版猜数字</title>
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<style type="text/css">
#guessResult {
  width: 150px; margin: 5px auto 0 5px; border: solid 1px #a7c0d6; border-collapse: collapse; background: #fff
}

#guessResult thead tr td {
  background: #d8e8fe; height: 23px; line-height: 23px; font-weight: normal; text-align: center; color: #00299d;
  border-right: solid 1px #a7c0d6; border-bottom: solid 1px #a7c0d6;
}

#guessResult tbody tr td {
  background: #fff; height: 23px; line-height: 23px; padding-top: 3px; padding-left: 10px;
  border-right: solid 1px #a7c0d6; border-bottom: solid 1px #a7c0d6; color: #333333; text-align: center;
}

#guessResult tr.error td {
  background-color: #FFEFD5;
}

#guessResult tr.right td {
  background-color: #E0FFFF;
}

#guessCount {
  color: blue;
}

#msg {
  color: red;
}

#guessNext {
  display: none;
}
</style>
<script type="text/javascript">
  var randNum = 0;
  var guessCount = 0;
  //产生一个1到100的数字
  function makeRandNum() {
    return parseInt(Math.random() * 100 + 1)
  }
  //生成一个
  randNum = makeRandNum();

  $(function() {
    $('#num').keyup(function() {
      this.value = this.value.replace(/\D/, '');
    });

    $('#btGuess').click(
        function() {
          var num = $('#num').val();
          $('#num').val('');
          var resultMsg = '';
          if (!num || num > 100) {
            $('#msg').val('请输入1~100之间的数字！');
          } else {
            guessCount++;
            var clazz = 'error';
            if (num == randNum) {
              resultMsg = '对了';
              $('#guessNext').show();
              $('#guess').hide();
              clazz = "right";
            } else if (num > randNum) {
              resultMsg = '大了';
            } else {
              resultMsg = '小了';
            }
            $('#guessResult tbody').append(
                '<tr class="'+clazz+'"><td>' + num + '</td><td>' + resultMsg + '</td></tr>');
            $('#guessCount').text(guessCount);
          }

        });
    $('#btGuessNext').click(function() {
      $('#guessNext').hide();
      $('#guess').show();
      $('#guessCount').text('0');
      $('#guessResult tbody tr').remove();
      randNum = makeRandNum();
      guessCount = 0;
    });
  });
</script>
</head>
<body>
  <div id="main">
    <h1>js版猜数字</h1>
    <div id="guess">
      <input id="num" type="text" /> <input id="btGuess" type="button" value="猜" /> <span id="msg"></span>
    </div>
    <div id="guessNext">
      <input id="btGuessNext" type="button" value="再来" />
    </div>
    <div id="guessPanel">
      <div>
        你一共猜了<span id="guessCount">0</span>次！
      </div>
      <table id="guessResult">
        <thead>
          <tr>
            <td style="width: 50px;">数值</td>
            <td style="width: 100px;">结果</td>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>js版猜数字</title>
	<script type="text/javascript" src="js/jquery1.7.2.js"></script>
	<style type="text/css">
	#guessResult {
	width: 150px; margin: 5px auto 0 5px; border: solid 1px #a7c0d6; border-collapse: collapse; background: #fff
	}

	#guessResult thead tr td {
	background: #d8e8fe; height: 23px; line-height: 23px; font-weight: normal; text-align: center; color: #00299d;
	border-right: solid 1px #a7c0d6; border-bottom: solid 1px #a7c0d6;
	}

	#guessResult tbody tr td {
	background: #fff; height: 23px; line-height: 23px; padding-top: 3px; padding-left: 10px;
	border-right: solid 1px #a7c0d6; border-bottom: solid 1px #a7c0d6; color: #333333; text-align: center;
	}

	#guessResult tr.error td {
	background-color: #FFEFD5;
	}

	#guessResult tr.right td {
	background-color: #E0FFFF;
	}

	#guessCount {
	color: blue;
	}

	#msg {
	color: red;
	}

	#guessNext {
	display: none;
	}
	</style>
	<script type="text/javascript">
	var randNum = 0;
	var guessCount = 0;
	//产生一个1到100的数字
	function makeRandNum() {
	return parseInt(Math.random() * 100 + 1)
	}
	//生成一个
	randNum = makeRandNum();

	$(function() {
	$('#num').keyup(function() {
	this.value = this.value.replace(/\D/, '');
	});

	$('#btGuess').click(
	function() {
	var num = $('#num').val();
	$('#num').val('');
	var resultMsg = '';
	if (!num \|\| num > 100) {
	$('#msg').val('请输入1~100之间的数字！');
	} else {
	guessCount++;
	var clazz = 'error';
	if (num == randNum) {
	resultMsg = '对了';
	$('#guessNext').show();
	$('#guess').hide();
	clazz = "right";
	} else if (num > randNum) {
	resultMsg = '大了';
	} else {
	resultMsg = '小了';
	}
	$('#guessResult tbody').append(
	'<tr class="'+clazz+'"><td>' + num + '</td><td>' + resultMsg + '</td></tr>');
	$('#guessCount').text(guessCount);
	}

	});
	$('#btGuessNext').click(function() {
	$('#guessNext').hide();
	$('#guess').show();
	$('#guessCount').text('0');
	$('#guessResult tbody tr').remove();
	randNum = makeRandNum();
	guessCount = 0;
	});
	});
	</script>
	</head>
	<body>
	<div id="main">
	<h1>js版猜数字</h1>
	<div id="guess">
	<input id="num" type="text" /> <input id="btGuess" type="button" value="猜" /> <span id="msg"></span>
	</div>
	<div id="guessNext">
	<input id="btGuessNext" type="button" value="再来" />
	</div>
	<div id="guessPanel">
	<div>
	你一共猜了<span id="guessCount">0</span>次！
	</div>
	<table id="guessResult">
	<thead>
	<tr>
	<td style="width: 50px;">数值</td>
	<td style="width: 100px;">结果</td>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	</div>
	</body>
	</html>