java基础62 JavaScript中的函数（网页知识）

1、JavaScript中，函数的格式

function 函数名(形参列表){
    函数体;
}

2、JavaScript中，函数需要注意的细节

    1.在javaScript中，函数定义形参时，是不能使用var关键字声明变量。
    2.在javaScript中，没有返回值类型，如果函数需要返回给调用者,直接返回（return）即可，如果不需要返回，则不返回。
    3.在javaScript中，没有重载的概念，后定义的函数会覆盖前面定义的函数。
    4.在javaScript中，任意函数内部都隐式维护了一个arguments(数组)的对象，给函数传值的时候，会先传递给arguments对象，然后再由arguments对象分配数据给形参。

3、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>JavaScript中的函数的练习</title>
 6 </head>
 7 <script type="text/javascript">
 8     //需求：定义一个函数做加法运算
 9     function add(a,b){
10         var c=a+b;
11         document.write(c+"<br/>");//返回值：33  //打开下面的函数后，这里没有输出任何值，已经被下面的函数覆盖了
12         return c;
13     } 
14     //var d=add(11,22,13,34,14,15);
15     //document.write(d+"<br/>");//返回值：33
16     
17     add(11,22,13,34,14,15)
18     function add(a,b,c){
19         var d=a+b+c;
20         document.write(d+"<br/>");//返回值：46
21         document.write(arguments.length);//返回值：6  //获取内部维护的数组arguments的(数组)长度
22     }
23 </script>
24 <body>
25 </body>
26 </html>

实例结果图

附录1（查询本月份共有多少天）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>JavaScript函数练习</title>
 6 </head>
 7 <script type="text/javascript">
 8     //需求：输入月份查询本月份共有多少天，用弹出框的形式
 9     function getNowFormatDate(){//获取系统当前年份
10         var date = new Date();
11         var Year = date.getFullYear();
12         return Year;//谁调用该函数，就把值给谁
13     }
14     
15     function showDay(){
16         //找到对应标签的对象
17         var inpuobj=document.getElementById("month");
18         var month=inpuobj.value;//获取页面输入的值
19         /*    
20         month=parseInt(month);
21         switch(month){
22             case 1:
23             case 3:
24             case 5:
25             case 7:
26             case 8:
27             case 10:
28             case 12:
29             alert("本月有31天");
30             break;
31         
32             case 4:
33             case 6:
34             case 9:
35             case 11:
36             alert("本月有30天");
37             break;
38         
39             case 2:
40             alert("本月有29天");
41             break;
42         
43             default:
44             alert("您的输入有误，请重新输入！");
45             break;
46         }
47         */
48         var year = getNowFormatDate();//调用getNowFormatDate()函数,把该函数中获取到的系统当前年份赋值给year
49         if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
50             alert("本月有31天");
51         }else if(month == 2){
52             if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){
53                 alert("今年是闰年，本月有29天");
54             }else{
55                 alert("今年是平年，本月有28天");
56             }
57         }else if(month == 4 || month == 6 || month == 9 || month == 11){
58             alert("本月有30天");
59         }else{
60             alert("您的输入有误，请重新输入！");
61         }
62     }
63 </script>
64 <body>
65     月份:<input type="text" id="month"/>&nbsp;<input type="button" value="查询" onClick="showDay()"/>
66 </body>
67 </html>

结果图

附录2 （日历练习1）

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>JavaScript简单日历</title>
  6 </head>
  7 <style type="text/css">
  8     #div1{
  9         width:425px;
 10         height:420px;
 11         border:1px solid gray;
 12     }
 13     #div2{
 14         width:390px;
 15         height:390px;
 16         margin:auto;
 17         margin-top:15px;
 18     }
 19     #div21{
 20         width:220px;
 21         height:72px;
 22         margin:auto;
 23         line-height:72px; 
 24         margin:auto;
 25     }
 26     #div22{
 27         width:355px;
 28         height:310px;
 29         margin:auto;
 30     }
 31     #table1{
 32         width:355px;
 33         height:30px;
 34         border-spacing: 30px 33px;
 35     }
 36     #table2{
 37         width:355px;
 38         height:30px;
 39         line-height:30px;
 40         border-spacing:30px 0px;
 41         text-align:center;
 42     }
 43     table tr td {
 44           text-align:center;
 45     }
 46 </style>
 47 
 48 <body>
 49 <div id="div1">
 50     <div id="div2">
 51         <div id="div21">
 52         <button onclick="lastMon()">上一月</button>
 53         <text id="yearAndMon"></text>
 54         <button onclick="nextMon()">下一月</button>    
 55         </div>
 56         <div id="div22">
 57             <table id="table2">
 58                 <tr class="pan">
 59                     <td>日</td>
 60                     <td>一</td>
 61                     <td>二</td>
 62                     <td>三</td>
 63                     <td>四</td>
 64                     <td>五</td>
 65                     <td>六</td>
 66                 </tr>
 67             </table>
 68             <table id="table1"></table>
 69         </div>
 70     </div>
 71 </div>
 72 <script type="text/javascript">
 73     var nowDate=new Date();
 74     var nowYear=nowDate.getFullYear();
 75     var nowMonth=nowDate.getMonth()+1;
 76     //var month=(nowMonth<10?"0"+momth:month);
 77     var text=document.getElementById("yearAndMon");
 78     text.innerText=nowYear+"年"+nowMonth+"月";
 79     var monthDays1=[31,29,31,30,31,30,31,31,30,31,30,31]; 
 80     var monthDays2=[31,28,31,30,31,30,31,31,30,31,30,31]
 81 
 82     function becomeDate(nowYear,nowMonth,nowDate){
 83         var dt=new Date(nowYear,nowMonth-1,1);
 84         var firstDay=dt.getDay();
 85         var table=document.getElementById("table1");
 86         var monthDays=isRunNian();
 87         var rows=5;
 88         var cols=7;
 89         var k=1;
 90         for(var i=1;i<=rows;i++){
 91             var tri=table.insertRow();
 92             for(var j=1;j<=7;j++){
 93                 var tdi=tri.insertCell();
 94                 if(i==1&&i*j<firstDay+1){
 95                     tdi.innerHTML="";
 96                 }else{
 97                     if(k>monthDays[nowMonth-1]){
 98                         break;
 99                     }
100                     tdi.innerHTML=k;
101                     k++;
102                 }
103             }
104         }
105     }
106  
107     function lastMon(){
108         table1.innerHTML="";
109         var text=document.getElementById("yearAndMon");
110         if(nowMonth>1){
111             nowMonth=nowMonth-1;
112         }else{
113             nowYear--;
114             nowMonth=12;
115         }
116         text.innerText=nowYear+"年"+nowMonth+"月";
117         becomeDate(nowYear,nowMonth);
118     }
119  
120     function nextMon(){
121         table1.innerHTML="";
122         if(nowMonth<12){
123             nowMonth=nowMonth+1;
124         }else{
125             nowYear++;
126             nowMonth=1;
127         }
128             var text=document.getElementById("yearAndMon");
129             text.innerText=nowYear+"年"+nowMonth+"月";
130             becomeDate(nowYear,nowMonth);
131     }
132  
133     function isRunNian(){
134         if((nowYear%4==0||nowYear%400==0)&&nowYear%100!=0){
135             return monthDays1;
136         }else{
137             return monthDays2;
138         }
139     }
140     becomeDate(nowYear,nowMonth);
141 </script>    
142 </body>
143 </html>

