javascript和python实现用户倒计时功能
- HTML部分：
- 有一个
input输入框，其id为countdown-time，用于让用户输入倒计时的秒数。 - 一个按钮，
id为start-btn，点击它来触发倒计时开始的操作。 - 还有一个
div元素，id为countdown-display，用来实时显示倒计时的剩余秒数情况。
- 有一个
- JavaScript部分：
- 首先通过
document.getElementById获取到相应的页面元素。 - 给
start-btn按钮添加点击事件监听器，当点击按钮时：- 获取用户在输入框中输入的值，并将其转换为整数类型（通过
parseInt），判断如果输入的值不是有效的正整数或者小于等于0，则弹出提示框并返回，不进行倒计时操作。 - 定义一个变量
remainingSeconds来记录剩余的秒数，初始值为用户输入的总秒数。 - 使用
setInterval函数创建一个定时器，每间隔1000毫秒（即1秒）执行一次回调函数。在回调函数中：- 将
remainingSeconds减1，并更新countdown-display元素中的文本内容，显示当前剩余秒数。 - 当
remainingSeconds变为0时，意味着倒计时结束，通过clearInterval清除定时器，同时将显示内容更新为倒计时结束！。
- 将
- 获取用户在输入框中输入的值，并将其转换为整数类型（通过
- 首先通过
javascript
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时功能</title>
</head><body><input type="number" id="countdown-time" placeholder="请输入倒计时秒数"><button id="start-btn">开始倒计时</button><div id="countdown-display"></div><script>// 获取页面元素const countdownTimeInput = document.getElementById('countdown-time');const startBtn = document.getElementById('start-btn');const countdownDisplay = document.getElementById('countdown-display');startBtn.addEventListener('click', function () {const totalSeconds = parseInt(countdownTimeInput.value);if (isNaN(totalSeconds) || totalSeconds <= 0) {alert('请输入有效的正整数秒数');return;}let remainingSeconds = totalSeconds;const intervalId = setInterval(function () {remainingSeconds--;countdownDisplay.textContent = `倒计时：${remainingSeconds}秒`;if (remainingSeconds === 0) {clearInterval(intervalId);countdownDisplay.textContent = '倒计时结束！';}}, 1000);});</script>
</body></html>
python
import tkinter as tkdef start_countdown():try:total_seconds = int(entry.get())if total_seconds <= 0:result_label.config(text="请输入大于0的整数秒数")returnremaining_seconds = total_secondsdef update_countdown():nonlocal remaining_secondsremaining_seconds -= 1result_label.config(text=f"倒计时：{remaining_seconds}秒")if remaining_seconds == 0:result_label.config(text="倒计时结束！")root.after_cancel(timer_id)timer_id = root.after(1000, update_countdown)except ValueError:result_label.config(text="请输入有效的整数")root = tk.Tk()
root.title("倒计时功能")label = tk.Label(root, text="请输入倒计时秒数：")
label.pack()entry = tk.Entry(root)
entry.pack()start_button = tk.Button(root, text="开始倒计时", command=start_countdown)
start_button.pack()result_label = tk.Label(root, text="")
result_label.pack()root.mainloop()
相关文章：
javascript和python实现用户倒计时功能
HTML部分： 有一个input输入框，其id为countdown-time，用于让用户输入倒计时的秒数。一个按钮，id为start-btn，点击它来触发倒计时开始的操作。还有一个div元素，id为countdown-display，用来实时显示…...
HTML5系列（10）-- 地理位置服务指南
前端技术探索系列：HTML5 地理位置服务指南 🌍 致读者：探索位置服务的魅力 👋 前端开发者们， 今天我们将深入探讨 HTML5 的地理位置服务（Geolocation API），这项强大的功能让我们能…...
计算机毕业设计Python+大模型农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop
温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...
qt QPrinter详解
1、概述 QPrinter类是Qt框架中用于打印输出的绘图设备。它表示打印出来的一系列页面，并提供了一组附加功能来管理特定于设备的特性，比如方向和分辨率。QPrinter可以生成PDF文档，也可以将内容发送到打印机进行实际打印。它继承自QPagedPaintD…...
CentOS 9 配置静态IP
文章目录 1_问题原因2_nmcli 配置静态IP3_使用配置文件固定IP4_重启后存在的问题5_nmcli 补充 1_问题原因 CentOS 7 于 2014年6月发布，基于 RHEL 7，并在 2024年6月30日 结束维护。 CentOS 9 作为目前的最新版本，今天闲来闲来无事下载下来后…...
MySQL2.0
7.B树和B树的区别 结构特点 B树：是一种平衡的多路查找树，它的每个节点包含多个关键字和多个子节点指针。B树的叶子节点和非叶子节点都可以存储数据记录。B树：也是一种平衡多路查找树，B树的非叶子节点只用于索引，即只…...
Nginx 限制 IP 网速
使用Lua和Nginx限制IP网速的基本原理 要限制某个IP的网速，在Nginx中结合Lua可以通过令牌桶算法（Token Bucket）来实现。令牌桶算法是一种流量整形算法，它以一定的速率生成令牌放入桶中，当请求到来时，需要从桶…...
前端小练习——大雪纷飞（JS没有上限！！！）
大家好，我是小黄。 具体效果：（大雪缓缓下落） 完整代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&qu…...
CE4.【C++ Cont】练习题组4
目录 1.求出 e 的值 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 提交结果 2.画矩形 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 简化代码 提交结果 3.查找特定的值 题目描述 输入格式 输出格式 输入输出样例 代码 提交结果…...
uniapp h5 vue3 m3u8 和 mp4 外链视频播放
m3u8视频播放 使用mui-player 和hls.js。 安装npm install mui-player hls.js我的版本是"hls.js": "^1.5.17"和"mui-player": "^1.8.1"使用 页面标签： 引用： 点击目录播放视频： m3u8视频播放&a…...
【动手学运动规划】 4.5 A*算法
我宁愿永远做我自己，也不愿成为别人，即使那个人比你更快乐。 —《成为简奥斯汀》 🏰代码及环境配置：请参考 环境配置和代码运行! 4.5.1 概述 Dijkstra算法是基于广度优先搜索策略来遍历空间内的所有节点，最终计算出…...
从零开始学习 sg200x 多核开发之小核 FreeRTOS 运行
sophpi 小核支持默认运行 FreeRTOS，并且已经启动，小核的运行固件被打包在 fip.bin文件中，由 fsbl 负责加载。 启动后，小核会运行 FreeRTOS，并输出日志到串口。串口日志输出在 UART0 上，波特率 115200&…...
生信软件开发1 - 设计一个简单的Windwos风格的GUI报告软件
1. 安装基础库 使用Windows 11标题样式和主题自定义UI窗口库pywinstyles（github: https://github.com/Akascape/py-window-styles），结合python自带tkinter库设计一个报告GUI软件。 pip install pywinstyles2. 设计一个简单的Windwos风格的G…...
openEuler 22.03 使用cephadm安装部署ceph集群
目录 目的步骤规格步骤ceph部署前准备工作安装部署ceph集群ceph集群添加node与osdceph集群一些操作组件服务操作集群进程操作 目的 使用ceph官网的cephadm无法正常安装，会报错ERROR: Distro openeuler version 22.03 not supported 在openEuler上实现以cephadm安装部…...
爬虫项目练手
python抓取优美图库小姐姐图片 整体功能概述 这段 Python 代码定义了一个名为 ImageDownloader 的类，其主要目的是从指定网站（https://www.umei.cc）上按照不同的图片分类，爬取图片并保存到本地相应的文件夹中。不过需要注意&…...
关于使用注册表修改键盘的键位映射
修改注册表实现键盘的键位映射 前言一、scancode是什么？二、步骤1.打开注册表2.scancode表 总结 前言 弄了个蓝牙的欧洲键盘，但左上角居然是WWW home键，还找不到Esc键，崩溃了，VI都用不了。 赶紧考虑键位映射ÿ…...
[HCTF 2018]WarmUp-滑稽
启动场景打开链接，出现一下图片 F12查看代码出现一个注释，应该在这个文件中， 进入到该页面，出现一段代码 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["sourc…...
WPF+LibVLC开发播放器-进度条显示和拖动控制
进度条显示和拖动控制 视频教程界面上代码实现进度条显示进度进度条拖动视频进度 效果 视频教程 WPFLibVLC开发播放器-进度条控制 界面上 界面上线增加一个Slider控件，当做播放进度条 <SliderName"PlaySlider"Grid.Row"1"Width"800&qu…...
linux下Qt程序部署教程
文章目录 [toc]1、概述2、静态编译安装Qt1.1 安装依赖1.2 静态编译1.3 报错1.4 添加环境变量1.5 下载安装QtCreator 3、配置linuxdeployqt环境1.1 在线安装依赖1.2 使用linuxdeployqt提供的程序1.3 编译安装linuxdeployqt 4、使用linuxdeployqt打包依赖1.1 linuxdeployqt使用选…...
Python3：pytest+request+yaml+allure接口自动化测试
pytest+request+yaml+allure接口自动化测试 一、Pytest的parametrize结合yaml实现数据驱动 1、读取yaml文件数据 ids:- [请求方式,请求地址,请求头,请求参数,预期结果]#测试用例测试数据 testcases:test_login:- ["POST","http://10.1.1.xx:8081/xx/xx"…...
【Docker】针对开发环境、测试环境、生产环境如何编排？
目录 一、引言 二、Docker Compose 文件基础 三、针对不同环境的 Docker 编排 开发环境 测试环境 生产环境 四、配置文件全局变量的编写 五、总结 一、引言 在软件开发和部署的过程中，不同的环境有着不同的需求和配置。Docker 作为一种强大的容器化技术&…...
数据采集卡的各参数介绍
数据采集卡（DAQ 卡）是用于测量物理信号（如电压、电流、温度等）并将其转化为数字信号的设备。 1. 通道数（Channels） 含义：数据采集卡可以同时采集多少路信号。比喻：通道数就像一个人…...
MySQL备份恢复
华子目录 MySQL日志管理为什么需要日志日志作用日志文件查看方法错误日志通用查询日志慢查询日志示例 撤销日志重做日志二进制日志---重要中继日志 MySQL备份备份类型逻辑备份优缺点备份内容备份工具导入sql文件 MySQL日志管理 为什么需要日志 用于排错用来做数据分析了解程序…...
flask内存马的真谛！！！
flask内存马 1.概念 常用的Python框架有Django、Flask, 这两者都可能存在SSTI漏洞. Python 内存马利用Flask框架中SSTI注入来实现, Flask框架中在web应用模板渲染的过程中用到render_template_string进行渲染, 但未对用户传输的代码进行过滤导致用户可以通过注入恶意代码来实…...
【机器学习02--模型评估】
机器学习 --- 模型评估 你需要得到更好的模型，怎么判断模型更好呢？你需要先得到训练集和测试集，怎么划分它们呢？训练完模型之后，在验证集上测试的时候，用什么指标衡量好坏呢？云里雾里࿰…...
【人工智能】深入解析Python中的聚类算法：从K-Means到DBSCAN
解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 聚类是一种无监督学习的核心技术，用于将数据点分组到不同的簇中，使得同一簇内的点相似度最大化，不同簇间的点差异性最大化。K-Means和DBSCAN是两种最常见的聚类算法，分别适用于密度驱动和形状复杂的数据分组需…...
【STM32 Modbus编程】-作为主设备读取线圈和输入
作为主设备读取线圈和输入 文章目录 作为主设备读取线圈和输入1、硬件准备与连接1.1 RS452模块介绍1.2 硬件配置与接线1.3 软件准备2、读取线圈2.1 主设备发送请求2.2 从设备响应请求2.3 主机接收数据3、读取输入4、结果本文将在前面文章的基础上，实现主设备通过ModBus协议对从…...
数据结构（栈Stack）
1.前言： 在计算机科学中，栈（Stack）是一种基础而存在的数据结构，它的核心特性是后进先出（LIFO，Last In, First Out）。想象一下，在现实生活中我们如何处理一堆托盘——我们…...
Maven 中scope 的provided、compile、runtime、test、system 含义
在 Maven 中，<scope> 定义了依赖的可见性和生命周期。不同的 scope 值指示 Maven 在编译、测试和运行时如何处理这些依赖。以下是 Maven 中的几种常用依赖范围及其详细说明： 1. <scope>provided</scope> 含义：provided 范…...
Nginx 负载均衡和反向代理
Nginx 是一个高性能的 HTTP 服务器和反向代理服务器，广泛应用于负载均衡中。它的负载均衡功能支持多种策略，可以有效分配流量到后端服务器，提升系统的可靠性和可用性。 负载均衡 首先，Nginx 负载均衡配置是通过在 Nginx 配置文件…...
【网络安全】数据集合集！
本文将为您介绍经典、热门的数据集，希望对您在选择适合的数据集时有所帮助。 1 SecGPT 更新时间：2024-05-08 访问地址: GitHub 描述： SecGPT的愿景是将人工智能技术引入网络安全领域，以提高网络防御的效率和效果。其使命是推动…...
大数据（一）MaxCompute
一、引言 作者后面会使用MaxCompute，所以在进行学习研究，总会有一些疑问产生，这里讲讲作者的疑问和思路 二、介绍 MaxCompute（原名 ODPS - Open Data Processing Service）是阿里云提供的大数据处理平台，专…...
数据科学与大数据之间的区别
什么是数据科学？ 数据科学是一个跨学科领域，它将统计学和计算方法相结合，旨在从数据中提取见解和知识。它涉及收集、处理、分析以及解读数据，以揭示可用于为决策过程提供依据并推动创新的模式、趋势和关系。 数据科学涵盖了广泛…...
IP 地理位置定位技术原理概述
本文深入探讨 IP 地理位置定位技术的原理。介绍了 IP 地址的基本概念及其在网络中的作用，随后阐述了基于数据库查询、基于网络拓扑分析以及基于机器学习算法的三种主要 IP 地理位置定位技术原理中的基于IP数据库查询。 IP 地址基础 IP 地址是互联网协议࿰…...
多进程multiprocessing通信multiprocessing.Queue
multiprocessing.Queue 通常只能在主模块（即 if __name__ "__main__": 块）中创建和使用。这是因为 multiprocessing 模块在 Windows 系统上需要通过 if __name__ "__main__": 块来避免递归导入问题。 from multiprocessing import…...
工业—使用Flink处理Kafka中的数据_ChangeRecord2
使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据，每隔 1 分钟输出最近 3 分钟的预警次数最多的 设备，将结果存入Redis 中， key 值为...
微信小程序4-内容溢出滚动条
感谢阅读，初学小白，有错指正。 一、功能描述 在前一篇文章的隐藏框页面的功能里（《微信小程序3-显标记信息和弹框》），我想添加一个内容溢出的时候，可通过滑动滚动条，实现查看溢出部分的内容&a…...
)
python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250+个项目、26.6GB)
文章目录 源代码下载地址项目介绍预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250个项目、26.6GB) 预览 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情…...
ProjectSend 身份认证绕过漏洞复现（CVE-2024-11680）
0x01 产品描述： ProjectSend 是一个开源文件共享网络应用程序，旨在促进服务器管理员和客户端之间的安全、私密文件传输。它是一款相当流行的应用程序，被更喜欢自托管解决方案而不是 Google Drive 和 Dropbox 等第三方服务的组织使用。0x02 漏洞描述： ProjectSend r1720 之前…...
算法训练-搜索
搜索 leetcode102. 二叉树的层序遍历 法一：广度优先遍历 leetcode103. 二叉树的锯齿形层序遍历 法一：双端队列 法二：倒序 法三：奇偶逻辑分离 leetcode236. 二叉树的最近公共祖先 法一：递归 leetcode230. 二叉…...
【C++】map和set
个人主页 ： zxctscl 如有转载请先通知 文章目录 1. 关联式容器2. 键值对3. set3.1 set的模板参数列表3.2 set的构造3.3 set的迭代器3.4 set的容量3.5 set修改操作3.6 multiset 4. map4.1 map的模板参数说明4.2 map的构造4.3 map的迭代器4.4 map的容量与元素访问4.5 …...
MongoDB安装|注意事项
《疯狂Spring Boot讲义》是2021年电子工业出版社出版的图书，作者是李刚 《疯狂Spring Boot终极讲义》不是一本介绍类似于PathVariable、MatrixVariable、RequestBody、ResponseBody这些基础注解的图书，它是真正讲解Spring Boot的图书。Spring Boot的核心…...
使用playwright自动化测试时，npx playwright test --ui打开图形化界面时报错
使用playwright自动化测试时，npx playwright test --ui打开图形化界面时报错 1、错误描述：2、解决办法3、注意符号的转义 1、错误描述： 在运行playwright的自动化测试项目时，使用npm run test无头模式运行正常，但使用…...
Linux ufw 命令详解
简介 UFW(Uncomplicated Firewall) 简单防火墙是一款基于 iptables 构建的、用于管理防火墙规则的用户友好型工具。它简化了在 Linux 系统上配置防火墙的过程。 安装 在 Ubuntu/Debian 上安装 sudo apt update sudo apt install ufw在 CentOS/Red Hat 上安装 sudo yum ins…...
3248. 矩阵中的蛇
3248. 矩阵中的蛇 题目链接：3248. 矩阵中的蛇 代码如下： class Solution { public:int finalPositionOfSnake(int n, vector<string>& commands){int i 0, j 0;for (string& command : commands){if (command "LEFT") { j…...
图片的懒加载
目录 懒加载的来源 事件监听 IntersectionObserver 懒加载的来源 图片的来加载其实就是延迟加载，我们知道浏览器的可视范围是有限的，现在网页的内容越来越丰富，一般网页的内容都是需要滚动才能完成浏览 如果网页有很多图片，然…...
网络脚本生成器
网络官网地址 网络配置生成工具 终端-接入-汇聚-核心-防火墙-互联网路由器 一 开局配置 华为设备配置命令 system-viewsysname SW-JR-Switchvlan 10 vlan 20 vlan 30 vlan 40 quitinterface Vlan-interface 40 ip address 192.168.40.1 255.255.255.0 quitip route-static 1…...
Kibana server is not ready yet
遇到“Kibana server is not ready yet”错误通常表示Kibana无法连接到Elasticsearch。以下是一些常见原因及其解决方案： 1.常见原因 1.1.Elasticsearch未运行： 确保Elasticsearch服务已启动并正常运行。您可以通过访问 http://localhost:9200 来检查…...
Git 高频命令及其功能、作用与使用场景
在软件开发的世界里，Git 已经成为了版本控制的代名词。无论你是开发小型项目还是参与大型团队协作，Git 都是你不可或缺的得力助手。今天我们来聊聊 Git 中的一些高频命令，了解它们的功能、作用以及常见的使用场景，帮助你在日常开发…...
将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式
文章目录 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式MathType安装问题MathType30天试用延期MathPage.wll文件找不到问题 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式 word自带公式编辑器编辑的公式格式： MathType编辑的格式&a…...