HTML + JS实现万年历效果

实现的主要功能：

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

第一步的核心思想：

由于此处增加点击事件不是通过 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核心代码

HTML + JS实现万年历效果相关推荐

原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录效果图示例源码地址: 效果图示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
pixi.js 制作流星雨效果
pixi.js 制作流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...
html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...

HTML + JS实现万年历效果

HTML + JS实现万年历效果相关推荐

最新文章

热门文章