前端学习笔记：js 第二天--运算符、流程控制语句IF、循环、函数、变量的作用域、DOM元素控制、抽奖案例

运算符：

• 赋值运算符 =    +=    -=    *=   /=
• 算数运算符 + - * /除以 %(求余)余数有正负 正负由被除数决定
• 关系运算符  ==  === !=  !==  >=  <=  >  <得到的都是布尔类型
  • ==判断值是否相等不考虑类型  ===判断是否一模一样
• 逻辑运算符 &&与  ||或  !取反
  • &&只要有一个为假，结果就为假  ||只要有一个为真，结果就为真

 <script>
           
            // 把a的值赋值给a
            var a=2;
            // a=a+2;简写为a+=2;
            // a+=2;
            // a=a-2 简写为a-=2;
            // a=a/2 简写为a/=2;
            // a=a*2 简写为a*=2;
           
            console.log(10/3);
            console.log(10%-3);

            console.log(-a);
          
            console.log(1===1);
            console.log(1!='1');
            a=800;
            // 代码分步执行 布尔类型和数值类型比较的时候，强制转换
            // console.log(10<a<100)
          
            // 纯数值与或非的情况下。得到的也是数值。
            // console.log(a>10&&a<100);
            // 代码从左到右执行
            console.log(2&&3&&4&&0&&3)
            console.log(0||0||4||4||3)
        </script>

流程控制语句IF

格式一

if（条件）{

        条件为真的时候，执行代码。

}

格式二

if（条件）{

        条件为真的时候，执行代码。

}else{

        条件为假的时候，执行代码。

}

<script>
            var a=prompt('请输入工资');
            a=parseInt(a);
          
             //if(age<18){
                 // 弹出框
               // alert('年龄大小了')
              //  }

             if(age<18){
                 alert('年龄不够')
             }else{
                 alert('上网吧')
             }


            //0是假 undefined是假 
            // 字符串都为真
            // if(!1){
            //     console.log('hahah')
            // }

</script>

多条件判断：（if语句有跳楼现象）

 if(条件1){

        条件1为真的时候，执行完该语句，直接跳出

 }else if(条件2){

          条件2为真的时候，执行

 }else if(条件3){

              条件3为真的时候，执行

}.....

   else{

          以上条件都不符合的时候，执行

          }

 <script>

if(a<=36000){
                // 不同变量类型，如果需要拼接，使用+
                alert('您需要缴税'+a*0.03);
            }else if(a<=144000){
                var sum=36000*0.03+(a-36000)*0.1;
                alert('您需要缴税'+sum)
            }else if(a<=300000){
                var sum=36000*0.03+(144000-36000)*0.1+(a-144000)*0.2;
                alert('您需要缴税'+sum)
            }else if(a<=420000){
                var sum=36000*0.03+(144000-36000)*0.1+(300000-144000)*0.2+(a-144000)*0.2;
                alert('您需要缴税'+sum)
            }
        </script>

循环

循环：用来实现遍历的代码 有顺序

• 第一步：执行a,初始化
• 第二步：判断是否符合b，如果符合，执行第三步，否则跳出循环
•  第三步：执行循环体，执行c。重复执行第二步

 <script>
        //for(a初始化;b条件;c继续下去的条件/次数){
                // 循环体
            // }


        for(var a=1;a<=100;a++){
               console.log(a);
          }
    
</script>

函数

函数：封装性，把重复的代码封装起来，一般这些代码具有特殊的用途

函数的定义 ：函数名字命名规则和变量名命名规则一样

  <script>
    // function 函数名字(){
            //     函数体
            // }
            // 函数的使用 函数名字()

            // 定义函数
            function fn(){
                console.log('zsh')
                console.log('sh')
            }

            // 使用函数，相当于执行函数体的代码
            fn()
          
        </script>
        

有参函数：

定义函数的时候的参数，称为形参 相当于声明变量

使用函数的时候的参数，称为实参 相当于给变量赋值

 <script>
            
            // 定义函数的时候的参数，称为形参 相当于声明变量
            function  fn(a){
                console.log(a)
            }
          
            fn(2)
            fn(3)
        </script>

有返回值的函数：

使用函数得到的就是return后面的内容

<script>
    
            function fn(a,b){
                // 使用函数得到的就是return后面的内容
                return a+b;
            }
            var c=fn(1,2)
            document.write(c)

            function mul(a,c){
                return a*c
            }
            mul(12,2)
        </script>

变量的作用域

在js中声明的变量，只有函数的作用域。

声明的变量的作用范围。向上寻找距离该变量最近的开始的函数的{ 变量的作用范围就是该{之内}。

<script>

        function fn(){  
          var a=10;
          console.log(a)
           }

        fn()
        var b;
       console.log(b);
        //不会报错 打印undefined

</script>

变量会把声明提升到整个作用域的最前面，赋值还是在原来的位置

<script>
        console.log(a);
         var a=100;

         // 等价于
        // var a;
        // console.log(a)
        // a=100;
        

</script>

全局变量和局部变量同时存在，局部变量生效

<script>
         var a=1;
        function fn(){
             console.log(a);
            var a='hello';
            // var a;
            console.log(a);
            // a='hello'
         }
         fn();

</script>

没有声明的变量，作用域是赋值以后生效(不建议写)

         <script>
                  a=100;
                 console.log(a);
                 console.log(b);
                 b=100;
        </script>

DOM元素的控制

数组：数组存储的就是一组数据

 获取数组某一个元素  ：数组名字[下标]下标从0开始

获取数组的长度：数组名字.length;

通过ID名获取标签：document.getElementById('id名')；

事件：获取标签.on+事件类型(click)=function(){执行的代码}；

修改内容：获取标签.innerHTML='修改的内容'

产生随机数：Math.random() 产生0-1之间的随机数 含0不含1

定时器： setInterval(function(){每隔一段时间，执行的代码},时间ms)

停止定时器：clearInterval(定时器名字)

 <body>
        <button id="btn">按钮</button>
       
        <script>
            
            var list=['a','b','c','d'];
            
            console.log(list[2])
            // 数组长度 数组名字.length
            console.log(list.length)
            
            var tag=document.getElementById('btn');
          
            tag.onclick=function(){
               
                tag.innerHTML='点过了';
                
                console.log(Math.random())
                
                // 定时器可以叠加
                setInterval(function(){
                    console.log(Math.random())
                   
                },1000)
            }
        </script>
    </body>

抽奖案例：

html

<body>
        <!-- id名类似于我们的身份证号，是唯一的 -->
        <button id="start">开始</button>
        <button id="end">结束</button>
        <h4 id="txt">开始抽奖吧</h4>

       
    </body>

js

 <script>
            var start=document.getElementById('start');
            var end=document.getElementById('end');
            var txt=document.getElementById('txt');
            var list=['ddd','xxx','vvvv','aaa','bbb','CCC','XXX'];
            var timer;
            // 点击开始
            start.onclick=function(){
               clearInterval(timer)
               timer= setInterval(function(){
                    // 下标的随机数就产生了
                    var n=parseInt(Math.random()*list.length);
                    console.log(n);
                    // 修改html内容
                    txt.innerHTML=list[n];
                },50)
            }
            // 点击结束
            end.onclick=function(){
               
                // 停止定时器clearInterval(定时器名字)
                clearInterval(timer)；
            }
            
        </script>