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
|
<script> var oDate= new Date(); oDate.setMonth(oDate.getMonth()+1); oDate.setDate(0); alert(oDate.getDate()) </script> |
5.本月第一天是星期几
1
2
3
4
5
|
<script> var oDate= new Date(); oDate.setDate(1); alert(oDate.getDay()); </script> |
6.九九乘法表:
1
2
3
4
5
6
7
8
9
10
11
|
<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
1
2
3
4
5
6
7
8
9
10
|
<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
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
|
<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