单击开始按钮时的 JavaScript 倒计时器,显示小时、分钟和秒

2023-11-29

我想在单击按钮时创建小时、分钟和秒的倒计时器。这是我到目前为止的代码。

HTMLcode

<div class="colomn" style="margin-right: 20px">
   <button class="start" onclick="clock();">Start</button>
</div>

JavaScript 函数

<script>
 var myTimer;
 function clock() {
        myTimer = setInterval(myClock, 1000);
        var c = 5;

        function myClock() {
            document.getElementById("demo").innerHTML = --c;
               if (c == 0) {
                   clearInterval(myTimer);
        }
      }
    }
  </script>

这很简单,不显示单独的小时、分钟和秒。我如何应用它来计算小时、分钟和秒。请帮我。


工作代码:

<!DOCTYPE HTML>
<html>
<body>

<p id="demo"></p>
<button onclick="countdownTimeStart()">Start Timer</button>

<script>
// Set the date we're counting down to

function countdownTimeStart(){

var countDownDate = new Date("Sep 25, 2025 15:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
}
</script>

</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击开始按钮时的 JavaScript 倒计时器,显示小时、分钟和秒 的相关文章

  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 某些网站如何在 iOS Safari 中内嵌播放视频?

    非常令人难以置信 因为我认为所有视频都可以在常规野生动物园中扩展为全屏播放 例如检查一下 https entertainment theonion com the onion reviews rogue one 1819596116 htt
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 检查某个元素是否在没有 jQuery 的情况下“聚焦”

    我几乎确信我能在这里找到答案 但我没有成功 您如何检查事件调用时是否选择 聚焦 某个对象 我试过if document activeElement object HTMLBodyElement 但显然 activeElementonLoad
  • 如何使用Javascript获取ASP.NEt Web Forms标签的值?

    我有以下标签控件
  • Javascript 函数,我如何开始理解它们?

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等
  • 类型错误:require.config 不是一个函数

    我正在使用 require js 作为早午餐项目的一部分 这段代码抛出错误 require config require config is not a function paths jquery lib jquery underscore
  • 如何在jsp中使用javascript动态创建下拉框?

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam
  • 如何使CSS图像溢出其所在的div

    我在 css 中输入了一个图像 代码如下 imgtemp float right top 0px left 0px overflow visible width 100 我还在页面中添加了 div 标签 以便其显示 但由于设计原因 图像比
  • PHP:如何使用 nl2br() 和 HTML Purifier 保持换行?

    Issue 使用时HTML 净化器 http htmlpurifier org 为了处理用户输入的内容 换行符不会被转换为 br tags 考虑以下用户输入的内容 Lorem ipsum dolor sit amet This is ano
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • 单击保存文件

    我希望能够通过单击下载 csv 文件 而不是在浏览器中打开 我把这段代码 a href file csv download file a 但单击它会在浏览器中打开 v 文件 在本地主机中 当我单击链接时 它正在下载 但在服务器上时 它在浏览
  • 如何优化 Three.js 中多个 sphereGeometry 的渲染?

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n
  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节

随机推荐

  • 如何创建全局辅助函数?

    我想创建一些全局辅助函数 我知道我必须将它们放在 App Code 中的 cshtml 文件中 我创建了这个文件 helper CreatePostForm string action string controller string id
  • 使用请求登录有问题的站点

    我正在尝试使用 requests 模块在 python 中创建一个脚本来登录到此site 我正在使用我的凭据 但我找不到任何方法来这样做 因为我看不到与请求一起发送所需的参数 在 Chrome 开发工具中 username SIMMTH i
  • 如何使用Maven PDF插件从Surefire Report生成PDF?

    运行 JUnit 测试后 我使用 Maven Surefire Report 插件 http maven apache org plugins maven surefire report plugin 生成 HTML 测试报告 这会产生以下
  • Kubernetes 中的 TCP 入口支持

    似乎 TCP 和 UDP 支持将在下一版本的 ingress nginx 控制器中被弃用 还有其他入口控制器支持 TCP 和 UDP 吗 或任何其他在 kubernetes 之外公开非 http 端口的解决方案 kubernetes 初学者
  • 如何在 Excel 工作表中查找精确值

    如何在 Excel 工作表中找到字符串值 我在尝试objRange Find 但这也给了我错误的地址 例如 我想要 Object paint 的地址 但它也给出 Object paint and stk 的地址 我应该如何获得精确的值 Se
  • Spring boot war文件部署在Tomcat上

    我使用 Spring Boot 1 2 4 RELEASEGS 休息服务源文件 我有 127 0 0 1 18 Jun 2015 09 59 25 0300 GET gs rest service 0 1 0 HTTP 1 1 404 10
  • Mac OS X:_tkinter.TclError:没有显示名称,也没有 $DISPLAY 环境变量

    正如我所说 我已经从 Macports 安装了 Python 3 3 现在 当我重点搜索 空闲 时 Idle Python 3 3 出现 但是 当我尝试单击它时 什么也没有发生 没有显示任何错误或任何东西 它显然不会启动 您认为可能有什么问
  • 为什么要在数据库中创建视图?

    何时以及为何有人决定需要在数据库中创建视图 为什么不直接运行一个普通的存储过程或选择呢 视图提供了多种好处 1 视图可以隐藏复杂性 如果您的查询需要连接多个表 或者具有复杂的逻辑或计算 则可以将所有逻辑编码到视图中 然后像选择表一样从视图中
  • 移动当前可执行文件c#

    我想将当前正在执行的程序集移动到 C 驱动器 当我尝试以下代码时 File Move Assembly GetEntryAssembly Location c 它给了我一个错误 mscorlib dll 中发生 System Unautho
  • Java线程安全数据库连接

    我正在编写一个 servlet 它通过访问和修改数据库中的某些表来处理每个请求 我希望与数据库的连接是线程安全的 我不想为此使用现有的库 框架 spring hibernate 等 我知道我可以通过以下方式使用 java 的 ThreadL
  • 与 multiprocessing.Pool 共享计数器

    我想用multiprocessing Value multiprocessing Lock在不同的进程之间共享一个计数器 例如 import itertools as it import multiprocessing def func x
  • .NET MAUI绑定ListView的ItemSelected事件到ViewModel

    我正在尝试将 ListView 的 ItemSelected 绑定到视图模型 但遇到了一些问题 由于我自己对其工作原理的误解 我有观点
  • Python 和 Ctypes:将结构体作为指针传递给函数以获取数据

    我已经查看了其他答案 但似乎无法使其发挥作用 我正在尝试调用 DLL 中的函数来与 SMBus 设备进行通信 该函数接受一个指向结构的指针 该结构有一个数组作为其字段之一 所以 In C typedef struct SMB REQUEST
  • 托管 Bean 内的回滚事务

    我想不在 EJB 内回滚事务 而是在 JSF 托管 bean 内回滚事务 在EJB内部我们可以使用SessionContext setRollBackOnly 但我可以在托管 bean 中使用什么 Stateless Local Accou
  • List和ArrayList这句话是什么意思?

    我正在阅读 Drools Planner 示例 并且经常遇到这样的代码 List
  • 包含彼此了解的字段的结构

    我有一组需要相互了解才能合作的对象 这些对象存储在容器中 我试图对如何用 Rust 构建我的代码有一个非常简单的想法 让我们打个比方 AComputer包含 1 Mmu 1 Ram 1 Processor In Rust struct Co
  • 使用hadoop流解压文件

    我在 HDFS 中有很多文件 所有这些文件都是一个 zip 文件 其中包含一个 CSV 文件 我正在尝试解压缩这些文件 以便可以对它们运行流作业 I tried hadoop jar usr lib hadoop mapreduce had
  • Azure 发布管道,失败阶段后继续

    我有以下天蓝色发布管道 问题是 有时我需要离开左阶段才能失败 但同时 即使失败 右阶段仍然应该执行 这可能吗 我发现的唯一的事情是 即使所选阶段部分成功也会触发 但如果前一阶段失败 它就不起作用 有时我需要离开左阶段才能失败 但同时 即使失
  • 下载html源android?

    我正在尝试下载网站源代码并将其显示在文本框中 但我似乎收到错误并且无法弄清楚 s public void getHtml throws ClientProtocolException IOException HttpClient httpC
  • 单击开始按钮时的 JavaScript 倒计时器,显示小时、分钟和秒

    我想在单击按钮时创建小时 分钟和秒的倒计时器 这是我到目前为止的代码 HTMLcode div class colomn style margin right 20px div