facker_Lap的博客

（3）用户滑动页面时，top的值也会发生变化，可以通过将top的值与数组items中的元素作比较，从而相应的改变elevatorA数组中的每一个a标签的css样式，如下。，获取header的高度与滚动条作比较，从而决定滚动条移动到哪里就不在移动，获取四个item的元素，计算出他们的高度，与滚动条的固定位置作比较，从而决定。至此，有关滚动条的实现就完成了，这个实现操作并不难，但是由于笔者语言组织不太好，伙伴们可以将代码复制下来，询问AI注释，下面使笔者最终的实现效果。，同时获取滚动条的初始位置，如下。

所以，先建立三个文件夹，分别用来存放HTML，CSS，JS代码，我这建立的是Xindex.html，Xindex.css，Xindex.js文件夹。由于笔者也是初学者，某些注释可能不合理，某些代码也可能有bug，若有错误，还请读者们及时与我沟通啊，同时，下一篇文章也会用到该篇文章中的部分代码；三，准备工作和Xindex.html以及Xindex.css部分的代码已经完成，接下来，我们开始js部分，下拉列表部分主要用到两个事件，即oninput事件，onblur事件；是用来清空下拉列表的内容的，

三，现在来实现timer，定义一个定时器timer，用来定时自动切换图片，这里主要用到一个函数setInterval()，()类主要包含两个参数，第一个参数里在放一个函数，用于自动切换图片，第二个参数用于定义切换图片的时间间隔,如下。二 ，准备工作，首要将需要用到的类和HTML标签引入到Lindex.js文件中，并定义好一个计数器count，用来计数(定义为全局变量最好),定义一个imgArr数组用来存放你需要展示的图片，如下。四，箭头与图片的移动，这里主要与onclick点击事件有关，

值得注意的是，computed为属性，所以在{{ }}中使用它的类名时，不需要在最后加(),如{{totalNumber}}，但在使用methods方法中的函数时，则需要在{{ }}的最后加()，如{{totalNumber()}}；我们改变代码块中的num值时，用户页面的总计值也会改变，当然，在用户页面按F12打开浏览器的开发者工具，在开发者工具中改变num的值，我们可以更直观的看到computed的作用。计算属性，顾名思义可以自动计算表单或其他的总值，如下以计算表单的总计为例，先看代码块。