h5+JavaScript实现一个倒计时功能

简介: h5+JavaScript实现一个倒计时功能

h5+JavaScript实现一个倒计时功能

话不多说上代码!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
</head>
<body>
  <h1>倒计时功能</h1>
  <label for="time-input">倒计时时间:</label>
  <input type="number" id="time-input" min="1" required>
  <button id="start-button">开始倒计时</button>
  <div id="countdown-display"></div>
  <script>
    // 获取页面元素
    var timeInput = document.getElementById("time-input");
    var startButton = document.getElementById("start-button");
    var countdownDisplay = document.getElementById("countdown-display");
    // 定义变量
    var countdownInterval;
    var timeRemaining;
    // 绑定按钮点击事件
    startButton.addEventListener("click", function () {
      // 获取用户输入的时间
      var timeInSeconds = parseInt(timeInput.value);
      // 验证用户输入的时间
      if (isNaN(timeInSeconds) || timeInSeconds < 1) {
        alert("Please enter a valid time in seconds.");
        return;
      }
      // 启动倒计时
      startCountdown(timeInSeconds);
    });
    // 启动倒计时
    function startCountdown(timeInSeconds) {
      // 计算倒计时结束时间
      var endTime = Date.now() + timeInSeconds * 1000;
      // 更新倒计时显示
      updateCountdownDisplay(endTime);
      // 每秒更新倒计时显示
      countdownInterval = setInterval(function () {
        updateCountdownDisplay(endTime);
      }, 1000);
    }
    // 更新倒计时显示
    function updateCountdownDisplay(endTime) {
      // 计算剩余时间
      timeRemaining = Math.floor((endTime - Date.now()) / 1000);
      // 倒计时结束
      if (timeRemaining <= 0) {
        clearInterval(countdownInterval);
        countdownDisplay.innerHTML = "倒计时结束!";
        return;
      }
      // 更新倒计时显示
      countdownDisplay.innerHTML = "剩余: " + timeRemaining + " 秒";
    }
  </script>
</body>
</html>

在上面的代码中,我们首先获取页面上的元素,并定义了一些变量用于处理倒计时逻辑。

然后,我们绑定了按钮的点击事件,并在点击按钮时获取用户输入的时间。如果用户输入无效,我们会弹出一个警告。

接下来,我们定义了startCountdown 函数,它将启动倒计时并更新倒计时显示。我们使用 setInterval函数每秒钟更新一次倒计时显示,直到倒计时结束。

最后,我们定义了 updateCountdownDisplay函数,它计算剩余时间并更新倒计时显示。如果倒计时结束,我们清除定时器并显示倒计时完成的提示。

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
11天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
20 2
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
28天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
18 1
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
1月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
27 1
|
1月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
24 0
|
3月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)