0
0

JavaScript函数

1.函数的定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
    function f1(){//function：函数关键字 f1：函数名
     alert("测试")//函数体
     
  }
    </script>    
    </body>
</html>

2.函数的调用

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--onclick 当被点击的时候-->
        <button onclick="fb()">按钮</button>
    <script>
        var fb=()=>{
          //是一个函数
          document.write("调用了")
        }
    </script>    
    </body>
</html>

注：

** **函数定义要写在script里面；

** function是定义函数的关键字**

** f1是函数名，命名规则一般采用驼峰命名法**

** onclick是鼠标点击事件(鼠标点击时触发按钮)**

** 花括号里面是要执行的函数体**

二、自定义函数

1.函数的返回值问题

  • js中的函数不需要指定返回类型
  • js中的函数可以返回任意类型
  • js中的函数一定会有返回类型,如果没有return,则为undefined

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
function fa(a){//不需要指定返回类型
         console.log("Hello")
        if(a){
            return "yes"//可以返回字符串类型
        }
        return false//也可以返回布尔类型
        }
    </script>    
    </body>
</html>

2.return的作用

  • 用于给函数设置返回值
  • 用于中断函数运行

3.函数的参数问题

  • 参数不需要指定类型
  • 调用函数的时候不会对参数的个数进行判断
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>

    //1 无参函数
    function 函数名(){
        //javascript代码;
    }
   //2.有参函数
    function 函数名(参数1,参数2,...){
        //javascript代码;
    }
   //3.带返回值函数（无参）
    function 函数名(){
        return 返回值或变量;
    }
   //4.带返回值函数（有参）
    function 函数名(参数1,参数2,...){
        return 返回值或变量;
    }

    </script>    
    </body>
</html>

三、函数类型

1.匿名函数

//匿名函数
    (function (){
        //匿名函数调用的方式
    })();

2.普通函数

//普通函数
   function f1(){//function：函数关键字 f1：函数名
     alert("测试")//函数体
    }

3.高阶函数

        //高阶函数
        //可以将函数作为参数
         function fb(a,b){
             return a(b)
         }
        
         fb(fa,"1")

4.箭头函数

//箭头函数  普通函数的简写
        var fb=()=>{
          //是一个函数
          document.write("调用了")
        }

四、window对象

1.screen ：有关客户端的屏幕和显示性能的信息

  • screen.width 返回显示屏幕的宽度
  • screen.height 返回显示屏幕的宽度

2.history ：关客户访问过的URL的信息

  • history.go(-1) 页面后退一步(相当于点击页面左上角的后退箭头)
  • history.go(1) 页面后退一步(相当于点击页面左上角的前进箭头)
  • history.back() 跳转到历史列表中的前一个URL(如果存在)
  • history.forward() 跳转到历史列表中的下一个URL
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="https://www.baidu.com">点我</a>
        <button onclick="back()">返回</button>//返回的按钮
        <button onclick="forward()">前进</button>//前进的按钮
        <input type="button" value="返回" onclick="history.go(-1)"/>
        <input type="button" value="前进" onclick="history.go(1)"/>
    <script>
        //window对象 是整个js当中最大的对象
        //history 历史记录
        function back(){
            history.back();//跳转到历史列表中的前一个URL(如果存在)    
        }
        function forward(){
            history.forward();//跳转到历史列表中的下一个URL
        }
        
    </script>
    </body>
</html>

3.location ：有关当前URL的信息

  1. location.href='目的路径' 设置想要跳转的页面（自己跳过去）
  2. location.reload() 刷新本界面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onclick="f1()">点我</button>//跳转界面的按钮
        <button onclick="f2()">刷新</button>//刷新界面的按钮    
    <script>
       function f1(){
            //跳转页面 去百度
            location.href="https://www.baidu.com"
        }
        function f2(){
            //刷新页面
            location.reload();        
        }
    </script>
    </body>
</html>

五、window常用函数

1.弹框

  • alert（"你好！！"）提示框
  • confirm : （“确定删除吗？”）询问框
  • prompt : （“请输入”）输入框

2.设置定时器

  • 设置定时器 : setTimeout
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
        //设置定时器
         setTimeout(function(){
         alert("炸弹炸了")
        },3000)//时间
            </script>
    </body>
</html>

效果图如下：

  • 设置循环定时器：setInterval
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
      //设置循环定时器
        setInterval(function(){
            console.log("炸弹炸了")
        },1000)//时间
            </script>
    </body>
</html>

效果图如下：

3.清除定时器 clearTimeout （清空普通定时器） clearInterval（清空循环定时器）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
//清除定时器
         var a=0;
         //i是定时器的编号
         var i=setInterval(function(){
             a++;
            console.log("炸弹炸了")
            if(a==10){//执行10次  第十次停止
                 clearInterval(i)
             }
         },1000)//时间
</script>
    </body>
</html>

六、内置函数

  • 修改元素的方法（1.innerHTML 2.textContent）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>    
        <h3 id="h3">Hello World</h3>
        <h3 id="h4">你好</h3>
    <script>
setInterval(()=>{
            //修改元素的方法
            //textContent  文本内容
            h3.textContent="你好世界"
            //innerHTML html内容
            h4.innerHTML="<kbd>"+new Date().toLocaleTimeString()+"</kbd>"
        },1000)
</script>
    </body>
</html>

效果图如下：（前=>后）

  • Date 时间函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
     var today=new Date(); //获取当前时间
     var year=today.getFullYear(); //得到年
     var month=today.getMonth(); //得到月
     var day=today.getDay(); //得到星期几
     var date=today.getDate(); //得到日
     var hh=today.getHours(); //得到时
     var mm=today.getMinutes(); //得到分
     var ss=today.getSeconds(); //得到秒
</script>
    </body>
</html>

  • Math 数学函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script>
        console.log(Math.max(1,2,3,4,5));//取最大值
        console.log(Math.ceil(1.99));//向上取整
        console.log(Math.floor(1.99));//向下取整
        console.log(Math.round(1.99));//四舍五入
        //随机出来的一定是小数[0,1)
        console.log(Math.random());//随机
        //1-10
        console.log(Math.floor(Math.random()*10)+1)

</script>
    </body>
</html>

总结

** 以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript的函数，之后会有更多关于JavaScript的文章，敬请期待。**

标签： javascript
本文转载自: https://blog.csdn.net/weixin_62270300/article/details/123168531
版权归原作者 時宜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript函数”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航