结果图

附录3（日历练习2）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>JavaScript日历练习</title>
 6 </head>
 7 <style type="text/css">
 8     .today{
 9         background-color:#0078D7;
10     }
11 </style>
12 <script type="text/javascript">
13     function getNowFormatDate(){//获取系统当前年月份
14         var date = new Date();
15         var Year = date.getFullYear();
16         var Month=date.getMonth()+1;
17          Month =(Month<10 ? "0"+Month:Month); 
18          var mydate = (Year+"年"+Month+"月");
19         document.write(mydate+"<br/>");
20         //return mydate;//谁调用该函数，就把值给谁
21     }
22     getNowFormatDate();//必须调用该函数，才会有相应的输出结果；否则什么都没有输出。
23     
24     //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
25     function isLeap(year) {
26         return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
27     }
28     var i, k,
29     today = new Date(),//获取当前日期
30     y = today.getFullYear(),//获取日期中的年份
31     m = today.getMonth(),//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
32     d = today.getDate(),//获取日期中的日(方便在建立日期表格时高亮显示当天)
33     firstday = new Date(y, m, 1),//获取当月的第一天
34     dayOfWeek = firstday.getDay(),//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
35     days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),//创建月份数组
36     str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);//确定日期表格所需的行数
37     
38     document.write("<table cellspacing='12'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
39     for (i = 0; i < str_nums; i++) {//二维数组创建日期表格
40         document.write('<tr>');
41     for (k = 0; k < 7; k++) {
42         var idx = 7 * i + k; //为每个表格创建索引,从0开始
43         var date = idx - dayOfWeek + 1;//将当月的1号与星期进行匹配
44         (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
45         date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天
46     }
47     document.write('</tr>');
48     }
49     document.write('</table>');
50  </script>
51 <body>
52 </body>
53 </html>

结果图

附录4（日期、时间练习）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>JavaScript日期练习</title>
 6 </head>
 7 <script type="text/javascript">
 8     function getNowFormatDate(){//获取系统当前年月份
 9         var date = new Date();
10         var Year = date.getFullYear();
11         var Month=date.getMonth()+1;
12          Month =(Month<10 ? "0"+Month:Month); 
13         //注意，Year.toString()+Month.toString()不能写成Year+Month。不然,如果月份大于等于10，则月份为数字，会和年份相加，如201210，则会变为2022。
14          var mydate = (Year.toString()+Month.toString());
15         document.write(mydate+"<br/>");
16         //return mydate;//谁调用该函数，就把值给谁
17     }
18     getNowFormatDate();
19     
20     function getNowFormatDate2(){
21         var date = new Date();
22         var seperator1 = "-";
23         var seperator2 = ":";
24         var month = date.getMonth() + 1;
25         var strDate = date.getDate();
26         if (month >= 1 && month <= 9){
27             month = "0" + month;
28         }
29         if (strDate >= 0 && strDate <= 9){
30             strDate = "0" + strDate;
31         }
32         var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
33             + " " + date.getHours() + seperator2 + date.getMinutes()
34             + seperator2 + date.getSeconds();
35             document.write(currentdate);//得到当前完整时间，如：XXXX-XX-XX xx:xx:xx
36         //return currentdate;
37     }
38     getNowFormatDate2();
39 </script>
40 <body>
41 
42 </body>
43 </html>

结果图

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9447785.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）