JavaScript(操作元素属性:样式style,className,classList,表单元素,自定义属性,间歇函数)注册用户协议同意倒计时

操作元素属性

操作元素常用属性

  • 通过 JS 设置/修改标签元素属性,比如通过 src更换 图片

  • 最常见的属性比如: href、title、src

  • 语法:

    html 复制代码
    对象名.属性=值

操作元素样式属性

  • JS 设置/修改标签元素的样式属性。
  • Ø 比如通过 轮播图小圆点自动更换颜色样式
  • Ø 点击按钮可以滚动图片,这是移动的图片的位置 left 等等学习路径:
通过 style 属性操作CSS
  • 语法:

    html 复制代码
    对象·style·样式属性=值
操作类名(className) 操作CSS
  • 语法:

    html 复制代码
    元素名·className='css类名'
  • 注意:

    • className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
    • 使用 className 可以同时修改多个样式,直接使用 className 赋值会覆盖以前的类名
通过 classList 操作类控制CSS
html 复制代码
//追加一个类
元素名·classList·add('类名)
  //删除一个类
元素名·classList·remove('类名)
  //切换一个类(无就添加,有就删除)
元素名·classList·toggle('类名')
  • 注意: 使用 className 和classList的区别?
    • 修改大量样式的更方便 修改不多样式的时候方便
    • classList 是追加和删除不影响以前类名

操作表单元素 属性

  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框

  • 正常的有属性有取值的 跟其他的标签属性没有任何区别

    • 获取: DOM对象.属性名

    • 设置: DOM对象.属性名 = 新值

      表单·value='用户名'
      表单.type='password'

  1. 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
  2. 比如: disabled、checked、selected

自定义属性

  • 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、 selected
  • 自定义属性: Ø 在html5中推出来了专门的data-自定义属性

定时器-间歇函数

目标:能够使用定时器函数重复执行代码定时器函数可以开启和关闭定时器 setInterval(函数,间歇时间)

html 复制代码
/* 倒计时案例*/
 <script>
        // setInterval(函数,间隔时间(毫秒)

        let time = 5
      let times=  setInterval(function (){
              console.log(`倒计时还有${time}秒`);
             
            time--

            if(time === -1){
                // clearInterval(定义倒计时函数的变量名)

                clearInterval(times)
              }
        },1000)
    </script>
html 复制代码
<script>
        // setInterval(函数,间隔时间(毫秒)

        let time = 5
      let times=  setInterval(function (){
              console.log(`倒计时还有${time}秒`);
             
            time--

            if(time === -1){
                // clearInterval(定义倒计时函数的变量名)

                clearInterval(times)
              }
        },1000)
    </script>
    ```
html 复制代码
<!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=true
        let time = 60

      let times=setInterval(function (){
            but.innerHTML=`我已经阅读用户协议(${time})`
            time--
            if(time === 0){
                clearInterval(times)
                but.innerHTML='同意'
                // 取消禁用控件disabled
                 but.disabled=false
            }
        },1000)
    </script>
</body>

</html>
相关推荐
梦想科研社7 分钟前
【无人机设计与控制】红嘴蓝鹊优化器RBMO求解无人机路径规划MATLAB
开发语言·matlab·无人机
混迹网络的权某10 分钟前
每天一道C语言精选编程题之求数字的每⼀位之和
c语言·开发语言·考研·算法·改行学it·1024程序员节
一只特立独行的猪6111 小时前
Java面试题——微服务篇
java·开发语言·微服务
喵手3 小时前
Java 与 Oracle 数据泵实操:数据导入导出的全方位指南
java·开发语言·oracle
硬汉嵌入式4 小时前
H7-TOOL的LUA小程序教程第16期:脉冲测量,4路PWM,多路GPIO和波形打印(2024-10-25, 更新完毕)
开发语言·junit·小程序·lua
Wx120不知道取啥名4 小时前
C语言之长整型有符号数与短整型有符号数转换
c语言·开发语言·单片机·mcu·算法·1024程序员节
Python私教5 小时前
Flutter颜色和主题
开发语言·javascript·flutter
代码吐槽菌5 小时前
基于SSM的汽车客运站管理系统【附源码】
java·开发语言·数据库·spring boot·后端·汽车
Ws_5 小时前
蓝桥杯 python day01 第一题
开发语言·python·蓝桥杯
zdkdchao5 小时前
jdk,openjdk,oraclejdk
java·开发语言