HTML + JS实现万年历效果

实现的主要功能：

1. 点击实现日历样式的改变
2. 实现下一次点击时，上一次点击改变的样式恢复原状（核心）
3. 实现点击日历时，在最下方输出信息指定信息（注意：并不是点击元素中的信息）
   

第一步的核心思想：

由于此处增加点击事件不是通过 id名 直接添加，而是通过类数组（通过DOM中的TagName得到），给需要相同功能的标签，利用循环进行点击事件添加。
即如果是通过id名添加点击事件：

  id.onclick = function(){
  		id.style = "color:black"  //通过id这个钩子，可以直接取到通过点击事件要所想要修改的DOM
  }

这就造成了一个现象，即当鼠标点击后，无法直接通过id名（下面称为钩子），即钩子获取鼠标点击
了哪个日历块， 因为随着循环进行，其索引值不断改变，当循环结束，（点击时已经在循环结束后了）如何索引该日历块成了主要问题。
这里利用了 this 指向，（第一次感受到了this的威力），即其事先不用通过 钩子 得到要修改的元素，
而是，通过绑定的点击事件， 与可指向其调用对象的 this 获取到被点击日历块的 钩子。

第二步的核心思想：

这种思维方式，充分利用了JS脚本语言的特性，发挥了其在，修改DOM中的强大威力。

即通过给日历块加入 类名 （setAttribute(“class”,“active”)），使其与在css中已定义好的样式进行对应，也可实现DOM的改变！

并且，可以通过 清除 该DOM class名 ， setAttribute(“class”,"")，实现样式的回归！ 简直不要太给力！
但是，在运用时需要注意，其在css中的优先级，使用@important 可实现优先级最高！

核心代码

	body .active{
					background: #fff;
					color: red; 
				}

在在css中建立好点击后的样式，通过类名与点击事件相交互

<script type="text/javascript">
			var liArr = document.getElementsByTagName("li");
			var text = document.getElementById("text_1");
			var data = ["11","22","33","44","55","66","77","88","99","1010","1111","1212"];
			for(var i = 0;i< liArr.length ;i++){
				liArr[i].onmousemove = function(){
					this.style.border = "1px solid #ccc"
					//var child = this.children;
					//console.log(child);
				}
				liArr[i].onmouseout = function(){
					this.style.border = "none"
					//this.style.background = "rgba(51,51,51)"
				}
				
				liArr[i].index = i; // 保存索引值,可以任意调用别的数组来达到对应插入数据效果
				liArr[i].onclick = function(){
					// text.innerHTML  = this.innerHTML;
					 
						//this.className = "active";
						this.setAttribute("class","active");
						
						//先清除所有的类名
						for(var j = 0; j < liArr.length; j++){
							liArr[j].className = "";
						}
						this.className = "active";
						
						//console.log(i);
						text.innerHTML = data[this.index];					
				}
				//通过js添加修改类名,来对应已经定义好的样式!
				//此种方法可以通过,每次点击进行类名清空来使其恢复原样!
				//以此达到点此去彼的情况
				//思考:可不可以通过this 与 that 以及闭包特性解决呢？
				
			}
		</script>

js核心代码