特殊的值
- null
- undefined
- NaN （not a number） 非数字的集合 六亲不认，不会和任何人相等，包括自己 规定null==undefined
<script>
// isNaN()
console.log(null === null);
console.log(undefined === undefined);
// 两个等号判断的是值相等
console.log(null == undefined); // 规定
// true转数字
console.log(2 == true); // false
console.log(NaN === NaN); // false
var x = 3;
console.log(typeof x); // number
// isNaN()用于判断是NaN
console.log(isNaN(x)); //false
// !isNaN()用于判断是数字
console.log(!isNaN(x)); //true
// 字符串和字符串比较的时候，比较ASCLL值,是一位一位的比
console.log('a' > 'A'); // true
// 字符串的比较，是一位一位的比
console.log('212' > '2'); // false
// 字符串和数字比较的值 转数字进行比较
console.log('12' > 2);//true
</script>
Math对象
- Math.random() 产生0-1之间的随机数，包含0，不包含1
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round() 四舍五入取整
<script>
var x = Math.random();
console.log(x);
// 0-100之间的随机数
// x = x * 100 ;
x *= 100; //0-100
console.log(x);
x = Math.round(x);
console.log(x);
// 10-20之间的随机整数？？？？
// 0-1之间的随机数 最小值0 x
// 最小值需要变成10 x+10 y 10-11
var y = Math.random(); // 0-1
y = y * 10; // 0-10
y = y + 10; //10-20
// y = Math.round(y); 可能取到最大值20
// y = Math.ceil(y); 可能取到最大值20，取到大值的概率大一点
// y = Math.floor(y); 娶不到最大值，取到小值的概率大一点
console.log(y);
</script>
计算机精度的丢失
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(9999999999999999 == 10000000000000000); // true
精度丢失不止是js的问题，而是计算机的问题
解决方法：
- 四舍五入取整，取小数点
(0.1*10 + 0.2*10)/10 - 小数化为整数
随机数。随机取三位小数
<script>
var x = Math.random();
// 100-1000之间，娶不到1000
x *= 900;
x += 100;
x = Math.floor(x);//向下取整
console.log(x);
var bai = x / 100;
bai = Math.floor(bai)
console.log(bai);
// 取百位的余数
var shi = x % 100 / 10;
shi = Math.floor(shi);
console.log(shi);
var ge = x % 10;
</script>
随机数小结：
- 产生0-1之间的随机数 x
- 产生0-任何值max之间的随机数 x * max
- 产生min-max之间的随机数 x * (max - min) + min
简写：
var a = Math.round(Math.random() * (max - min) + min)
<script>
// 10-20之间
var x = Math.random();
var y = x * (20 - 10) + 10;
// y = Math.round(y) y = Math.ceil(y) 都可以取到最大值
y = Math.floor(y) // 娶不到最大值
var si = Math.random();
// si = si * (10000 - 1000) + 1000 ;
// si = Math.floor(si)
si = si * (9999 - 1000) + 1000;
si = Math.round(si);
// 1234
var qian = Math.floor(si / 1000);
// 234
var bai = Math.floor(si % 1000 / 100);
// 34
var shi = Math.floor(si % 100 / 10);
var ge = Math.floor(si % 10 / 1);
// 3682s 小时，分钟，秒 1 1 22s
var s = 3682;
var day = Math.floor(s / (24 * 3600));
var hour = Math.floor(s % (24 * 3600) / 3600);
var minute = Math.floor(s % 3600 / 60);
var second = s % 60;
console.log(hour, minute, second);
</script>
最大值与最小值
- Math.min();
- Math.max();
操作标签对象
- 认识对象 : 属性 + 方法(函数)
- 带括号的叫函数，列如
console.log() Math.random() Math.floor() document.write(参数) - 不带括号叫属性例如：
obi.value obj.style obj.onclick
<script>
// console.log()
// Math.random() 函数 0-1
// Math.floor()
// 首先找到这个对象 input
// 在文档中 找到id为inp的元素
var oInp = document.getElementById('inp');
console.log(oInp);
oInp.value = '666'
oInp.style.color = 'red'
var oP = document.getElementById('p');
oP.style.color = 'green'
</script>
求和
<body>
<input type="number" id="inp1">
<span>+</span>
<input type="text" id="inp2">
<button id="btn">=</button>
<input type="text" name="" id="result">
<script>
// 拿到相关的对象
var oInp1 = document.getElementById('inp1')
var oInp2 = document.getElementById('inp2')
var oBtn = document.getElementById('btn')
var oResult = document.getElementById('result');
console.log(oInp1, oInp2, oBtn, oResult);
// 注意：如果出现null 表示对象没有拿到手 -- id写错了
// var n1 = oInp1.value ;
// console.log(n1); // 拿不到数据 因为js在页面打开的时候，就执行完毕了
// 当点击按钮的时候，用户就已经输入了两个数字
// 绑定点击事件
oBtn.onclick = function() {
// alert(666)
// 拿到第一个输入框的值
var n1 = oInp1.value;
console.log(n1);
// 拿第二个输入框的值
var n2 = oInp2.value;
console.log(n2);
// 发现页面上的数据都是字符串
var sum = n1 * 1 + Number(n2);
console.log(sum);
// 计算的结果赋值给输入框
oResult.value = sum;
}
</script>
</body>
判断语句
程序的三大流程控制语句
- 顺序结构 从上而下执行代码
- 选择结构 判断
- 循环结构 重复的做一件
单分支语句：有条件的执行代码
语法:
if(条件) { 条件满足时执行的代码 }
// 此处的每一条单分支语句都会执行判断
if(light === 'green') {
alert('go');
}
if(light === 'red') {
alert('stop');
}
if(light === 'yellow') {
alert('wait');
}
//这种不建议写，执行效率低，每一个判断都会执行一次
双分支语句：
语法:
if(条件) { 条件满足执行的代码 } else { 条件不满足执行的代码 }
var score = 66 ;
if(score >= 60) {
alert('666')
}
else {
alert('下个班见');
}
多分支语句：
多分支：
语法:
if(条件) { 条件满足执行的代码 }
else if(条件2) { 条件不满足执行的代码 }
else if(条件3) { 条件不满足执行的代码 }
...
else { 以上条件都不满足就执行这里 }
var light = 'red';
if (light === 'red') {
alert('stop')
} else if (light === 'green') {
alert('go')
} else if (light === 'yellow') {
alert('wait')
}
// 底下的else可有可无
else {
alert('灯坏了')
}
if的嵌套
if() { if() {} }
例题做一个简易计算器
<body>
//先拿对象,尽量不要把拿对象放在点击对象里面，因为这个事件会执行很多次
//section的使用，option里面的value要么写要么不写，不能空着，js在获取值的时候，优先拿value，没有value就拿option的内容。
//value不能提前保存。
<input type="text" id="inp1">
<select id="fuhao">
<option value="" disabled selected> 请选择运算符</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="inp2">
<button id="btn">=</button>
<input type="text" id="inp3">
<script>
//拿对象
var oInp1 = document.getElementById("inp1")
var oInp2 = document.getElementById("inp2")
var oInp3 = document.getElementById("inp3")
var oBtn = document.getElementById("btn")
var oFuhao = document.getElementById("fuhao")
//console.log(inp1)
//绑定点击事件
oBtn.onclick = function() {
var a = oInp1.value
var b = oInp2.value
var result = oInp3.value
if (a === "" || b === "") {
alert("输入不能为空")
} else if (isNaN(a) || isNaN(b)) {
alert("请输入数字")
} else {
if (oFuhao.value === "+") {
result = Number(a) + Number(b);
inp3.value = result
} else if (oFuhao.value === "-") {
result = Number(a) - Number(b);
inp3.value = result
} else if (oFuhao.value === "*") {
result = Number(a) * Number(b);
inp3.value = result
} else if (oFuhao.value === "/") {
result = Number(a) / Number(b);
inp3.value = result
}
}
}
</script>
</body>
例题讲一个随机五位数分解位数
<body>
<div class="box_center">
<button id="btn1">随机五位数</button>
<input type="text" id="inp1">
<button id="btn2">分解</button>
<br/>
<div class="box">
<span>万位：</span><input type="text" id="inp2">
<span>千位：</span><input type="text" id="inp3">
<span>百位：</span><input type="text" id="inp4">
<span>十位：</span><input type="text" id="inp5">
<span>个位：</span><input type="text" id="inp6">
</div>
</div>
<script>
var oBtn1 = document.getElementById("btn1")
var oBtn2 = document.getElementById("btn2")
var x;
oBtn1.onclick = function() {
//随机数：
x = Math.floor(Math.random() * (100000 - 10000) + 10000);
inp1.value = x;
var y = x;
console.log(x)
oBtn2.onclick = function() {
var a = Math.floor(y / 10000);
inp2.value = a;
var b = Math.floor(y % 10000 / 1000);
inp3.value = b;
var c = Math.floor(y % 1000 / 100);
inp4.value = c;
var d = Math.floor(y % 100 / 10);
inp5.value = d;
var e = Math.floor(y % 10);
inp6.value = e;
}
}
</script>
</body>
例题做年月日的判断
<body>
<span>年</span>
<input type="text" id="year">
<span>月</span>
<input type="text" id="month">
<span>日</span>
<input type="text" id="day">
<button id="btn">判断</button>
<script>
// 要求：判断输入的日期是否合法
// 年1000-2000之间
// 思路：
// 先判断年份
// 再判断月份
// 再判断日期
var oYear = document.getElementById('year');
var oMonth = document.getElementById('month');
var oDay = document.getElementById('day');
var oBtn = document.getElementById('btn');
// 写点击
oBtn.onclick = function() {
// 判断年
var y = oYear.value;
if (y >= 1000 && y <= 2000 && y % 1 === 0) {
// 判断月份
var m = oMonth.value;
if (m >= 1 && m <= 12 && m % 1 === 0) {
// 判断日期
var d = oDay.value;
// 日期判断是根据月份来判断
var maxDay;
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
maxDay = 31
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
maxDay = 30
} else if (m == 2) {
// 2月的天数根据年判断
if (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
maxDay = 29
} else {
maxDay = 28
}
}
if (d >= 1 && d <= maxDay && d % 1 === 0) {
alert('ok')
} else {
alert('天数输入错误')
}
} else {
alert('月份输入错误')
}
} else {
alert('年份输入错误')
}
}
</script>
</body>
