传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不二晨 黑马程序员官方团队   /  2019-1-13 11:47  /  66 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一.JavaScript函数

函数: 函数就是一种封装,由事件驱动的或者当它被调用时执行的可重复使用的代码块。
定义函数:
function 函数名(){
函数体;
}
数不会自动执行,需要被调用才可以执行
函数名();
函数命名规则:
与变量命名规则一致
1)以字母、、开头2)可以包含数字、字母、 、_开头        2)可以包含数字、字母、、

​       
头2)可以包含数字、字母、、_
3)区分大小写
4)不能使用关键字和保留字
驼峰命名法:若名称由多个单词组成,则从第二个单词开始,首字母大写
区分变量名和函数名
不成文的规定:
函数名 动词
变量名 名词
函数的定义顺序与调用顺序无关
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
            <script type="text/javascript">
             在页面输出5行hello world
                  定义函数
                function printHello(){
                        for(var i=0;i<5;i++){
                                document.write('hello world<br>');
                        }
                }
                printHello();   函数调用
                </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
二.函数参数调用;

形参:函数定义时的参数
实参:函数掉用时的参数
函数的参数理论上可以有无限多少个,多个参数之间使用逗号隔开
函数参数类型不限制
案例1
/打印图形
                        *
                                ***
                                *****
                                *******
                                *********
                                 ...
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
            <script type="text/javascript">
                   function show(row){
                        for(i=1;i<=row;i++){
                                for(j=1;j<=2*i-1;j++){
                    document.write('*');
                                }document.write('<br>');
                        }
                }
             show(5);
                </script>
</body>
</html>
                                         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
案例2
计算长方形的面积
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <script type="text/javascript">
                function calRet(w,h){
                         var w;
                         var h;
                        var area=w*h;
                        console.log(area);
                }
                calRet(20,10);
        </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
案例3:多个函数参数
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <script type="text/javascript">
     function person(name,age,gender){
               var man='先生';
               
               if (!gender) {
                       man='女士';
      }document.write('欢迎'+name+man+'到校访问,年龄为:'+age+'<br>');
  }
                person('小强',60,true);
                person('小强',60,false);
        </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
案例4:时间调用
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <script type="text/javascript">
                   var o=document.getElementById('box');
                function showTime(){
                        //获取年,月,日
                var date = new Date;
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                var day=date.getDate();
                //获取时,分,秒
                var hour=date.getHours();
                var minute=date.getMinutes();
                var second=date.getSeconds();

            hour=add(hour);
            minute=add(minute);
            second=add(second);

                time=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
                o.innerHTML=time;
                }
                function add(num){
               if (num<10) {
                           num='0'+num;
               }
               return num;
                }
         showTime();
         setInterval(showTime,1000);
        </script>
</body>
</html>
---------------------
【转载,仅作分享,侵删】
作者:超哥要逆天
原文:https://blog.csdn.net/weixin_44382073/article/details/86176192


分享至 : QQ空间
收藏

1 个回复

倒序浏览
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马