example11.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. #container {
  8. width: 450px;
  9. margin: 0 auto;
  10. }
  11. #num {
  12. text-align: center;
  13. display: inline-block;
  14. width: 180px;
  15. height: 30px;
  16. border: none;
  17. border-bottom: 1px solid darkgray;
  18. font-size: 18px;
  19. outline: none;
  20. }
  21. #ok, #reset {
  22. background-color: red;
  23. color: white;
  24. width: 120px;
  25. height: 30px;
  26. font-size: 18px;
  27. border: none;
  28. cursor: pointer;
  29. outline: none;
  30. }
  31. #hint {
  32. text-align: center;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div id="container">
  38. <input id="num" type="text" placeholder="请输入你猜的数字">
  39. <button id="ok">确定</button>
  40. <button id="reset">重新开始</button>
  41. <div id="hint"></div>
  42. </div>
  43. <script src="js/mylib.js"></script>
  44. <script>
  45. (function() {
  46. function guess() {
  47. total += 1;
  48. var numStr = $('num').value;
  49. var num = parseInt(numStr);
  50. if (num == numStr) {
  51. var hint = '你猜的是' + num + ', ';
  52. if (num < answer) {
  53. hint += '大一点!';
  54. } else if (num > answer) {
  55. hint += '小一点!';
  56. } else {
  57. hint += '恭喜你猜对了!';
  58. $('ok').disabled = true;
  59. $('num').disabled = true;
  60. if (total > 7) {
  61. hint += '<br>智商捉急!!!';
  62. }
  63. }
  64. $('hint').innerHTML += '<p>' + hint + '</p>';
  65. } else {
  66. alert('输入错误, 请重新输入!');
  67. }
  68. $('num').value = '';
  69. $('num').focus();
  70. }
  71. var answer = parseInt(Math.random() * 100 + 1);
  72. var total = 0;
  73. bind($('num'), 'keypress', function(evt) {
  74. evt = evt || window.event;
  75. if (evt.keyCode == 13) {
  76. guess();
  77. } else if (evt.keyCode < 48 || evt.keyCode > 57) {
  78. preventDefault(evt);
  79. }
  80. });
  81. bind($('ok'), 'click', guess);
  82. bind($('reset'), 'click', function() {
  83. answer = parseInt(Math.random() * 100 + 1);
  84. total = 0;
  85. $('hint').innerHTML = '';
  86. $('num').disabled = false;
  87. $('ok').disabled = false;
  88. });
  89. })();
  90. </script>
  91. </body>
  92. </html>