HTML中用户注册倒计时案例

news2024/10/6 10:33:12

一、代码

<!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" disabled>我已阅读用户协议(60)</button>
 <script>
    const btn=document.querySelector('.btn')
    let i = 5
    let n = setInterval(function(){
        i--
        btn.innerHTML = `我已阅读用户协议(${i})`
        if (i === 0){
            clearInterval(n)
            btn.disabled = false
            bth.innerHTML = '同意'
        }
        },1000)
 </script>
</body>

</html>

二、运行截图

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/748121.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

el-table 动态合并不定项多级表头

我们的需求是根据不同的厂配不同的多级表头,每个表头有需要合并的项,并且不确定 如图所示 对表格进行循环操作,此处不赘述,最下方有全部代码 表头是单独写在js方便后期更改,然后引入js文件,然后根据情况去调取 // 获取表头getHeader(nv) {this.factoryCodes nv;this.heade…

KingFusion通过动态库的方式连接KingIOServer数据

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 本节主要测试KingFusion通过动态库接入KingIOServer数据&#xff0c;实现快速订阅、回写实时数据及客户端展示的操作。 说明&#xff1a; 1、Windows版本:KingFunsion与KingIOServer数据交互时&#xff0c;使用动态库…

python中应用requests库模拟postman请求携带token,使用get和post方法请求头携带token

背景&#xff1a; 实际开发中&#xff0c;Python程序中需要调用后台接口&#xff0c;充当前端&#xff0c;后端规定请求头需要携带token 封装的get和post类: class RequestMethodCarryJson:"""定义请求类型以json方式传递参数"""def __init__…

欧姆龙NJ1P2 Fins Udp通讯

NJ1P2 Tcp连接不成功&#xff0c;咨询客服说不支持Fins Tcp&#xff0c;所以改成Udp方式。 Udp连接&#xff1a; locateIp IPAddress.Parse(txtLocateIP.Text); locatePoint new IPEndPoint(locateIp, Convert.ToInt32(txtLocatePort.Text)); udpCl…

刷题记录02

题目1 解析: 遍历字符串&#xff0c;使用cur去记录连续的数字串&#xff0c; 如果遇到不是数字字符&#xff0c;则表示一个连续的数字串结束了&#xff0c; 则将数字串跟之前的数字串比较&#xff0c;如果更长&#xff0c;则更新更长的数字串更新到ret。 具体代码: import jav…

线上阿里云短信盗刷问题实录

背景 营销系统中有定时任务处理将待支付订单变更为已取消,执行时间五分钟一次.业务执行处理异常会发送短信给相关开发人员进行短信提醒.从下午一点二十五开始,开发人员间隔五分钟就会收到业务执行异常的短信提醒.最初因为测试或是正式环境中确实有异常的业务,才会出现这个情况,…

C++结合EasyX写扫雷(new)

【游戏】C结合EasyX写扫雷&#xff08;时隔半年后重写&#xff09; 上一次写扫雷这一次实现思路设置全局变量Grid类Grid类的成员函数启动画面死循环监听鼠标事件 全部代码其他 上一次写扫雷 大约半年之前的寒假期间&#xff0c;我接触了EasyX这个图形库&#xff0c;于是试着写…

antd design 4 版本,表格操作列文字间隔小竖线

组件库可以直接使用 <Divider typevertical /> 时小记&#xff0c;终有成。

23 MFC 富文本

文章目录 ui 设置 使用AfxInitRichEdit2(); 初始化否则不显示 //初始化 BOOL CnotePadDlg::OnInitDialog() {CDialogEx::OnInitDialog();// 设置此对话框的图标。 当应用程序主窗口不是对话框时&#xff0c;框架将自动// 执行此操作SetIcon(m_hIcon, TRUE); // 设置大图标…

数学建模——TOPSIS法

TOPSIS法&#xff08;Technique for Order Preference by Similarity to ldeal Solution&#xff09; 可翻译为逼近理想解排序法&#xff0c;国内常简称为优劣解距离法 TOPSIS法是一种常用的综合评价方法&#xff0c;其能充分利用原始数据的信息&#xff0c;其结果能精确的反应…

