2021-05-09

本次任务完成时间：2021年4月28日～2021年5月8日

开发工具与关键技术：JS

完成模块功能：电影排行榜

一、功能实现

    鼠标移入时展示内容，鼠标移出时收缩

如图1：

 

  图1  初始页面

 

图2 鼠标移入

通过运用流程控制语句 for循环（for...in）将li标签进行循环输出代码如下：

 

利用DOM 文档对象模型 中的元素的创建/添加/获取，将li标签自动添加元素；

经典代码：

 

  总结

  通过这个案例让我了解到，一个看似简单的效果并非轻而易举的实现，是要经过复杂的代码实现的。这其中含有丰富的知识点 、流程控制语句 for循环（for...in）、JavaScript  Object对象、DOM 文档对象模型 中的元素的创建/添加/获取、JavaScript 事件 。 

 

             电影排行榜

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：js

作者：

撰写时间：2021年4月28日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

讲解：

Html引用container将div分为12份

 

 

 

 

通过流程控制语句 for循环（for...in）、JavaScript  Object对象、DOM 文档对象模型 中的元素的创建/添加/获取、JavaScript 事件 创建li和类 “.content”

 

for(var i=0;i<lis.length;i++){

        lis[i].οnmοuseοver=function(){

//          console.log(this);

            this.querySelector(".content").style.display="block";

        };

        lis[i].οnmοuseοut=function(){

            this.querySelector(".content").style.display="none";

        }

 

最后给DOM创建的类“.content”添加属性；

如下图：