前端学习之JS入门

之前学习了前端开发的的一些基本的知识，对HTML和CSS样式基本学习的做了入门，JS编程这一块只是在学校上课的时候提了一下，因此，现在通过查找资料对一些基本概念进行了学习，由于知识点过多，此处仅罗列少许内容：

1、JS字符串

JS中字符串采用var str = "abc"声明，可以使用单引号或双引号
字符串常用的一些方法有:
1、str.indexOf(子串，开始位置)方法可返回某个指定的字符串值在字符串中首次出现的位置。
2、str.lastIndexOf(子串，开始位置) 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
3、search()方法检索字符串中指定的子字符串，可以是正则表达式。
4、split(分隔符，长度)方法，分割字符串。
5、str.substring(start,end)，用于截取[start,end)位置的字符串。
6、str.toLowercase()与str.toUppercase()，分别表示字符串转成全大写和小写。

2、JS数组对象

(1)关于数组的定义：

方法一：通过构造函数Array()声明一个数组对象
var arr = new Array();
var arr = new Array(3);
var arr = new Array("a","b","c");
方法二：字面声明
var arr = ["a","b","c"];

(2)数组常用的一些方法和属性

1、length属性,通过arr.length返回数组内元素的个数。
2、concat()方法，通过arr1.concat(arr2)的方式，合并两个数组。
3、slice()方法,通过arr.slice(start,end)的方式，截取需要的元素，其中，start为下标开始位置，end为结束位置(截取的元素不包含end)。
4、splice()方法，需要传入三个参数，即arr.splice(start,length,item...),第一个参数是索引开始的位置，第二个参数是删除元素的数量，第三个参数是在开始索引的位置插入的元素(可以为多个元素)。
5、reverse()方法。这个方法主要用于反转数组元素，索引数组 arr.reverse()后会重新排序。
6、join()方法。主要用于将数组内的元素使用字符拼接成一个字符串，括号内不传拼接字符参数，默认使用逗号。
7、pop()方法。删除数组中最后一个元素。
8、push()，向数组的末尾添加一个或多个元素。

3、Math对象

利用Math对象可以执行常见的算数任务：

4、日期对象

日期对象用于处理日期和时间。 new 关键词来定义 Date 对象。

日期对象格式化方法：

JS定时器

(1)setInterval()
语法setInterval(func,millisec,lang)

使用setInterval()会不停地调用func函数，直到 clearInterval()被调用或窗口被关闭。
(2)setTimeout()
语法setTimeout(func,millisec,lang)

5、DOM对象

下面举个小例子，编写一个JS程序，实现系统时间的实时显示：

javascript

function $(id){
	return document.getElementById(id);
}
function getWeek(week){
	weekdic={0:"日",1:"一",2:"二",3:"三",4:"四",5:"五",6:"六"}
	return weekdic[week];
}
function getDay(month){
	if (month<10){
		return "0"+month;
	}else{
		return month;
	}
}
function getTime(time){
	if (time<10){
		return "0"+time;
	}else{
		return time;
	}
}
window.onload=function(){
	setInterval(function(){
		var now = new Date();
		var year = now.getFullYear();
		var month = getDay(now.getMonth()+1);
		var day = getDay(now.getDate());
		var week = getWeek(now.getDay());
		$("date").innerHTML=year+"年"+month+"月"+day+"日 星期:"+week;
		$("hr").innerHTML=getTime(now.getHours());
		$("min").innerHTML=getTime(now.getMinutes());
		$("sec").innerHTML=getTime(now.getSeconds());
	})
}

在border部分添加一下标签与内容：

html

<body>
	<div id="box">
		<div id="date" class="content">
			0000年00月00日 星期:0
		</div>
		<div id="timer" class="content"> 
			<span id="hr">00</span><span class="point">:</span>
			<span id="min">00</span><span class="point">:</span>
			<span id="sec">00</span>
		</div>
	</div>	
</body>

CSS样式参考：

css

body{
	background-color:bisque;
	margin:auto;
	width:900px;
	height: 1000px;
	text-align: center;
}
#box{
	margin: 300px auto;
}
.content{
	float:left;
	border: solid 5px red;
	font-size: 50px;
}
#timer{
	margin-left: 10px;
	background-color: aquamarine;
}
#date{
	background-color: aquamarine;
	padding: 0px 5px;
}

到此，就完成了一个实时显示系统时间的WEB静态页面了！由于时间有限，无法记载太多的笔记，对以上JS内容尚有需要学习的地方。
附上效果：