JavaScript（操作元素属性：样式style，className，classList，表单元素，自定义属性,间歇函数）注册用户协议同意倒计时
操作元素属性
操作元素常用属性
- 通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如：
href、title、src等 - 语法：
对象名.属性=值
操作元素样式属性
- JS 设置/修改标签元素的样式属性。
- Ø 比如通过 轮播图小圆点自动更换颜色样式
- Ø 点击按钮可以滚动图片，这是移动的图片的位置 left 等等学习路径：
-
通过 style 属性操作CSS
- 语法：
对象·style·样式属性=值
- 语法：
-
操作类名(className) 操作CSS
- 语法：
元素名·className='css类名' - 注意：
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名- 使用
className可以同时修改多个样式，直接使用className赋值会覆盖以前的类名
- 语法：
-
通过 classList 操作类控制CSS
//追加一个类 元素名·classList·add('类名)//删除一个类 元素名·classList·remove('类名)//切换一个类（无就添加，有就删除） 元素名·classList·toggle('类名')
- 注意： 使用 className 和classList的区别？
- 修改大量样式的更方便 修改不多样式的时候方便
- classList 是追加和删除不影响以前类名
操作表单元素 属性
-
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
-
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
表单·value='用户名' 表单.type='password'
- 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
- 比如： disabled、checked、selected
自定义属性
- 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected
- 自定义属性： Ø 在html5中推出来了专门的data-自定义属性
定时器-间歇函数
目标：能够使用定时器函数重复执行代码定时器函数可以开启和关闭定时器 setInterval(函数,间歇时间)
/* 倒计时案例*/<script>// setInterval(函数，间隔时间（毫秒)let time = 5let times= setInterval(function (){console.log(`倒计时还有${time}秒`);time--if(time === -1){// clearInterval(定义倒计时函数的变量名)clearInterval(times)}},1000)</script><script>// setInterval(函数，间隔时间（毫秒)let time = 5let times= setInterval(function (){console.log(`倒计时还有${time}秒`);time--if(time === -1){// clearInterval(定义倒计时函数的变量名)clearInterval(times)}},1000)</script>```<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
/* 注册用户协议同意倒计时*/<textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn">我已经阅读用户协议(60)</button><script>// 获取对象const but = document.querySelector('.btn')but.disabled=truelet time = 60let times=setInterval(function (){but.innerHTML=`我已经阅读用户协议(${time})`time--if(time === 0){clearInterval(times)but.innerHTML='同意'// 取消禁用控件disabledbut.disabled=false}},1000)</script>
</body></html>