猜数字游戏

来源：互联网发布：让子弹飞隐喻知乎编辑：程序博客网时间：2024/06/10 17:16

<!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 type="text/javascript">
function Play(){
var result;
var time = 0;
var ran = Math.round(Math.random() * 10);
do{
     time++;
  var num = window.prompt("请输入一个0~10之间的数值","");
  if(isNaN(num)){alert("您输入的不是数值，请正确输入正确数值");}
  result = num - ran;
  if(result > 0){
   alert("您输入的数值大了");
   }
   else if(result < 0){
    alert("您输入的数值小了")
    }


  }while(result != 0);
  alert("恭喜你，答对了！这个值是" + ran +",您一共回答了" + time +"次");
}
</script>
</head>

<body>
<input type="button" value="开始" onclick="Play();"/>
</body>
</html>
2

<!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 type="text/javascript">
var ran = Math.round(Math.random() * 10);
var result;
function Test(){
var num = document.getElementById("num").value;
if(num==""){
  return;
}
result = num - ran;
if(result > 0){
   document.getElementById("span").textContent = "输入的数值大了";
   document.getElementById("num").value = "";
   document.getElementById("span").className = "wrong";
   }
   else if(result < 0){
    document.getElementById("span").textContent = "输入的数值小了";
   document.getElementById("num").value = "";
   document.getElementById("span").className = "wrong";
  }else if(result==0){
     document.getElementById("span").textContent = "恭喜正确";
  document.getElementById("span").className = "right";
  }

}
function myrefresh()
{
window.location.reload();
}

setInterval("Test()",1000);

</script>
<style type="text/css">
#num{
width:20px;
border:#06C 1px solid;
padding-left:10px;
padding-right:10px;
color:#063}
label{
font:"楷体", "黑体", "微软雅黑";
color:#C63;
font-size:14px;
font-weight:bolder}
.wrong{
color:#900;
font-size:14px;
font-weight:bold}
.right{
color:#090;
font-size:14px;
font-weight:bold}
</style>
</head>

<body>
<label accesskey="num">请输入一个数值0—10之间：</label>
<input type="text" id="num" maxlength="2"/><br />
<span id="span"></span><br/>
<input type="button" onclick="myrefresh();" value="再来一次" />
</body>
</html>

虽说是个简单的小游戏，但却收获了一些：

1.在第二个程序中，最开始当判断result ！=0时出现了死循环，但是奇怪的是经过一段时间任能得到答案。。。后来通过定时执行程序解决了此问题；

2.因为平时缺少了编程的实践，所以编写中并没有想象的那么一帆风顺，所以第一个程序借鉴了网上别人的程序。

所以还是多多练习好，动手很重要。。

就写这么多了，就当是个总结吧，嘻嘻