zoukankan      html  css  js  c++  java
  • JS_ECMA基本语法中的几种封装的小函数-2

      大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例:

    首先先给大家说一下字符串、数组、数学方法以及json的一点小知识点:

    字符串方法:
    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{
                 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>
    

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

    Never too old to learn.

  • 相关阅读:
    [BZOJ1620][Usaco2008 Nov]Time Management 时间管理
    [BZOJ1634][Usaco2007 Jan]Protecting the Flowers 护花
    [BZOJ1725][Usaco2006 Nov]Corn Fields牧场的安排
    [BZOJ1708][Usaco2007 Oct]Money奶牛的硬币
    [BZOJ1690][Usaco2007 Dec]奶牛的旅行
    fzu 2132 LQX的作业
    fzu 2139 久违的月赛之二
    poj 1849 Two 树形dp
    师范大学 e: skyscrapers
    O(∩_∩)O~~
  • 原文地址:https://www.cnblogs.com/lianzhibin/p/6067693.html
Copyright © 2011-2022 走看看