HTML + JS实现万年历效果

末蓝、 2022-02-26 06:49 510阅读 0赞

实现的主要功能：

1.  点击实现日历样式的改变
2.  实现下一次点击时，上一次点击改变的样式恢复原状（核心）
3.  实现点击日历时，在最下方输出信息指定信息（注意：并不是点击元素中的信息）  
    ![在这里插入图片描述][20190329155932470.gif]

第一步的核心思想：

由于此处增加点击事件不是通过 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中建立好点击后的样式，通过类名与点击事件相交互

js核心代码

[20190329155932470.gif]: /images/20220226/52a02d3c755c470cae07030461333ddf.png