Code
<!DOCTYPE html>
<html>
<head>
<title>Chicken And Rabbit</title>
</head>
<body>
<div class="wrap">
<div>
<input type="text" name="" id="head" placeholder="Please insert head quantity">
<input type="text" name="" id="leg" placeholder="Please insert leg quantity">
<input type="button" name="" id="btn" value="Calculate">
</div>
<div id="tip"></div>
<div id="answer">
<p>Chicken :<strong></strong></p>
<p>Rabbit :<strong></strong></p>
</div>
</div>
</body>
<script type="text/javascript">
var headInput = document.getElementById('head');
var legInput = document.getElementById('leg');
var btn = document.getElementById('btn');
var tip = document.getElementById('tip');
var results = document.getElementById('answer').getElementsByTagName('strong');
btn.onclick = function() {
results[0].innerHTML = "";
results[1].innerHTML = "";
var headVal = Number(headInput.value);
var legVal = Number(legInput.value);
var sum = headVal + legVal;
if (sum != sum) {
tip.innerHTML = "Please insert number";
} else if (parseInt(sum) != sum) {
tip.innerHTML = "Please insert INT number";
} else {
var resultObj = calculate(headVal, legVal);
if (JSON.stringify(resultObj) == '{}') {
tip.innerHTML = "The number provided can't get results";
} else {
tip.innerHTML = "";
results[0].innerHTML = resultObj.chicken;
results[1].innerHTML = resultObj.rabbit;
}
}
}
function calculate(head, leg) {
var result = {};
var rabbit = leg / 2 - head;
var chicken = head - rabbit;
if (rabbit * chicken > 0 && parseInt(rabbit) == rabbit) {
result = {
'rabbit' : rabbit,
'chicken' : chicken
}
};
return result;
}
</script>
</html>
细节
1. 数学计算
鸡数x，兔数y，总头a，总腿b
x + y = a
2x + 4y = b
-------> y = b / 2 - a
2.Number()方法
用于将字符串转化为数字
如果输入的不是合法数字，Number()将返回NaN
3.判断输入的是否为数字
isNaN()方法
如果非数字，返回true
4.整数检测
输入值不能是小数
用parseInt()方法取整后再做判断
5.没有内容的对象的检测
{} == {}; ?
不可行，因为这是两个对象
处理方法：
1)枚举
var obj = {};
function checkObj(obj) {
for(var i in obj) {
if(obj.hasOwnProperty(i)){
return false; // 不为空对象
}
}
return true; // 空对象，返回true
}
checkObj(obj);
对于没有内容的空对象（{}），i并不会被赋值，for-in中的内容也不会执行
2)Object.keys(obj)
var obj = {};
var checkResult = Object.keys(obj);
console.log(checkResult.length);
该方法类似于枚举，但是，是直接调用Object的keys方法，方法的返回值为所有可枚举属性的字符串数组。如果当前对象为空（{}），则返回一个空数组
3）JSON.stringify()
var obj = {};
console.log(JSON.stringify(obj) == '{}')
JSON.stringify()方法，用于将JSON对象解析为字符串，即可和{}比较
4)Object.getOwnPropertyNames(obj)
var obj = {};
var checkResult = Object.getOwnPropertyNames(obj);
console.log(checkResult.length);
返回对象自己的属性的名称，返回值为一个数组，因此可以通过length属性，进行判断，如果length长度为0，则代表该对象为空
属性的可枚举性和所有权
可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个 Symbol）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。一个对象的所有的属性可以一次性的获取到。
网友评论