【032】Python全栈日记-JavaScript（四）

本章和上期一样，主要以案例为主，然后穿插一些新的知识点，这一期关于轮播图讲的非常详细，动图加分解。

 

一、表单验证

这个你肯定是见过的

当你输入的号码超过11位时，就会提醒你输入的有错误。

我们拆解来看，首先我们把鼠标点进input的text的框中，填写完毕移出鼠标，就会提醒你输入的格式正确或者错误。

这里就涉及到了一个，鼠标点入文本框和移出文本框的鼠标事件：

点入文本框叫做：

鼠标聚焦：onfocus

移出文本框叫做：

鼠标失焦：onblur

使用方法和其他鼠标事件的使用方法一致的。

 

我们来实现一下这个效果：

效果：

 

 

 

二、创建元素

我们要在原有的div里添加一个新的标签应该如何去做呢？

昨天我们学过一个方法是通过innerHTML来给div中写入，今天再学一个标准的通过JavaScript给HTML创建元素的方法。

 

创建节点：

var span = document.createElement('span'); 创建一个span标签

创建文本节点：

Var txt =  document.createTextNode(‘文本内容’)：创建一个内容为‘文本内容’的文本节点

文本和标签进行关联：

span.appendchlid(txt):把文本节点放到span标签中

挂在父盒子上：

Body.appendchild(span):把创建的span标签放在html的body中

 

我们创建一个节点有四个步骤：

创建一个元素节点 div , p ,a span

创建文本节点 document.createTextNode()

进行文本和标签节点的挂接

挂接到父盒子身上

 

效果：

我们看看控制台：

控制台里我们发现在div中多了一个span标签。

 

这就是创建元素，我们再把创建的元素放在盒子里时用到了appendchlid，child是孩子的意思，这里就涉及到了昨天说的，文档树形结构：

我们可以通过树形结构关系来获取整个html文档中的任何标签

 

 

 

3、创建一个无序列表，当鼠标放上去，奇数行变黄，偶数行变红

我们就用上面学的创建元素来做，在html中我们不写任何标签，全部通过JavaScript来创建。

先把大的边框和li的css做出来，以供我们在JavaScript中使用

JavaScript代码：

执行一下：

看一下控制台：

我们能发现ul已经写在body中了，而且对象.style.属性，是写在行内的。

 

在这里我们学习一下javascript中对于双分支循环的简写，这个源自c语言：

条件表达式 ：

表达式1？表达式2:表达式3*/

判断表达式1是否成立，成立放回表达式2，不成立返回表达式3

因为是返回后面的表达式，所以需要有变量来接收结果。

我们把判断是否为偶数行奇数行的修改一下：

 

 

 

四、网页顶部广告关闭，并逐渐消失。

我们以京东为例

上面红色的那条广告，点击右上角的x后，会渐变式的消失。

既然有逐渐消失，那就涉及到了时间这个参数，我们先学习两个知识点。

 

1、透明度的设置

之前我们学过通过rgba(0,0,0,.4)设置透明色，今天学的这个是透明属性

opacity: n ：n从1到0，1为不透明，0为全透明。

我们一般把这种需要修改的元素放在行内，方便进行修改。

 

2、定时器

其实定时器属于BOM的内容（明天说啥是BOM）

 

（1）setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

使用方法：

setInterval（参数1，参数2）：

参数1是定时器在定时期间执行的程序，一般我们会把函数扔进去，

参数2是间隔时间，单位为毫秒

   

 

（2）setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

使用方法与setinterval一致

 

 

知识点学完了，回到例子中

我们先实现静态的，我们把图片从京东里扒出来后发现，是一个全屏宽度的div套了一个版心宽度的广告图：

静态：

静态应该不是啥问题，很简单。

然后我们先添加点击小x关闭的效果

关闭就是把他隐藏了，使用display = 'none'会把广告的占位一起隐藏。

然后我们要添加一个渐渐消失的效果，渐渐消失就是，透明度越来越大的过程，也就是

Opacity逐渐从1到0的过程。

这样一个渐变消失的通知栏就做好了。

 

 

五、轮播图（难）

轮播图很常见，就是网页主视中来回切换的广告图

左右的箭头可以点击进行图片切换，下面的小圆点会随着图片滚动跟着滚动，然后当你点击原点，会切换到原点对应的图片。

 

说一下思路：轮播图实际上就是几张图片连成一条：