一款基于JAVA开发的Echarts后台生成框架

目录 前言 一、Echarts后台生成框架 1、简介 2、开源地址 3、支持类型 二、图表生成实战 1、项目使用 2、后台折线图生成 3、Echarts改造 4、最终效果 总结 前言 之前的博文主要分享了一些关于Echarts的基本开发知识&#xff0c;在之前的博客中主要介绍的是在前端页面进…

魏副业而战:她又办了2套图书证

我是魏哥&#xff0c;与其躺平&#xff0c;不如魏副业而战&#xff01; 社群成员董姐又办了2套图书证&#xff0c;加上之前的1套&#xff0c;她已经有3套图书证了。 3套图书证意味着可以开9个闲鱼图书店铺。是不是感觉很NB。 董姐说&#xff0c;2套图书证等了快一个多月&…

Flink基本原理剖析讲解

1.Flink简介 Flink是一个批处理和流处理结合的统一计算框架&#xff0c;其核心是一个提供了数据分发以及并行化计算的流数据处理引擎。它的最大亮点是流处理&#xff0c;是业界最顶级的开源流处理引擎。 Flink最适合的应用场景是低时延的数据处理&#xff08;Data Processing…

面试题更新之-伪元素和伪类

文章目录 伪元素和伪类是什么&#xff1f;伪元素&#xff08;Pseudo-elements&#xff09;:伪类&#xff08;Pseudo-classes&#xff09;: css伪元素和伪类的区别使用css伪元素的好处使用css伪类的好处 伪元素和伪类是什么&#xff1f; 在CSS中&#xff0c;伪元素&#xff08;…

星云零售信贷基于 Apache Doris 的 OLAP 演进之路

本文导读&#xff1a; 腾梭科技是国内领先的零售金融数字化及安全服务提供商&#xff0c;是腾讯投资且在金融领域的战略合作伙伴&#xff0c;并与腾讯联合研发了“星云智慧信贷解决方案。在其信贷业务转型过程中&#xff0c;随着系统规模不断扩大&#xff0c;早期架构无法再满…

centos7根分区、文件系统扩容

1、 输入lsblk&#xff0c;查看到新硬盘sde&#xff0c;根目录现71G. 2、 创建分区fidisk /dev/sde 3、 刷新分区 partprobe /dev/sde&#xff0c;并创建物理卷 pvcreate /dev/sde1 4、 查看卷组名 vgdisplay 5、 将物理卷扩展到卷组 vgextend centos /dev/sde1 6、 查看逻辑巻…

linux系统安装步骤教程详解

linux是现在常用的一类操作系统&#xff0c;我们可以通过U盘、光驱、或者虚拟机进行安装。 具体步骤如下&#xff1a; 1.去https://www.centos.org/download/下载centos系统&#xff0c;其中CentOS-7.0-x86_64-DVD-1503-01.iso 是标准安装版&#xff0c;推荐下载这个; 2.使用U盘…

OCR技术的昨天今天和明天!2023年最全OCR技术指南!

OCR是一项科技革新&#xff0c;通过自动化大幅减少人工录入的过程&#xff0c;帮助用户从图像或扫描文档中提取文字&#xff0c;并将这些文字转换为计算机可读格式。这一功能在许多需要进一步处理数据的场景中&#xff0c;如身份验证、费用管理、自动报销、业务办理等都显得尤为…

MySQL常见笔试题

前言 数据库的考察在面试时可是十分常见的&#xff0c;MySQL作为一种常用的关系型数据库管理系统&#xff0c;对于它的介绍在面试时可是必不可少的&#xff0c;下面就是一些常见笔试题的模拟&#xff0c;希望可以帮助到你&#x1f642;&#x1f642; 所用到的表如下&#xff…

国产MCU-CW32F030开发学习-BH1750模块

国产MCU-CW32F030开发学习-BH1750模块 硬件平台 CW32_48F大学计划板CW32_IOT_EVA物联网开发评估套件BH1750数字型光照强度传感器 BH1750 BH1750是一款数字型光照强度传感器&#xff0c;能够获取周围环境的光照强度。其测量范围在0~65535 lx。lx勒克斯&#xff0c;是光照强…