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

时间：2023-03-08 18:48:44

1、JavaScript中，函数的格式

function 函数名(形参列表){

    函数体;

}

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

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

3、实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript中的函数的练习</title>

 </head>

 <script type="text/javascript">

     //需求：定义一个函数做加法运算

     function add(a,b){

         var c=a+b;

         document.write(c+"<br/>");//返回值：33  //打开下面的函数后，这里没有输出任何值，已经被下面的函数覆盖了

         return c;

     }

     //var d=add(11,22,13,34,14,15);

     //document.write(d+"<br/>");//返回值：33

     add(11,22,13,34,14,15)

     function add(a,b,c){

         var d=a+b+c;

         document.write(d+"<br/>");//返回值：46

         document.write(arguments.length);//返回值：6  //获取内部维护的数组arguments的(数组)长度

     }

 </script>

 <body>

 </body>

 </html>

实例结果图

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

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

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript函数练习</title>

 </head>

 <script type="text/javascript">

     //需求：输入月份查询本月份共有多少天，用弹出框的形式

     function getNowFormatDate(){//获取系统当前年份

         var date = new Date();

         var Year = date.getFullYear();

         return Year;//谁调用该函数，就把值给谁

     }

     function showDay(){

         //找到对应标签的对象

         var inpuobj=document.getElementById("month");

         var month=inpuobj.value;//获取页面输入的值

         /*

         month=parseInt(month);

         switch(month){

             case 1:

             case 3:

             case 5:

             case 7:

             case 8:

             case 10:

             case 12:

             alert("本月有31天");

             break;

             case 4:

             case 6:

             case 9:

             case 11:

             alert("本月有30天");

             break;

             case 2:

             alert("本月有29天");

             break;

             default:

             alert("您的输入有误，请重新输入！");

             break;

         }

         */

         var year = getNowFormatDate();//调用getNowFormatDate()函数,把该函数中获取到的系统当前年份赋值给year

         if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){

             alert("本月有31天");

         }else if(month == 2){

             if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){

                 alert("今年是闰年，本月有29天");

             }else{

                 alert("今年是平年，本月有28天");

             }

         }else if(month == 4 || month == 6 || month == 9 || month == 11){

             alert("本月有30天");

         }else{

             alert("您的输入有误，请重新输入！");

         }

     }

 </script>

 <body>

     月份:<input type="text" id="month"/>&nbsp;<input type="button" value="查询" onClick="showDay()"/>

 </body>

 </html>

结果图

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

附录2 （日历练习1）

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript简单日历</title>

 </head>

 <style type="text/css">

     #div1{

         width:425px;

         height:420px;

         border:1px solid gray;

     }

     #div2{

         width:390px;

         height:390px;

         margin:auto;

         margin-top:15px;

     }

     #div21{

         width:220px;

         height:72px;

         margin:auto;

         line-height:72px;

         margin:auto;

     }

     #div22{

         width:355px;

         height:310px;

         margin:auto;

     }

     #table1{

         width:355px;

         height:30px;

         border-spacing: 30px 33px;

     }

     #table2{

         width:355px;

         height:30px;

         line-height:30px;

         border-spacing:30px 0px;

         text-align:center;

     }

     table tr td {

           text-align:center;

     }

 </style>

 <body>

 <div id="div1">

     <div id="div2">

         <div id="div21">

         <button onclick="lastMon()">上一月</button>

         <text id="yearAndMon"></text>

         <button onclick="nextMon()">下一月</button>

         </div>

         <div id="div22">

             <table id="table2">

                 <tr class="pan">

                     <td>日</td>

                     <td>一</td>

                     <td>二</td>

                     <td>三</td>

                     <td>四</td>

                     <td>五</td>

                     <td>六</td>

                 </tr>

             </table>

             <table id="table1"></table>

         </div>

     </div>

 </div>

 <script type="text/javascript">

     var nowDate=new Date();

     var nowYear=nowDate.getFullYear();

     var nowMonth=nowDate.getMonth()+1;

     //var month=(nowMonth<10?"0"+momth:month);

     var text=document.getElementById("yearAndMon");

     text.innerText=nowYear+"年"+nowMonth+"月";

     var monthDays1=[31,29,31,30,31,30,31,31,30,31,30,31];

     var monthDays2=[31,28,31,30,31,30,31,31,30,31,30,31]

     function becomeDate(nowYear,nowMonth,nowDate){

         var dt=new Date(nowYear,nowMonth-1,1);

         var firstDay=dt.getDay();

         var table=document.getElementById("table1");

         var monthDays=isRunNian();

         var rows=5;

         var cols=7;

         var k=1;

         for(var i=1;i<=rows;i++){

             var tri=table.insertRow();

             for(var j=1;j<=7;j++){

                 var tdi=tri.insertCell();

                 if(i==1&&i*j<firstDay+1){

                     tdi.innerHTML="";

                 }else{

                     if(k>monthDays[nowMonth-1]){

                         break;

                     }

                     tdi.innerHTML=k;

                     k++;

                 }

             }

         }

     }

     function lastMon(){

         table1.innerHTML="";

         var text=document.getElementById("yearAndMon");

         if(nowMonth>1){

             nowMonth=nowMonth-1;

         }else{

             nowYear--;

             nowMonth=12;

         }

         text.innerText=nowYear+"年"+nowMonth+"月";

         becomeDate(nowYear,nowMonth);

     }

     function nextMon(){

         table1.innerHTML="";

         if(nowMonth<12){

             nowMonth=nowMonth+1;

         }else{

             nowYear++;

             nowMonth=1;

         }

             var text=document.getElementById("yearAndMon");

             text.innerText=nowYear+"年"+nowMonth+"月";

             becomeDate(nowYear,nowMonth);

     }

     function isRunNian(){

         if((nowYear%4==0||nowYear%400==0)&&nowYear%100!=0){

             return monthDays1;

         }else{

             return monthDays2;

         }

     }

     becomeDate(nowYear,nowMonth);

 </script>

 </body>

 </html>

