精华内容
下载资源
问答
  • 用途:常用于监听输入框(其内部不提供监听函数)。 用法:需要在 use 中定义 window 函数供外部引用。 // 调用成功 原密码 <input type=text name=password id=oldpass οnchange=pass1() class=layui-...
  • 简单入门JavaScript函数封装 封装函数

    千次阅读 2020-08-05 20:01:22
    函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口 当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用 使用函数有两步 ...

    什么是封装?
    封装是面向对象的三个基本特征之一 将现实世界的事物抽象成计算机领域中的对象 对象同时具有属性和行为(方法) 这种抽象就是封装
    特性:数据隐藏

    什么是函数?
    用来执行特定任务 实际上为了易于调试和维护 函数允许以更有组织的方式去编写代码 函数还允许代码重用

    什么是函数封装?
    函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口
    当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用

    使用函数有两步

    1. 定义函数(又叫声明函数 封装函数)
      定义函数的三个要素:功能 参数 返回值
    2. 调用函数

    函数的参数和返回值

    1. 函数的参数就是完成一件事情的已知条件 就是输入
    2. 函数的返回值就是事情完成的结果 就是输出

    简单的函数封装示例
    示例1
    功能:奇偶数的判断
    参数: 一个数
    返回值:true是偶数 false是奇数

    // 1. 定义函数
    function isOuShu(num){
        if(num%2===0){
            // 如果余等于0 则为true 否则为false
            return true
        }else{
            return false
        }
    }
    // 2. 调用函数
    // isOuShu(5)
    // 接收函数返回值 为了显示输出的返回值 定义一个变量接收
    var num = isOuShu(5)
    console.log(num)
    

    示例2
    功能:计算元素样式兼容ie浏览器
    参数:被计算的元素和被计算元素的类型
    返回值:计算后的值

    <style>
        .pic{
            height: 1200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pic li{
            float: left;
            width: 200px;
            height: 200px;
            background: #333;
            list-style: none;
            margin-right: 10px;
        }
    </style>
    
     <div>
        <ul class="pic" id="pic">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <script>
    function getStyle(elem,type){
         // 一般浏览器
         if(window.getComputedStyle){
             return window.getComputedStyle(elem,null)[type]
         }else{
             // ie浏览器
             return elem.currentStyle[type]
         }
     }
     var width = getStyle(pic.children[0],'width')
     console.log(width)
    </script>
    
    展开全文
  • js封装函数入门

    万次阅读 多人点赞 2018-04-26 22:13:19
    一、使用函数有两步:1、定义函数,又叫声明函数, 封装函数。定义函数的三个要素:功能,参数,返回值。function 函数名(形参){ 函数代码 return 结果}//2、调用函数var 变量 = 函数名(实参);二、对函数的参数和...
    
    

    一、使用函数有两步:

    1、定义函数,又叫声明函数, 封装函数。

    定义函数的三个要素:功能,参数,返回值。

    function 函数名(形参){
    函数代码
    return 结果
    }

    //2、调用函数

    var 变量  =  函数名(实参);


    二、对函数的参数和返回值的理解

    1、函数的参数就是完成一件事情的已知条件,就是输入。

    //2、函数的返回值就是事情完成的结果。就是输出。


    三、以下为简单的函数封装的代码:

    //封装函数的三个要素;
    
    //功能:奇偶数的判断
    //参数:一个数
    //返回值:true:是偶数;false:是奇数;
    function isOuShu(num){
    	if(num%2==0){
    		return true;
    	}else{
    		return false;
    	}
    }
    
    
    //功能:判断一个数是不是3和7的倍数
    //参数:一个数
    //返回值:true:是;false:否
    
    function isSanAndSeven(num){
    	if(num%3==0 && num%7==0){
    		return true;//return语句可以终止函数的执行。
    	}	
    	return false;	
    }
    
    //功能:判断一个两位以内数是不是逢7过的数
    //参数:一个两位以内数
    //返回值:true:是;false:否
    
    function isSevenPass(num){
    	if(num%7==0 || num%10==7 || parseInt(num/10)==7){
    		return true;
    	}
    	return false;
    }
    
    //功能:闰年
    //参数:年份
    //返回值:true:是;false:否
    function isLeapYear(year){
    	if((year%4==0 && year%100!=0)||(year%400==0)){
    		return true;
    	}
    	return false;
    }
    
    //功能:身体健康指数
    //参数:身高和体重
    //返回值:-1:太轻了;0:正常;1:太重了;
    
    function BMI(height,weight){
    	var str="";
    	var standardWeight = height-105;
    	if(weight<standardWeight-5){
    		return -1;
    	}else if(weight>standardWeight+5){
    		return 1;
    	}else{
    		return 0;
    	}
    }
    
    //功能:输入数字显示星期几
    //参数:0-6的数字
    //返回值:形如"星期一"一样的字符串,如果是空字符串("")表示输入的数字不在0-6之间。
    
    function convertWeek(num){
    	var str="星期";
    	switch(num){
    		case 0:str+="天";break;
    		case 1:str+="一";break;
    		case 2:str+="二";break;
    		case 3:str+="三";break;
    		case 4:str+="四";break;
    		case 5:str+="五";break;
    		case 6:str+="六";break;
    		default:str="";
    	}
    	return str;
    }
    
    //sumfrom1ToM(100);
    
    //1+2+3+……100之和.
    function sumfrom1To100(){
    	return sumfromNToM(1,100);
    }
    
    //1+2+3+……m之和.
    function sumfrom1ToM(m){
    	return sumfromNToM(1,m);
    }
    
    //功能:n到m之间的所有的自然数之和;
    //参数:
    //   参数1:表示起始的数n,
    //   参数2:表示结束的数m
    //返回值:求和的结果,是个数字;
    function sumfromNToM(n,m){
    	var sum = 0;
    	for(var i=n;i<=m;i++){
    		sum=sum+i;
    	}
    	return sum;
    }
    
    //计算100以内能被3整除的数
    function sumFrom1To100By3(){
    	return sumFrom1ToMByN(100,3);
    }
    
    //功能:计算1-m以内能被n整除的数之和
    //参数:
    // 表示结束数的m
    // 表示整除的数n
    //返回值:表示和的数
    function sumFrom1ToMByN(m,n){
    	var sum=0;
    	for(var i=n;i<=m;i=i+n){
    		sum = sum+n;
    	}
    	return sum;
    }
    
    //功能:求出1-1/2+1/3-1/4+1/5....1/100的和(加奇减偶)。
    //参数:无
    //返回值:表示和的数;
    function sumFrom1To100(){
    	var sum = 0;
    	for(var i=1;i<=100;i++){
    		if(i%2==0){
    			sum = sum-1/i;			
    		}else{
    			sum = sum+1/i;
    		}
    	}
    	return sum;
    }
    
    //功能:求出1-1/2+1/3-1/4+1/5....1/n的和(加奇减偶)。
    //参数:无
    //返回值:表示和的数;
    
    function sumFrom1ToN(n){
    	var sum = 0;
    	for(var i=1;i<=n;i++){
    		if(i%2==0){
    			sum = sum-1/i;			
    		}else{
    			sum = sum+1/i;
    		}
    	}
    	return sum;
    }
    
    //功能:打星星
    //参数:行数和列数
    //返回值:无
    
    function printStar(rows,cols){
    	for(var i=0;i<rows;i++){//外层循环循环的是行
    		//1、打印5个星星
    		for(var j=0;j<cols;j++){//内层决定了列数
    			document.write("۞");
    		}
    		//2、换行
    		document.write("<br/>");
    	}
    }
    
    //功能:生成4位的验证码
    //参数:无
    //返回值:4个随机数
    /*
    function getFourNum(){
    	var str="";
    	for(var i=0;i<4;i++){
    		str += parseInt(Math.random()*10);		
    	}
    	return str;
    }
    */
    
    
    function getFourNum(){
    	var temp = getCheckNum(4);
    	return temp;
    }
    
    
    //功能:生成n位的验证码
    //参数:位数n
    //返回值:n个随机数
    function getCheckNum(n){
    	var str="";
    	for(var i=0;i<n;i++){
    		str += parseInt(Math.random()*10);		
    	}
    	return str;
    }
    
    
    
    
    
    

    展开全文
  • JS 封装函数到对象

    2020-01-03 09:43:26
    // var value=function(){  // return 5*5;  // }  // alert(value());    //或者    var value=function(){  return 5*5;...//调用函数  alert(value);

    //   var value=function(){

            //       return 5*5;

            //   }

            //   alert(value());

     

            //或者

     

            var value=function(){

                  return 5*5;

              }();//调用函数

              alert(value);

    展开全文
  • 原生JS封装函数

    2019-08-29 11:45:43
    封装一个isNaN函数 function myIsNaN(n) { var num = Number(n); if (num + '' === 'NaN') { // 把处理出来的数字转化成字符串,在去和NaN做比较 return true } return false //打断函数的执行 } 封装一个...

    封装一个isNaN函数

     

    function myIsNaN(n) {
        var num = Number(n);
        if (num + '' === 'NaN') {
            // 把处理出来的数字转化成字符串,在去和NaN做比较
            return true
        }
        return false //打断函数的执行
    }

    封装一个myPush方法

     

    function myPush(ary,n){
        ary[ary.length] =n;
    }
    var ary=[1,2];
    myPush(ary,222);
    console.log(ary);  

    封装一个方法,可以获取某个元素下的所有元素子节点

     

    function getChildren(ele){
        // 从childNodes中筛选出元素子节点即可
        var ary=[];
        for(var i=0;i<ele.childNodes.length;i++){
            if(ele.childNodes[i].nodeType == 1 ){
                ary.push(ele.childNodes[i])
            }
        }
        return ary;
    }   

    封装一个函数,使用splice 实现 push pop unshift shift

     

    function mypush2(arr,...abc){   //剩余运算符...在函数中
        //abc是个数组,存储的是除了第一项之后的所有项   
        <!-- var ary=arguments[0];  我们要操作的数组   -->
        arr.splice(arr.length,0,...abc)
        //在数学中,就叫扩展运算符(解构),把abc数组拆开  
        return arr.length;
    }
    var ary=[1,2]
    mypush2(ary,4,5,[6,7,8],9)
     
    function mypop(arr){
        return arr.splice(arr.length-1,1)[0]
    }
    mypop2=ary

    封装一个函数,mypush,返回值是改变后的数组长度

     

    function mypush(arr){
        var ary=arguments[0]; // 我们要操作的数组
        for(var i=1;i<arguments.length;i++){
            arr[arr.length]=arguments[i]
        }
    return arr.length
    }   
    var ary=[1,2]
    mypush(ary,4,5,[6,7,8],9)
    console.log(ary); //[1,2,4,5,[6,7,8,],9]

    封装一个myReverse方法(翻转函数)

     

    function myReverse(arr) {        
        var a = [];
        for (var i = 0; i < arr.length; i++) {
            var temp = arr[i];
            a.unshift(temp)
        }
        return a;
    }
    var ary = [1,2,3,4];
    var res2 = myReverse(ary);
    console.log(res2, ary);
    //这个方法不改变原来数组,新数组是倒叙输出。  

    封装一个方法,和join()用法一样,按照指定字符拼接成字符串,不穿餐厨,默认逗号拼接。

    var res2=ary.join('+')
    var ary = [1,2,3,4];
    function myjoin(arr,str){
        var s='';
        //把数组中的每一项拿出来,跟指定字符拼接即可
        for(var i=0;i<arr.length-1;i++){
            s += arr[i] +str
        }
        return s
    }   
    var res=myjoin(ary,'+');
    展开全文
  • Javascript函数封装

    2021-09-15 10:36:35
    本文列举了几种函数封装的情况,以便更好的解决函数封装的问题
  • js封装函数

    千次阅读 2017-08-07 09:06:09
    js里能否像c#或者java里的类一样,把很多方法封装在这个类里面,然后调用这个方法的时候可以用class.Fun();这样的形式来调用。 求一个最简单的完整的例子(麻雀虽小五脏俱全)。举个栗子: function Person() { this...
  • js常用封装函数

    千次阅读 2019-05-26 21:22:01
    //js判断数据为空的方法 function isBlank(str){ if (Object.prototype.toString.call(str) ==='[object Undefined]'){//空 return true } else if ( Object.prototype.toString.call(str) === '[object String]...
  • javascript 封装函数

    2017-12-13 14:07:42
    判断浏览器类型及版本 leejersey 2014-04-03 11:32 阅读:376 评论:0  ...《Pro JavaScript Techniques》中的一些函数 leejersey 2014-02-13 16:09 阅读:580 评论:0  js 获取url的get传值函数 ...
  • js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 … … 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),...
  • js封装对象与js封装函数理解

    千次阅读 2018-11-07 16:53:40
    1,js封装对象 1.1 创建:首先创建一个构造函数,构造函数中用this.XXX的形式给这个构造函数添加属性和方法。给构造函数的原型对象添加方法(构造函数.prortotype.XXX=XXX) 1.2 使用:new一个对象 对象.XXX调用这...
  • 封装函数,返回元素e的第n层祖先元素节点 <div> <strong> <span> <i></i> </span> </strong> </div> <script&g...
  • JavaScript函数封装调用

    千次阅读 2019-07-06 16:17:00
    举个列子:我们在写前端页面,经常会使用到Jquery文本框内容,来判断一下输入值是否符合,常见的写法: ...这个页面写了个方法,结果发现另外一个页面还要写同样的,于是,就会写到js中 引入,调用 function tes...
  • 小白必看——原生js封装函数解决兼容问题 为什么做兼容 浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种...
  • Util.js 是对常用函数封装,方便在实际项目中使用,主要内容包含:数组类、浏览器类、日期类、函数类、数学类、媒体类、节点类、对象类、字符串类、类型检测类、正则表达式类等内容。
  • function bindThis(f, oTarget) { return function() { return f.apply(oTarget,arguments); } } 封装函数 f,使 f 的 this 指向指定的对象
  • js封装函数功能:数组操作 // arrayEqual // 判断两个数组是否相等 function arrayEqual(arr1, arr2) { if (arr1 === arr2) return true; if (arr1.length != arr2.length) return false; for (var i = 0; i &...
  • //函数封装 function detectZoom () { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio;
  • js封装动画函数

    2020-09-28 08:57:30
    以下俩个封装动画函数一般用于一些特效(例:轮播图,手风琴,运动的小球等等) 匀速动画函数封装 function animate(element, target) { //先清理定时器,这样可以保证每次点击按钮都只产生一个定时器 clearInterval...
  • javascript如何封装函数

    2017-02-28 16:23:00
    封装,全天下漫天遍野的封装,JQuery,EXT和Prototype.js封装的是javascript,jQuery uI和jQuery mobile封装着jQuery,java中的JDBC在spirng,Hibernate等框架封装着。 1 <!doctype html> 2 <...
  • 主要介绍了JS封装cookie操作函数,以实例形式分析了JavaScript实现针对cookie的设置、获取及删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • js函数封装与调用

    千次阅读 2020-03-16 21:33:07
    函数的使用可以减少大量重复的代码,封装好一个函数之后,可以在后面多处去调用,有时候使用别人封装好的函数,都不需要去了解该功能是如何实现,只需要知道函数是如何使用的即可,非常之方便。 语法 1,关键词 : ...
  • 用途:常用于监听输入框(其内部不提供监听函数)。  用法:需要在 use 中定义 window 函数供外部引用。 // 调用成功  &lt;div class="layui-form-item " &gt;  &lt;label class="...
  • 本文实例讲述了JS基于封装函数实现的表格分页。分享给大家供大家参考,具体如下: HTML代码: <html> <head> <meta charset='utf-8'> <title>www.jb51.net js表格分页</title> ...
  • 在写Node.js的过程中,连续的IO操作可能会导致“金字塔噩梦”,回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦。  Node.js提供的非阻塞IO...
  • js函数封装

    2020-09-22 09:53:16
    函数封装的概念: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 用函数把重复的代码块包裹起来就是函数封装封装的作用: 其实就是为了减少代码的冗余,增加代码的可读性与易维护性, 将实现...
  • 封装文件读取API var fs = require('fs') function pReadFile(filePath) { return new Promise(function (resolve, reject) { fs.readFile(filePath, 'utf8', function (err, data) { if (err) { rej...
  • js函数封装及外部调用

    千次阅读 2020-06-30 14:13:39
    今天遇到web开发,因前端同事离职,只能自己来开发前端了 ,想封装些公共方法,方便其他模块调用。 1,封装对象方式 var hs = { baseurl:"12gggg", login:function(){ return 333; }, keeplive:function(){...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 249,824
精华内容 99,929
关键字:

js封装函数

友情链接: ADC08032与LCD1602.rar