当前位置：首页 > news >正文

js之操作元素属性和定时器以及相关案例倒计时

news 文章来源：https://blog.csdn.net/2302_80141844/article/details/139631343 2025/4/4 7:21:00

这里写目录标题

一级目录
- 二级目录
- - 三级目录
Web APIs01
四、操作元素属性
- 1.操作元素常用属性
- 2.操作元素样式属性
- - 通过style属性操作css
  - - 1.修改样式通过style属性引出
    - 2.如果属性有-连接符，需要转换为小驼峰命名法
    - 3.赋值的时候，需要的时候不要忘记加css单位
  - 通过className操作css
  - 通过classList操作css
- 3.操作表单元素属性
- 4.自定义属性
五、定时器-间歇函数
- 打开定时器
- 关闭定时器
用户倒计时效果案例
- 案例要求
- 大致思路
- 完整代码

一级目录

二级目录

三级目录

Web APIs01

四、操作元素属性

1.操作元素常用属性

对象.属性=值

2.操作元素样式属性

通过style属性操作css

对象.style.样式属性=值
//获取元素
const box document.querySelector(‘.box’)
//修改元素样式

1.修改样式通过style属性引出

box.style.width '200px
box.style.marginTop ='15px

2.如果属性有-连接符，需要转换为小驼峰命名法

box.style.backgroundColor =‘pink’

3.赋值的时候，需要的时候不要忘记加css单位

通过className操作css

元素.className=‘类名(不加点)’
注意：
由于class是关键字，所以使用className去代替
className是使用新值换旧值实现覆盖，如果需要添加一个类，需要保留之前的类名

通过classList操作css

使用className容易覆盖以前的类名，可以使用classList方式追加和删除类名
//追加一个类
元素.classList.add(‘类名’)类名不加点且是字符串
//删除一个类
元素.classList.remove(‘类名’)
//切换一个类(有就删，没有就加)
元素.classList.toggle(‘类名’)

3.操作表单元素属性

获取：DOM对象.属性名
设置：DOM对象.属性名=新值
表单.value=‘用户名’
表单.type=‘password’
注意：获取表单内容只能用"表单.value",但button特殊使用button.innerHTML,因为button的已经是标签内的内容，innerHTML获取的是双标签内的提示内容

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示如果为true代表添加了该属性如果是false代表移除了该属性
比如：disabled禁用、checked勾选、selected

<button disabled></button>
const button=document.querySeletor('button')
button.disabled=false//表示不能禁用

4.自定义属性

自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<body><div class="box",data-id="10",data-smp="21">盒子</div>
<script>const box document.querySelector('.box')console.log(box.dataset.id)console.log(box.dataset.smp)
</script>
</body>

五、定时器-间歇函数

单位为毫秒，返回的是一个id数字，函数名不需要加括号

打开定时器

setInterval (function(){
console.log(‘一秒执行一次’)
},1000)1000毫秒即为1秒，数字越小表示跳转间隔越小，跳转越快
2.
function fn() {
console.log(‘一秒执行一次’)
}
setInterval(fn,1000)这里调用函数不要加(),fn()表示立即调用函数，但在定时器里是主动调用

关闭定时器

let timer = setInterval(function(){
console.log(‘hi~~’)
},1000)
clearInterval(timer)
2.
let 变量名 = seyInterval(函数，间隔函数)
clearInterval(变量名)

用户倒计时效果案例

案例要求

文本框里放用户协议，倒计时结束前不能点击同意

大致思路

设置一个含有倒计时的按钮，获取按钮对象，利用定时器函数，不断修改倒计时内容，当倒计时数字为0时，关闭定时器，将禁用取消，文字改为同意

完整代码

<!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="" col="30" rows="10">用户注册协议xxx是哈哈怪，看完才能点确认</textarea><br><button class="btn" disabled>确认(8)</button><script>let i=8const btn=document.querySelector('.btn')let n=setInterval(function(){i--btn.innerHTML=`确认${i}`if(i===0){clearInterval(n)btn.disabled=falsebtn.innerHTML='同意'}},1000)</script>
</body>
</html>