2021.12.7周二二阶段 day_02 js笔记_getelementbyid('inp')-CSDN博客

本文链接：https://blog.csdn.net/WyHHZKA/article/details/121777294

一、听写

// 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;
        }