JavaScript 10.29

JavaScript第四天 函数

1.1函数的概述

我们现在的计算机科学 还没有脱离数学的范畴。 是应用数学的另一种表现形式。 计算中很多的术语都源于数学。所以 函数这个名词其实也是源于数学。
​
​
我们之前学过很多语句，例如
​
if(){}                条件语句 ， 控制大括号代码块 是否执行。
for(){}               循环语句，  控制大括号代码块 执行多少次。
function(){}          函数，控制大括号代码块 何时执行。 函数实在调用的时候才会去执行。

1.2 函数的声明和调用

函数声明：
​
    function  名字(){
         代码块
​
    }
​
函数调用：
   函数名();
​
<script type="text/javascript">
            
            /* 函数声明之后   代码是不执行的  */
             function  haha(){
                
                document.write("123"); 
                document.write("123"); 
                document.write("123"); 
                 
             }
            
            /* 只有调用函数的时候 才会去执行  并且调用多少次 就 执行多少次 */
            haha();
            haha();
            haha();
            
            
        </script>

1.3 函数事件绑定

点击页面按钮 改变背景颜色
​
<body>
​
   
​
        <button   onclick="haha()">改变</button>
​
<!-- ---------------------------------------------------------------------------------------------------- -->
​
        <script type="text/javascript">
            /*   who button  when  onclick   what  改变背景颜色     */    
            
            function haha(){
                document.body.style.backgroundColor = "red";
            }
            
        </script>
    </body>
​
​
​
​
​
点击按钮改变图片：
​
       <button  onclick="haha1()">红</button>
       <button  onclick="haha2()">黄</button>
       <button  onclick="haha3()">蓝</button>
       <button  onclick="haha4()">绿</button>
       
       <img    id="foo"   src=""  width="200"  height="200">
​
<!-- ---------------------------------------------------------------------------------------------------- -->
​
       <script type="text/javascript">
       
            function  haha1(){
                foo.src = "img/d_1.png";
            }
            function  haha2(){
                foo.src = "img/d_2.png";
                foo.style.width = "800px";
            }
            function  haha3(){
                foo.src = "img/d_3.png";
            }
            function  haha4(){
                foo.src = "img/d_4.png";
            }
       </script>
    
​
​

1.4 红蓝切换

1.4.1 判断当前状态的思想

​
       <button  onclick="haha()">红/蓝</button>
<!-- ---------------------------------------------------------------------------------------------------- -->
​
       <script type="text/javascript">
        
            function   haha(){
                
                if(  document.body.style.backgroundColor  ==  "red" ){
                    document.body.style.backgroundColor = "blue";
                }else{
                    document.body.style.backgroundColor = "red";
                }
                
            }
             
            
       </script>
​
​
​
        
     <button  onclick="haha()">红/蓝</button>
      
       <div  id="foo"  >123</div>
​
<!-- ---------------------------------------------------------------------------------------------------- -->
​
       <script type="text/javascript">
        
            function   haha(){
                if(foo.style.backgroundColor ==  "blue"){
                    foo.style.backgroundColor = "red";
                    foo.style.width = "400px";
                    foo.style.height = "400px";
                }else{
                    foo.style.backgroundColor = "blue";
                    foo.style.width = "200px";
                    foo.style.height = "200px";
                }
            }
             
            
       </script>
​
​
   
​
       <button id="foo" onclick="haha()">已读</button>
      
<!-- ---------------------------------------------------------------------------------------------------- -->
​
       <script type="text/javascript">
        
            function   haha(){
                
                if( foo.innerHTML == "已读"   ){
                    foo.innerHTML = "未读";
                    foo.style.backgroundColor = "red";
                }else{
                    foo.innerHTML = "已读";
                    foo.style.backgroundColor = "green";
                }
                
            }
             
            
       </script>
​

1.4.2 记录点击次数


  <button onclick="haha()">改变颜色</button>
​
        <script type="text/javascript">
        
            /* 思考题：为什么i定义 要在函数外面   写到里面有什么问题*/
            var  i = 0;
            
            function haha() {
                 if(i%2 == 0){
                     document.body.style.backgroundColor = "red";
                 }else{
                     document.body.style.backgroundColor = "yellow";
                 }
                 
                i++;
            }
        </script>
​

1.5 猜数字

<input  id="foo"  ><button onclick="guess()">猜</button>
        <div  id="bar">请开始猜数字</div>
​
​
        <script type="text/javascript">
        
           var  b =   parseInt(  Math.random() *100 ) ;
        
             function guess(){
                  
                 //  1 获取 input中输入的内容
                 var  a = foo.value;
                 //  2 和正确答案比较                                                                                                                                      
                 if(a>b){
                     //  3 将结果显示到div中
                      bar.innerHTML  = "猜大了";
                 }else if (a<b){
                      bar.innerHTML  = "猜小了";
                 }else{
                      bar.innerHTML  = "猜对了";
                 }
             }
        
        </script>
​

1.6 简易计算器

<body>
​
        <p>
            一个数 ： <input  id="haha">            
        </p>
        <p>
            一个数 ： <input  id="hehe" >           
        </p>
        <button  onclick="jia()">加</button>
        <button  onclick="jian()">减</button>
        <button  onclick="cheng()">乘</button>
        <button  onclick="chu()">除</button>
        
        <div  id="foo"></div>
​
​
        <script type="text/javascript">
            function  jia(){
                // 1 获取两个输入框的值
                // 2 将两个 值相加
                // 3 将结果显示到div中
                foo.innerHTML = Number(haha.value) + Number(hehe.value);
            }
            function  jian(){
                foo.innerHTML = Number(haha.value) - Number(hehe.value);
            }
            function  cheng(){
                foo.innerHTML = Number(haha.value) * Number(hehe.value);
            }
            function  chu(){
                foo.innerHTML = Number(haha.value) / Number(hehe.value);
            }
        </script>
    </body>
​

1.7 函数中的参数


参数就是函数中可变部分，用来在函数执行的时候 区分执行内容
参数就是一个特殊的变量。因为其声明是在函数的小括号中，赋值是在函数的调用小括号中
​
        <script type="text/javascript">
            
            
            function  haha(a,b,c) {
                
                document.write("你好 世界"+a+b+c);
                
            }
            
            
            haha();
            haha(1);
            haha(1,2);
            haha(1,789,456);
            
        </script>
​
使用参数来优化 前面计算器代码
    <body>
​
        <p>
            一个数 ： <input  id="haha">            
        </p>
        <p>
            一个数 ： <input  id="hehe" >           
        </p>
        <button  onclick="heihei(1)">加</button>
        <button  onclick="heihei(2)">减</button>
        <button  onclick="heihei(3)">乘</button>
        <button  onclick="heihei(4)">除</button>
        
        <div  id="foo"></div>
​
        <script type="text/javascript">
            function  heihei(a){
                if(a == 1) foo.innerHTML = Number(haha.value) + Number(hehe.value);
                if(a == 2) foo.innerHTML = Number(haha.value) - Number(hehe.value);
                if(a == 3) foo.innerHTML = Number(haha.value) * Number(hehe.value);
                if(a == 4) foo.innerHTML = Number(haha.value) / Number(hehe.value);
            }
            
        </script>
​
​
    </body>

 

posted @ 2021-10-29 19:08  吴光熠  阅读(92)  评论(0)    收藏  举报