然后我们把这一条图片放在一个和一张图片一样大小的展示框，展示框设置溢出隐藏（overflow）属性，就只会显示一张图片。我们图片条是通过绝对定位放在框中，展示框不动，我们让图片条移动起来，所以通过修定位的left的值就可以进行图片的左右移动：

展示框的左上角为坐标0点，

所以图片条向左移动，也就是下一张图片进入展示框，移动的left为负值，每次图片到下一张left减去一张图片的长度

而图片条向右移动，就是上一张图片展示在展示框中，移动的left为正值，每次图片回到上一张left加上一张图片的宽度

 

再说图片循环，当我们展示到最后一张图时，下次切换就会回到第一张，我们展示最后一张图的时候left > 0 -（图片数-1）*图片宽度 ，当left到这个值时，让left = 0，为什么是图片数减1呢，因为坐标原点在右上角，所以展示最后一张图，也就是前几张在展示框外面，所以left是出去的那几张图的宽度

而从第一张图退到最后一张图同理，当我们点后退按钮让图片反着展示时，当left < 0时

让left变为0 -（图片数-1）*图片宽度，也就是最后一张图位置。

 

道理就是这样我们来实践一下。

 

首先我们先做出静态图片：

Html：

Css：

这样我们就实现了一个静态的轮播图，接下来我们先完成手动轮播图和自动轮播，小点控制图片先放在一边

 

首先我们把所有的元素都在JavaScript中获取一下，不获取怎么进行修改对不对：

 

图片的长度为590px，一共5张图片

所以图片条自动向左移或者手动点击右箭头，展示框展示下一张为left = left – 590px；

图片向右移或手动点击左箭头，展示框显示上一张，left = left + 590px；

 

这样我们定义一个控制图片移动的函数ani（offset），参数offset代表left的偏移量也就是正负590.函数在移动图片的同时还能进行判断，如果图片没了循环播放。

我们先用函数实现点击按钮图片进行切换：

效果：

 

 

然后我们来用定时器实现图片自动切换：

效果:

 

一般这种图当你把鼠标放进去，图片就不再轮播。当你鼠标离开，轮播继续，所以可以理解为当鼠标放入展示框清除刚才的定时器，鼠标移开让定时器继续运行。

 

 

接下来就是最麻烦的小圆点控制图片，

1、我们要想小圆点控制图片，首先就需要把小圆点的顺序和图片的顺序关联起来，

2、 其次我们鼠标放在小圆点上后跳转到小圆点对应的图，放到另一个后跳转到另一张图片，这就需要记录之前的位置和最新的位置。

 

首先我们需要设置一个索引，这个索引代表当前轮播到第几张图片了，同样也是当前轮到第几个小圆点了。因为索引是随着图片变化而变化，所以我们可以把索引放在我们自动轮播的函数中，让索引随着图片向前而增加，图片向后而减少，当然索引数肯定不能大于小圆点数，也不能小于0，但是我们的小圆点也必须随着左右按钮的点击发生变化，我们的自动轮播函数正好调用了手动轮播的点击函数，所以我们把索引放在左右按钮点击事件中。

 

我们先在开头定义index变量：

 

然后写所有小圆圈只能有一个有色，其他都没色的情况，这个就是我们昨天学习的排他，

小圆点切换函数：

On是我写在css中的一个颜色属性。

 

然后应该修改手动轮播函数如下：

这样自动和手动圆点随图片切换就做好了，然后就是鼠标放在圆点上进行图片切换。

 

 

做通过圆点切换图片：

首先需要对小圆点进行标号，我们给每个小圆点自定义一个属性num，从0到4（5张图），代表小圆点的序号。

 

例如当前自动播放到了第4张图，索引值（index）为3，我们把鼠标放在第2个圆点上（第二张图），num值为1，那图片条应该移动多少呢？

应该是（index – num）*590，也就图片条向右移动2张图片的宽度，偏移量为正。如果我们移开鼠标，轮播图会从第二张（num=1）这张图片开始进行轮播，而不是跳回第四张图（index=3），所以我们需要把num的值赋给index，这样才能接着进行。

如果我们随后我们把鼠标放在第5张图上，num变为4，那图片会从第2张跳到第4张，

也就是用旧的num减去新的num再乘图片宽度。而旧的num已经赋值给index了，所以同样为（index – num）*590。

接下来用代码实现这个过程：

 

这样一个轮播图就实现了：

​