先来回顾一下我们的字符串：
字符串方法: 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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
