登录页面动态制作，DOM元素，修改文字内容、元素样式、表单、计时器、轮播图、事件监听

本文链接：https://blog.csdn.net/weixin_74620057/article/details/139093681

一、登录页面

展示效果如下点开页面熊会自动跑到中间去并且一直处于奔跑动作

技术原理：

该效果运用了css的动画技术即@keyframes

具体语法为

该效果实现的具体步骤为：

1.选择一个熊奔跑的静态图

其实写出一个合适大小的盒子将一个熊装进去

接着就是制作动画

最后就需要利用animation调用动画即可

（1）动画的速度变化曲线（默认使ease）：

·linear——线性

·ease——缓入缓出 ease-in/out

·steps——阶段即设置这个属性就会一步一步的变化就像上台阶一样

（2）动画结束后的状态：

·forwards——定格在动画最后画面不再改变，就像白熊停留在网页中间

·backwards——动画结束后起始状态

·infinite——可以使画面重复播放可以通过（animation-iteration-count）来设置

二、APIs学习

1.DOM树和DOM对象

DOM是用来呈现以及与任意HTML交互的api

（1）获取DOM元素：

const box = document.querySelector('.box')

selector是用于查找和选择元素，上面一串代码是通过类名选择器选择元素

const box 则是赋予一个元素名

还可以通过标签选择器、id选择器等等选择元素

const p = document.querySelector('p')

const id = document.querySelector('#id')

（2）修改文字内容

步骤是：先获取想要修改的元素再进行修改

·元素名 . innerText = ‘新值’

·也可通过innerHTML进行修改两者不同的区别是innerHTML可以解析标签例如——加上一个strong标签就会进行解析并且进行文字加粗

（3）修改元素样式属性

步骤也是先获取元素再进行修改

·元素名.style.样式属性 = ‘新值’

例如：直接把box的宽度改为400px

box.style.width = '400px'

·修改的样式很多classname——元素.类名 = ‘active’

Js和css联合先定义一个css样式然后再进行调用比如 div.className = ‘box’

·classList

追加一个类：元素.classList.add（‘类名’）

删除：元素.classList.remov（‘类名）

切换：元素.classList.toggle（‘‘类名）

（4）操作表单元素

元素名.属性名 = ‘新值’

主要就根据这串代码讲input标签中的type属性由text改为password

（5）定时器——间歇函数

定时器——开启setInterval（函数，间隔时间（单位毫秒））——间歇时间表示每隔多少时间执行一次这个函数

关闭 clearInterval（）

定时器返回的是一个id数字必须要给他命名一个名，不然无法关闭

let m = setInterval(function () {},间歇时间)

基于定时器的属性我做了一个轮播图效果和代码如下：

 <script>
        const data = [{
            src: 'images/01.jpg'},
        {
            src: 'images/02.jpg'},
        {
            src: 'images/03.jpg'},
        {
            src: 'images/04.jpg'}
        ]
        const img = document.querySelector('.box img ')
        let i = 0
        let m = setInterval(function () {
            i++
            if (i >= data.length) {
                i = 0
            }
            img.src = data[i].src
            document.querySelector(`.footer ul .active`).classList.remove('active')
            document.querySelector(`.footer ul li:nth-child(${i + 1})`).classList.add('active')
        }, 3000)
    </script>

实现的顺序是首先创建一个一张图片的样式

1.创建一个数组将要轮播的图全部添加到里面去

2.引入想要切换的元素——img

3.输出定时器操作

这串代码表示的是随着轮播图的图片的变动下面小圆点也跟着一起变

第一行代码是先获取被选中的小圆点然后消除他

第二行代码表示的是在刚才消除的小圆点后面的一个小圆点添加该样式

nth-child（）表示在第几个li上面添加这个样式

·该代码代表的是图片轮播到最后一个是从头开始播放

2.事件监听

（1）添加监听事件

元素对象.addEventListener(‘事件类型’,要执行的函数)

（2）点击事件类型——click

点击事件即当鼠标点击以后发生的是用click来执行

下列代码为当我们点击了这按钮时网页会弹出一个提示

比如随机点名案例就可以通过点击事件以及定时器进行：

1.首先生成一个数组里面填写名单

2.引入HTML中的网页元素

3.添加点击事件再在点击事件当中加入定时器

4.关闭定时器

<script>
        let n = 0
        let arr = ['111', '222','333','444','5555']
        const input = document.querySelector('.qs')
        const start = document.querySelector('.start')
        const end = document.querySelector('.end')
        start.addEventListener('click',function(){
          n=   setInterval(function(){
                let num = parseInt(Math.random() * arr.length)
                input.innerHTML = arr[num]
        })})
        end.addEventListener('click',function(){
            clearInterval(n)
        })
    </script>

遇到的问题：

当我点击结束按钮时无法关闭定时器

原因：给上一个函数添加的名为n的定时器是一个局部变量，所以在关闭函数当中无法使用

解决方法：定义一个全局变量 n = 0 在删除开始函数时定义的变量