JS——内容提交及电子简洁日历

一、首先讲一下内容提交的方法

· innerHTML在JS中是双向功能：获取对象的内容 和 向对象插入内容。

    通过var D = document.getElementById('IdName'); D.innnerHTML 来获取id对象的内容；

    通过D.innnerHTML='改变内容';来更改id对象里的内容。

· innerHTML与innerText的区别【：

    innnerHTML获取的是当前对象内的所有子标签及内容

    innerText获取的是当前对象及当前对象以下的全部内容

例如：

<div id="D">
	ooooooooooooooooooooo
	<p>kkkkkkkkkkk</p>
</div>

window.onload = function(){	
       var oD = document.getElementById('D');
       alert(oD.innerHTML + ',' + oD.innerText);
};

#D {
	width: 200px;
	height: 200px;
	background-color: #ccc;
}

则结果是：

二、实例电子简洁日历

先看一下效果：

在鼠标经过li的时候触发事件：①更改自身样式；②更改div的内容。

代码展示：

HTML代码

<ul>
	<li><h2>1</h2><p>Jan</p></li>
	<li><h2>2</h2><p>Yeb</p></li>
	<li><h2>3</h2><p>Mar</p></li>
	<li><h2>4</h2><p>Apr</p></li>
	<li><h2>5</h2><p>May</p></li>
	<li><h2>6</h2><p>June</p></li>
	<li><h2>7</h2><p>July</p></li>
	<li><h2>8</h2><p>Aug</p></li>
	<li><h2>9</h2><p>Sept</p></li>
	<li><h2>10</h2><p>Oct</p></li>
	<li><h2>11</h2><p>Nov</p></li>
	<li><h2>12</h2><p>Dec</p></li>
</ul>
<div id="D">
	<h2>1月活动</h2>
	<p>过年了，大家要准备去旅游</p>
</div>

CSS代码

<style>
* {
	margin: 0;
	padding: 0;
}
h2 {
	margin: 10px 0;
}
ul p{
	font-weight: 700;
}
body{
	margin-top: 20px;
}
ul{
	margin: 0 auto;
	list-style: none;
	width: 310px;
	height: 325px;
	background-color: #eee;
}
ul li {
	text-align: center;
	float: left;
	width: 65px;
	height: 95px;
	border: 1px solid #f40;
	background-color: #f0c058;
	margin: 5px;
}
.active {
	background-color: #f40;
	color: #fff;
}
#D {
	margin: 0 auto;
	width: 310px;
	height: 100px;
	background-color: #ccc;
}

JS代码

window.onload = function(){
	//获取对象
	var oLi = document.getElementsByTagName('li');
	var oD =  document.getElementById('D');
	// 先用数组将月份事件活动保存到数组里
	var arr = [
		"过年了，一家团圆",
		"冬天一到，春天还会远吗",
		"等待春天的来临",
		"春天是多么美好，万物复苏",
		"一切生物都会成长，它的成长代表夏天快了",
		"夏天，我们可以去游泳，嬉戏",
		"暑假的气息，放心的玩耍",
		"暑假的快乐即将结束，快开学了",
		"这一月是开学的月份，新的学期加油",
		"奋斗中………………",
		"期末考试",
		"寒假到了，快过年了(＾－＾)V"
	];
	//添加鼠标移入和鼠标移除事件
	for(var i = 0;i <oLi.length;i++){
		oLi[i].index = i;//记录索引值
		oLi[i].onmouseover = function(){
			for(var j = 0; j < oLi.length;j++){
				oLi[j].className = "";
			}
			oLi[this.index].className = "active";
			oD.innerHTML = '<h2>'+(this.index+1) +'月活动</h2>'+'<p>' +arr[this.index]+' </p>';
		};
		oLi[i].onmouseout = function(){
			for(var j = 0; j < oLi.length;j++){
				oLi[j].className = "";
			}
		};
	}
};

月份的活动事件是事先保存到数组里面的，方便移入是对内容进行更改。