一、听写
// 1 页面的三种输出
// alert()
// console.log()
// document.write()
// 2 基本数据类型
// string number boolean null undefined
// 3 变量命名的要求和规范
// 数字,字母,下划线,$组成;数字不能开头;不能使用关键字和保留字;
// 使用组合或者驼峰;做到见名知意
// 4 判断数据类型的方法 typeof
// 5 数据类型的强制转化 Number() String() Boolean()
// 6 逻辑运算的短路操作
// && 见假及假 每一个条件都必须满足
// || 见真即真 只需要满足一个条件
// 7 算术运算符的隐式转化
// +
// 转字符串 表达式中有字符串就转字符串
// 转数字 表达式没有字符串 true+false
// - * / % 转数字
// 1+2*3+''+4+5
// 转化的结果
// 转数字
// Number('hello') 'hello' * 1 NaN
// Number('123') '123' * 1 123
// Number(''/' ') '' * 1 0
// Number(true) true * 1 1
// true 1
// false 0
// null 0
// undefined NaN
// 转字符串 ''
// 转布尔值
// 大部分都是true,5个false '' 0 NaN null undefined
二、自增自减
// ++自加,自己加1
// ++在前面,先自加,再赋值
// ++在后面,先赋值,再自加
var x = 4 ;
// var y = x++ + ++x ;
// var y = (x++) + (++x) ; // 10
// a b
// 4 x=5 x=6 6
// console.log(y);
var y = x++ + x + --x + x-- ;
// 4 5 4 4
console.log(y);
三、特殊的值
// null
// undefined
// NaN not a number 非数字的集合!!!!!!
// 六亲不认,不会和任何人相等,包括自己
// 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));
//!isNaN()用于判断是数字
console.log(!isNaN(x));
//字符串和字符串比较的时候,比较ACSLL值,是一位一位的比
console.log('a' > 'A'); //?
//字符串的比较,是一位一位的比
console.log('212'>'2'); //false
// 字符串和数字比较的值,转数字进行比较
console.log('12' > 2);
四、Math对象
// Math.random() 产生0-1之间的随机数,包含0,不包含1
// Math.ceil() 向上取整
// Math.floor() 向下取整
// Math.round() 四舍五入取整
// 随机取一个三位数,把每一个取出来 123
var n = Math.random();
n = n * 900 ;
n = n + 100 ;
n = Math.floor(n);
x = n / 100 ;// 百
x = Math.floor(x);
y = n % 100 / 10 ; // 十
y = Math.floor(y);
z = n % 10; // 个
z = Math.floor(z);
console.log(n); //100-999三位数
console.log(x); //百
console.log(y); //十
console.log(z); //个
五、计算机精度丢失
// 精度丢失不止是js的问题,而是计算机的问题
// 1.四舍五入取整,取小数点(0.1*10+0.2*10)/10
// 2.小数化为整数
console.log(0.1+0.2); // 0.30000000000000004
console.log(0.2+0.2);
console.log(9999999999999999 == 10000000000000000);//true
六、 随机取三位数
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 ;
七、随机数的小结
// 产生0-1之间的随机数 x
// 产生0-任何值max之间的随机数 x * max
// 产生min-max之间的随机数 x * (max - min) + min
// 10-20之间
var x = Math.random() ;
var y = x * (20 - 10) + 10 ;
// y = Math.round(y)
// y = Math.ceil(y) 都可以取到最大值
y = Math.floor(y) // 娶不到最大值
//求一个四位数 1234
var n = Math.random();
n = n * 9000 + 1000;
n = Math.floor(n);
var qian = Math.floor( n / 1000);
var bai = Math.floor( n % 1000 / 100);
var shi = Math.floor( n % 100 / 10);
var ge = Math.floor( n % 10);
console.log(n);
console.log(qian);
console.log(bai);
console.log(shi);
console.log(ge);
// 求一个五位数 12345
var x = Math.random();
x = x * (100000-10000)+10000;
x = Math.floor(x);
var wan = Math.floor(x/10000);
var qian = Math.floor(x % 10000 / 1000)
var bai = Math.floor(x % 1000 / 100)
var shi = Math.floor(x % 100 / 10 )
var ge = Math.floor(x % 10)
console.log(x);
console.log(wan);
console.log(qian);
console.log(bai);
console.log(shi);
console.log(ge);
//3682s 小时,分钟,秒 1 1 22s
var n = Math.round(Math.random()*(10000-1000)+1000);
var hour = Math.floor(n / 3600) ;
var min = Math.floor(n % 3600 / 60) ;
var s = Math.floor(n % 60) ;
console.log(n);
console.log(hour,min,s );
//*****s 天 ,小时,分钟,秒
var n = Math.round(Math.random()*(100000-10000)+10000);
var day= Math.floor(n / 3600 / 24);
var hour= Math.floor(n % ( 24 * 3600) / 3600 );
var min = Math.floor(n % 3600 / 60) ;
var s = Math.floor(n % 60) ;
console.log(n);
console.log(day,hour,min,s );
八、随机数简化
// 产生min-max之间的随机数 x * (max - min) + min
// var x = Math.random() ;
// var y = x * (max - min) + min ;
// y = Math.round(y);
var a = Math.round(Math.random()*(max - min) + min)
console.log(a);
// a = (Math.random()*(max-min)+min)
九、最大值和最小值
var min = Math.min(3 , 2 , 32 , 1 , 0);
console.log(min);
var max = Math.max(3 , 2 , 32, 1 , 0);
console.log(max);
十、标签操作对象
//认识对象 : 属性 + 方法(函数)
// 对象.姓名
// 对象.性别
// 对象.爱好
// 对象.敲代码('hello world')
// 带括号的叫函数
// 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'
十一、求和
//加法
<input type="text" name="" id="inp1">
<span>+</span>
<input type="text" name="" id="inp2">
<button id="btn">=</button>
<input type="text" name="" id="result">
// 加法
var oInp1 = document.getElementById('inp1');
var oInp2 = document.getElementById('inp2');
var oBtn = document.getElementById('btn');
var oResult = document.getElementById('result');
oBtn.onclick = function () {
// alert(666)
//拿到第一个输入框的值
var n1 = oInp1.value;
//拿到第二个输入框的值
var n2 = oInp2.value;
//字符串转数字
var sum = Number(n1) + Number(n2);
//计算的结果赋给输入框
oResult.value = sum ;
}
// 减法
<input type="text" id="inp3">
<span>-</span>
<input type="text" id="inp4">
<button id="btn1">=</button>
<input type="text" id="result2">
// 减法
var oInp3 = document.getElementById('inp3');
var oInp4 = document.getElementById('inp4');
var oBtn1 = document.getElementById('btn1');
var oResult2 = document.getElementById('result2');
oBtn1.onclick = function () {
var n3 = oInp3.value;
var n4 = oInp4.value;
var sum1=Number(n3) - Number(n4);
oResult2.value = sum1
}
十二、判断语句
// 程序的三大流程控制语句
// 顺序结构 从上而下执行代码
// 选择结构 判断
// 循环结构 重复的做一件
// 单分支语句: 有条件的执行代码
// 语法:
// if(条件){
// 条件满足时执行的代码
// }
// 双分支:
// 语法:
// if(条件){
// 条件满足执行的代码
// }
// else{
// 条件不满足执行的代码
// }
//多分支:
// 语法:
// if(条件){
// 条件满足执行的代码
// }
// else if(条件2){
// 条件不满足执行的代码
//}
// else if(条件3){
// 条件不满足执行的代码
//}
// ...
// else{
//以上条件都不满足就执行这里
// }
// var light = 'green' ;
// 此处的每一条单分支语句都会执行判断
// if(light === 'green'){
// alert('go');
//}
// if(light === 'red'){
// alert('stop');
//}
// if(light === 'yellow'){
// alert('wait');
// }
// var score = 66 ;
// if(score >= 60){
// alert('666')
// }
// else{
// alert('下个班见');
// }
// 这种不建议写,执行效率低,每一个判断都会执行一次
// if(score >= 60) {
// alert(666)
// }
// if(score < 60){
// alert('下个班见');
// }
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(){
// if(){
// }
// }
十四、判断是正数还是负数
var oInp = document.getElementById('inp');
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
var n = oInp.value;
//判断是否输入
if(n === ''){
alert('输入不能为空')
}
//不为空
else{
//判断是不是数字
if(isNaN(n)){
alert('请输入数字')
}
//是数字
else{
//
if(n>0){
alert('是正数')
}
else{
alert('是负数')
}
}
}
}
十五、简易计算器
var oInp1 = document.getElementById('inp1');
var oInp2 = document.getElementById('inp2');
var oBtn = document.getElementById('btn');
var oFuHao = document.getElementById('fuHao');
var oResult = document.getElementById('result');
oBtn.onclick = function () {
// 拿到第一个值
var n1 = oInp1.value;
// 拿到第二个值
var n2 = oInp2.value;
// 拿到符号的值
var fuHao = oFuHao.value;
//判断是否为空
if (n1 === ''|| n2 === ''){
alert('请不要为空')
}
else{
//判断是否为数字
if(isNaN(n1) || isNaN(n2)) {
alert('请输入数字')
}
else{
if (fuHao === '+'){
var sum = Number(n1)+ Number(n2);
}
else if(fuHao === '-'){
var sum = Number(n1)-Number(n2);
}
else if(fuHao === '*'){
var sum = Number(n1) * Number(n2);
}
else if(fuHao === '/'){
var sum = Number(n1) / Number(n2);
}
}
}
oResult.value = sum;
}