標籤：on() parse gets for 屬性 text top 初學 文法
大家好！今天繼續給大家寫一下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：lengthundefinedarr.length;
2：下標屬性的方式arr[0];
3：順序沒有順序有順序;
4：迴圈for infor,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" /><img src="img/0.png" />:<img src="img/0.png" /><img src="img/0.png" />:<img src="img/0.png" /><img src="img/0.png" /></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.
JS_ECMA基本文法中的幾種封裝的小函數-2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
