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"/> <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 欢迎转载,转载务必说明出处。(如果本文对您有帮助,可以点击一下右下角的 推荐,或评论,谢谢!) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~