當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/9/5 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 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獲取元素封裝的小函數：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//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

2.倒計時.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<!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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<!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　

1 2 3 4 5 6

5.本月第一天是星期幾

1 2 3 4 5

6.九九乘法表：

1 2 3 4 5 6 7 8 9 10 11

7.json轉換成字符串.html

1 2 3 4 5 6 7 8 9 10

8.字符串轉換成json.html　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

　　今天就和大家分享到這里，明天繼續，謝謝大家的支持，有什么不對的地方希望大家多多指教，本人也是一名初學者！

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

轉載于:https://www.cnblogs.com/WANGJUN5945/p/6096184.html

總結

以上是生活随笔為你收集整理的JS_ECMA基本语法中的几种封装的小函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：高可用与负载均衡（7）之聊聊Lvs-DR
下一篇： Poj 2109 k^n = p.