重温数据类型（猜数字游戏）

很久以前写了个猜数字游戏，原理就是用js生成一个随机数，然后用户输入一个数字去与这个随机书进行比较是否相等。代码如下

https://github.com/hyz1997/numberRiddle/blob/master/index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>猜数字游戏</title>
    
    <style type="text/css">
        .main {
        	position: relative;
        	left: 500px;
        	top: 200px;
        	width: 400px;
        	height: 400px;
        	background: lightgreen;
        	border-radius: 50%;
        }
        .main p {
        	display: block;
        	position: relative;
        	left: 110px;
        	top: 150px;
        	font-size: 24px;
        	font-family: "方正喵呜体";
        	color: green;
        }
        #text {
            display: block;
            position: relative;
            left: 122px;
            top: 180px;
            padding-left: 45px;
            width: 80px;
            height: 80px;
            border: 3px yellow solid;
        	border-radius: 40%;
        	background: lightgreen;
        }
        #button {
            position: relative;
            top: 210px;
            left: 170px;
        }
    </style>
</head>
<body>
    <div class="main">
    	<p>猜一个数字吧</p>
    	<input type="text" id="text" value="">
    	<input type="button" id="button" value="提交">
    </div>


    <script type="text/javascript">
       var num = Math.floor(Math.random()*1000+1);
       var patt = /^(?!00)(?:[0-9]{1,3}|1000)$/;
       var rendom ="1-1000"; 
       var id = "text";
       console.log("哈哈你很聪明哟，知道打开控制台，要猜的数字是"+num);
       function numberRiddle () {
            var text = parseInt(document.getElementById(id).value);
                    if (num == ''||patt.test(text)==false) {
                        alert("请输入"+rendom+"的数字");
                    }
                    else {
                        if (num>text) {
                           alert("你猜小了，大胆一点吧"); 
                        }else if(num<text) {
                            alert("你猜大了，人家很腼腆的");
                        }else {
                            alert("你猜对了，不过没什么奖励");
                        }
                        
                    }  
       }
       window.onload = function() {           
           document.getElementsByTagName('input')[1].addEventListener("click",numberRiddle,false);      
        }
    </script>
</body>
</html>

近日准备整理文件上传github，又重写了这个游戏，然后发现几个问题。

首先我们要对用户输入的值进行判断，首先要判断它是不是数值。

判断数值的方法有很多，我首先想到了typeof方法

我是这样写的

var text = document.getElementById('text').value;
console.log(typeof(text))

然后报错：typeof is not a function。后来我查到，typeof是一个操作符而不是函数，因此圆括号尽管可以使用，但不是必须的。

然后我又想到先把text的值praseInt成数值类型

var text = parseInt(document.getElementById('text').value);
//如果text的值是字符串
console.log(text);//NaN

那我想就可以这样了

if (num == ''||test==NaN) {
                        alert("请输入"+rendom+"的数字");
                    }

但事实是NaN是一个非数值，不与任何值相等。

最后我选择了用正则表达式来判断的方法，十分简单，这里就不讲了。

写这篇问主要是为了记录遗忘的两个javascript基础知识点，然后我在去看了一遍高程的第三章，每一次看高程，都有不一样的新发现。关于新发现，我已经记录在文章javaScript基础概念小知识点集中，您可以阅读并提出建议

posted @ 2017-12-05 22:52  叫我小红依吧  阅读(268)  评论(0)  编辑  收藏  举报