结果图

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

附录3（日历练习2）

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript日历练习</title>

 </head>

 <style type="text/css">

     .today{

         background-color:#0078D7;

     }

 </style>

 <script type="text/javascript">

     function getNowFormatDate(){//获取系统当前年月份

         var date = new Date();

         var Year = date.getFullYear();

         var Month=date.getMonth()+1;

          Month =(Month<10 ? "0"+Month:Month);

          var mydate = (Year+"年"+Month+"月");

         document.write(mydate+"<br/>");

         //return mydate;//谁调用该函数，就把值给谁

     }

     getNowFormatDate();//必须调用该函数，才会有相应的输出结果；否则什么都没有输出。

     //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)

     function isLeap(year) {

         return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;

     }

     var i, k,

     today = new Date(),//获取当前日期

     y = today.getFullYear(),//获取日期中的年份

     m = today.getMonth(),//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)

     d = today.getDate(),//获取日期中的日(方便在建立日期表格时高亮显示当天)

     firstday = new Date(y, m, 1),//获取当月的第一天

     dayOfWeek = firstday.getDay(),//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)

     days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),//创建月份数组

     str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);//确定日期表格所需的行数

     document.write("<table cellspacing='12'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)

     for (i = 0; i < str_nums; i++) {//二维数组创建日期表格

         document.write('<tr>');

     for (k = 0; k < 7; k++) {

         var idx = 7 * i + k; //为每个表格创建索引,从0开始

         var date = idx - dayOfWeek + 1;//将当月的1号与星期进行匹配

         (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替

         date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天

     }

     document.write('</tr>');

     }

     document.write('</table>');

  </script>

 <body>

 </body>

 </html>

结果图

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

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

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript日期练习</title>

 </head>

 <script type="text/javascript">

     function getNowFormatDate(){//获取系统当前年月份

         var date = new Date();

         var Year = date.getFullYear();

         var Month=date.getMonth()+1;

          Month =(Month<10 ? "0"+Month:Month);

         //注意，Year.toString()+Month.toString()不能写成Year+Month。不然,如果月份大于等于10，则月份为数字，会和年份相加，如201210，则会变为2022。

          var mydate = (Year.toString()+Month.toString());

         document.write(mydate+"<br/>");

         //return mydate;//谁调用该函数，就把值给谁

     }

     getNowFormatDate();

     function getNowFormatDate2(){

         var date = new Date();

         var seperator1 = "-";

         var seperator2 = ":";

         var month = date.getMonth() + 1;

         var strDate = date.getDate();

         if (month >= 1 && month <= 9){

             month = "0" + month;

         }

         if (strDate >= 0 && strDate <= 9){

             strDate = "0" + strDate;

         }

         var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

             + " " + date.getHours() + seperator2 + date.getMinutes()

             + seperator2 + date.getSeconds();

             document.write(currentdate);//得到当前完整时间，如：XXXX-XX-XX xx:xx:xx

         //return currentdate;

     }

     getNowFormatDate2();

 </script>

 <body>

 </body>

 </html>

结果图

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

原创作者：DSHORE

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

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

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

相关文章