耀极客论坛

 找回密码
 立即注册
查看: 396|回复: 0

JavaScript函数调用经典实例代码

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:29:02 | 显示全部楼层 |阅读模式
  JavaScript提供了4种函数调用,一般形式的函数调用、作为对象的方法调用、使用 call 和 apply 动态调用、使用 new 间接调用,下面这篇文章主要给大家介绍了关于JavaScript函数调用的相关资料,需要的朋友可以参考下

JavaScript函数调用经典例题
  1.输入框判断是不是闰年
  2.随机数判断是不是闰年
  3.输入框判断是不是质数
  4.随机数判断是不是质数
  5.封装函数,判断日期是否合法
  思考:首先我们采用函数调用的方法,将需要调用的函数都写在 js 文件夹里面,调用的时候会更方便。需要注意的是不要忘记在html中引入js.
  html代码:
  1. ‹body>
  2.     ‹span>是否为闰年‹/span>
  3.     ‹input type="text" id='inp1'>
  4.     ‹br>
  5.     ‹span>是否为质数‹/span>
  6.     ‹input type="text" id="inp2">
  7.     ‹br>
  8.     ‹!-- 外部引入js 文件 -->
  9.     ‹script src="../js/tools_practice.js">‹/script>
  10.     ‹script>
  11.         //调用获取对象函数
  12.         var oInp1 = get('inp1');
  13.         //判断是否为闰年
  14.         var year = leap_year(2004) ;
  15.         
  16.         //赋值给输入框
  17.         if(year){
  18.             oInp1.value = '是闰年' ;
  19.         }
  20.         else{
  21.             oInp1.value = '不是闰年' ;
  22.         }
  23.         //调用随机数生成一个年份判断是否为闰年
  24.         var y = rand(1000 , 2000) ;
  25.         var res = leap_year(y) ;
  26.         if(res){
  27.             document.write('随机数' + y + '是闰年' +'    ') ;
  28.         }
  29.         else{
  30.             document.write('随机数' + y + '不是闰年' + '    ') ;
  31.         }
  32.         //调用函数拿到相关对象
  33.         var oInp2 = get('inp2') ;
  34.         //输入框判断是否为质数
  35.         var n = isZhi(14) ;
  36.         //赋值给判断质数输入框
  37.         if(n){
  38.             oInp2.value = '是质数'
  39.         }
  40.         else{
  41.             oInp2.value = '不是质数'
  42.         }
  43.         //调用随机数生成一个数字判断是否为质数
  44.         var num = rand(0,1000) ;
  45.         var res3 = isZhi(num) ;
  46.         if(res3){
  47.             document.write('随机数' + num + '是质数' +'    ') ;
  48.         }
  49.         else{
  50.             document.write('随机数' + num + '不是质数' +'    ') ;
  51.         }
  52.         //封装函数,判断日期是否合法
  53.         var da = data(1233,1,32) ;
  54.         if(da){
  55.             document.write('日期合法' +'    ') ;
  56.         }
  57.         else{
  58.             document.write('日期不合法' +'    ') ;
  59.         }
  60.     ‹/script>
  61. ‹/body>
复制代码
  js代码:
  1. //功能:判断某年是否为闰年
  2. //参数:
  3. //   number
  4. //返回值:
  5. //   boolean
  6. function leap_year(x) {
  7.     if (x % 4 === 0 && x % 100 !== 0 || x % 400 === 0) {
  8.         return true;
  9.     }
  10.     return false;
  11. }
  12. //获取对象
  13. function get(id) {
  14.     return document.getElementById(id);
  15. }
  16. //功能:产生某个范围内的随机整数
  17. //参数:
  18. //    min   number   范围最小值
  19. //    max   number   范围最大值
  20. //返回值:
  21. //    number
  22. function rand(min, max) {
  23.     return Math.round(Math.random() * (max - min) + min);
  24. }
  25. //功能:判断一个数是否为质数
  26. //参数 :
  27. //    number
  28. //返回值:
  29. //    boolean
  30. function isZhi(n) {
  31.     for (var i = 2; i ‹ n; i++) {
  32.         if (n % i === 0) {
  33.             return false;
  34.         }
  35.     }
  36.     return true;
  37. }
  38. //功能:判断日期是否合法
  39. //参数:
  40. //   y   number  年份
  41. //   m   number  月份
  42. //   d   number  日期
  43. //返回值:
  44. //   boolean
  45. function data(y, m, d) {
  46.     //先判断年 --> 在判断月 --> 在判断日期
  47.     //判断年 :
  48.     if (y >= 1000 && y ‹= 2000 && y % 1 === 0) {
  49.         //判断月
  50.         if (m >= 1 && m ‹= 12 && m % 1 === 0) {
  51.             var maxDay ;
  52.             if (m === 1 || m === 3 || m === 5 || m === 7 || m === 8 || m === 10 || m === 12) {
  53.                 maxDay = 31;
  54.             }
  55.             else if (m === 4 || m === 6 || m === 9 || m === 11) {
  56.                 maxDay = 30;
  57.             }
  58.             else if (m === 2) {
  59.                 if (y % 4 === 0 && y % 100 != 0 || y % 400 === 0) {
  60.                     maxDay = 29;
  61.                 }
  62.                 else {
  63.                     maxDay = 28;
  64.                 }
  65.             }
  66.             //判断日期
  67.             if(d >= 1 && d ‹= maxDay && d % 1 === 0){
  68.                 return true ;
  69.             }
  70.         }
  71.     }
  72.     return false ;
  73. }
复制代码
JS函数的定义与调用方法
  JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式
  1.方法调用模式:
  先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的myobject 对象。
  1. var blogInfo={
  2.   blogId:123,
  3.   blogName:"werwr",
  4.   showBlog:function(){alert(this.blogId);}
  5. };
  6. blogInfo.showBlog();
复制代码
  2.函数调用模式
  定义一个函数,设置一个变量名保存函数,这时this指向到window对象。
  1. var myfunc = function(a,b){
  2.   return a+b;
  3. }
  4. alert(myfunc(3,4));
复制代码
  3.构造器调用模式
  定义一个函数对象,在对象中定义属性,在其原型对象中定义方法。在使用prototype的方法时,必须实例化该对象才能调用其方法。
  1. var myfunc = function(a){
  2.   this.a = a;
  3. };
  4. myfunc.prototype = {
  5.   show:function(){alert(this.a);}
  6. }
  7. var newfunc = new myfunc("123123123");
  8. newfunc.show();
复制代码
  4.apply,call调用模式
  1. var myobject={};
  2. var sum = function(a,b){
  3.   return a+b;
  4. };
  5. var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]);
  6. alert(sum2);
复制代码
总结
  到此这篇关于JavaScript函数调用的文章就介绍到这了,更多相关JavaScript函数调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 10:34 , Processed in 0.067856 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表