JS_ECMA基本语法中的几种封装的小函数

Posted 2020-08-20 小太阳8

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS_ECMA基本语法中的几种封装的小函数相关的知识，希望对你有一定的参考价值。

先来回顾一下我们的字符串：

字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf(\'e\');找第一个出现的位置;找不到返回-1; str.lastIndexOf(\'e\'):找最后一个e出现的位置;找不到返回-1; str.toUpperCase();转大写 str.toLowerCase();转小写 str.substring(起始位置,结束位置):字符串截取; str.split(\'切割的方式\');字符串切割;字符串转数组;
数组方法:
删除：arr.splice(开始位置,删除的个数); 添加：arr.splice(开始的位置[往哪一位的前面添加],0,元素1····); 替换：arr.splice(开始位置,删除的个数,元素1···); arr.sort(function(n1,n2){return n1 - n2}):排序 arr.reverse():翻转 arr.push();往数组后面添加一位; arr.unshift():往数组前面添加一位; arr.pop():从数组的后面删除一位; arr.shift():从数组的前面删除一位; arr.join(\'连接的方式\');数组转字符串的方法; arr.concat(arr1,arr2····);数组连接;

6.数学方法: Math.random();随机数; Math.round():四舍五入; Math.ceil()向上取整; Math.floor()向下取整; Math.abs():取绝对值; Math.max(x,y):求最大数; Math.min(x,y);求最小数; Math.pow(x,y):几的几次方; Math.sqrt():开平方;

数组:存多个东西; json:存多个东西; json = { //键值对 name1[键,key]:value1[值,value], name2[键,key]:value2[值,value], }

json 与 arr 的区别：

1：length undefined arr.length; 2：下标属性的方式 arr[0]; 3：顺序没有顺序有顺序; 4：循环 for in for,while,for in

for in循环也可以循环数组,但是不建议使用,因为性能略低;

js小特性: 逗号表达式：只看最后一个逗号后面的那个值;

下面是一个通过class获取元素封装的小函数：

//getByClass(oParent,sClass);//oParent:从哪个父级下面获取;sClass:要获取的是哪个class名字;
function getByClass(oParent,sClass){
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        var aEle = oParent.getElementsByTagName(\'*\');
        var arr = [];
        for(var i = 0; i < aEle.length; i++){
            var tmp = aEle[i].className.split(\' \'); 
            if(findInArr(sClass,tmp) == true){
                arr.push(aEle[i]);  
            }
        }
        return arr; 
    }
}　

下面是一些实用性的小案例额，希望对大家有所帮助

1 计算器效果.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var oNum1=document.getElementById(\'num1\');
            var oNum2=document.getElementById(\'num2\');
            var oVal=document.getElementById(\'val\');
            var oBtn=document.getElementById(\'btn\');
            oBtn.onclick=function(){
//                var a=Number(oNum1.value);
//                var b=Number(oNum2.value);
                var a=oNum1.value;
                var b=oNum2.value;
                var c=oVal.value;
//                c==\'+\' && alert(a+b);
//                c==\'-\' && alert(a-b);
//                c==\'*\' && alert(a*b);
//                c==\'/\' && alert(a/b);
//                c==\'%\' && alert(a%b);
                alert(eval(a+c+b))
            }
        }
    </script>
</head>
<body>
<input type="text" name="" value="" id="num1"/>
<select name="" id="val">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
    <option>%</option>
</select>
<input type="text" name="" value="" id="num2"/>
<input type="button" name="" value="计算" id="btn"/>
</body>
</html>

2.倒计时.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 800px;
            height: 300px;
            background: green;
            color: whitesmoke;
            line-height: 300px;
            text-align: center;
            margin:100px auto;
            font-size:40px;
        }
    </style>
    <script>
        window.onload=function(){
            var oBox=document.getElementById(\'box\');
            var oDate=new Date();
            oDate.setFullYear(2017,0,1);
            oDate.setHours(0,0,0,0);
            function clock(){
                var ms=oDate.getTime()-new Date().getTime();
                var oSec=parseInt(ms/1000);
                var oDay=parseInt(oSec/86400);
                oSec%=86400;
                var oHour=parseInt(oSec/3600);
                oSec%=3600;
                var oMin=parseInt(oSec/60);
                oSec%=60;
                oBox.innerHTML=\'距离2017年1月1日还剩\'+oDay+\'天\'+oHour+\'时\'+oMin+\'分\'+oSec+\'秒\';
            }
            clock();
            setInterval(clock,1000);
        };
    </script>
</head>
<body>
<div id="box">
    距离2017年1月1日还剩xx天xx时xx分xx秒
</div>
</body>
</html>

3.图片时钟.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: darkgreen;
            color: #fff;
            font-size:50px;
            text-align: center;
            padding-top: 300px;
        }
    </style>
    <script>
        function addZero(n){
            return n<10 ? \'0\'+n : \'\'+n ;
        }
        window.onload=function(){
            var aImg=document.getElementsByTagName(\'img\');
            clock();
            setInterval(clock,1000);
            function clock(){
                var oDate=new Date();
                var oHour=oDate.getHours();
                var oMin=oDate.getMinutes();
                var oSec=oDate.getSeconds();
                var str=addZero(oHour)+addZero(oMin)+addZero(oSec);
                for(var i=0;i<aImg.length;i++){
                    aImg[i].src=\'img/\'+str.charAt(i)+\'.png\';
                }
            }
 
        }
    </script>
</head>
<body>
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />:
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />:
<img src="img/0.png" alt="" />
<img src="img/0.png" alt="" />
</body>
</html>

4.本月一共有多少天.html　

<script>
        var oDate=new Date();
        oDate.setMonth(oDate.getMonth()+1);
        oDate.setDate(0);
        alert(oDate.getDate())
    </script>

5.本月第一天是星期几

<script>
        var oDate=new Date();
        oDate.setDate(1);
        alert(oDate.getDay());
    </script>

6.九九乘法表：

<script>
document.write(\'<table>\');
for(var i = 1; i <= 9; i++){
    document.write(\'<tr>\');
    for(var j = 1; j <= i; j++){
        document.write(\'<td>\'+i+\'*\'+j+\'=\'+i*j+\'</td>\');
    }
    document.write(\'</tr>\');
}
document.write(\'</table>\');
</script>

7.json转换成字符串.html

<script>
    var json={a:12,b:5,c:9,d:6};
    var arr=[];
    for(var name in json){
        arr.push(name+\'=\'+json[name])
    };
    //alert(arr);
    var str=arr.join(\'&\');
    alert(str);
</script>

8.字符串转换成json.html　

<script>
/*var str = \'a=1&b=2&c=3\';
//先切割字符串
var arr = str.split(\'&\');
//console.log(arr);
var json = {};
for(var i = 0; i < arr.length; i++){
    //把数组中的每一个用\'=\'在切一下;返回的是一个新的数组[a,1],[b,2],[c,3]
    var arr2 = arr[i].split(\'=\');
    //console.log(arr2);
    //往json中添加,数组中的第一个相当于是json的name,数组中的第二个相当于是json的value;
    json[arr2[0]] = arr2[1];
}
console.log(json);
*/
function str2json(str){
    var arr = str.split(\'&\');
    var json = {};
    for(var i = 0; i < arr.length; i++){
        var arr2 = arr[i].split(\'=\');
        json[arr2[0]] = arr2[1];    
    }
    return json;
}
console.log(str2json(\'a=1&b=2&c=3\'));
</script>

　　今天就和大家分享到这里，明天继续，谢谢大家的支持，有什么不对的地方希望大家多多指教，本人也是一名初学者！

　　转自：http://www.cnblogs.com/lianzhibin/p/6067693.html

　　　　标签: JavaScript

以上是关于JS_ECMA基本语法中的几种封装的小函数的主要内容，如果未能解决你的问题，请参考以下文章

JS_ECMA基本语法中的几种封装的小函数

JS_ECMA基本语法中的几种封装的小函数-2

实现深拷贝的几种方法

javascript对象的几种创建方式

Laravel：如何在控制器的几种方法中重用代码片段

js （JavaScript）函数声明的几种形式及用法