Javascript倒计时代码

JavaScript 倒计时能够给网站或者应用程序带来极佳的用户体验,它通常用于页面的时间限制、登录等场景。下面是 JavaScript 倒计时的完整攻略。

步骤1:创建 HTML 页面

首先,我们需要在 HTML 页面中添加一个画布元素 canvas 以及 JavaScript 倒计时所需要的 HTML 元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
</body>
</html>

这个 HTML 页面中包含了一个画布元素和一个用于放置倒计时的 div 元素。

步骤2:创建 JavaScript 文件

接下来,我们需要创建一个 JavaScript 文件,用于处理倒计时相关的逻辑。

function createCountDown(endtime, elementId) {
  var countdown = document.getElementById(elementId);
  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);
    var minutes = t.minutes;
    var seconds = t.seconds;
    countdown.innerHTML = '倒计时剩余时间:' + minutes + ' 分钟 ' + seconds + ' 秒';
    if (t.total <= 0) {
      clearInterval(timeinterval);
      countdown.innerHTML = '倒计时结束';
    }
  }, 1000);
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  return {
    'total': t,
    'minutes': minutes,
    'seconds': seconds
  };
}

createCountDown('2022-01-01T00:00:00', 'countdown');

这个 JavaScript 文件包含了两个主要的函数:createCountDowngetTimeRemaining

getTimeRemaining 函数用于计算剩余的时间,接受一个参数 endtime 表示倒计时结束时间,返回一个包含剩余时间 total、分钟数 minutes 和秒数 seconds 的对象。

createCountDown 函数用于创建倒计时,它接收两个参数 endtime 和 elementId,分别表示倒计时结束时间和用于显示倒计时的元素 ID。函数内部先获取到需要显示倒计时的元素,然后通过 setInterval 函数每隔一秒钟获取一次剩余时间,然后把剩余时间显示到页面上。

步骤3:添加画布动画

最后,为了增强页面的交互性,我们可以添加一个画布动画,让数字的变化更加平滑和生动。

function createCountDown(endtime, elementId, canvasId) {
  var countdown = document.getElementById(elementId);
  var canvas = document.getElementById(canvasId);
  var context = canvas.getContext('2d');
  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);
    var minutes = t.minutes;
    var seconds = t.seconds;
    countdown.innerHTML = '倒计时剩余时间:' + minutes + ' 分钟 ' + seconds + ' 秒';
    drawCanvas(context, canvas, minutes, seconds);
    if (t.total <= 0) {
      clearInterval(timeinterval);
      countdown.innerHTML = '倒计时结束';
    }
  }, 1000);
}

function drawCanvas(context, canvas, minutes, seconds) {
  var radius = canvas.height / 2;
  context.beginPath();
  context.arc(radius, radius, radius - 5, 0, 2 * Math.PI);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#345';
  context.stroke();
  context.font = '24px Arial';
  context.fillStyle = '#345';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText(formatTime(minutes) + ':' + formatTime(seconds), radius, radius);
}

function formatTime(time) {
  return time < 10 ? '0' + time : time;
}

createCountDown('2022-01-01T00:00:00', 'countdown', 'myCanvas');

这个修改后的 JavaScript 文件把倒计时显示到了画布上,并且添加了一些动画效果。其中,drawCanvas 函数用于绘制画布内容,包括外边界、倒计时数字和时间文本。formatTime 函数用于格式化时间,将不足两位数的时间补齐。在 createCountDown 函数中,我们加入了画布元素的获取、绘制和清空操作。

示例1:倒计时1分钟

接下来,我们演示一个倒计时1分钟的例子。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时示例1</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
  <script>
    createCountDown(new Date(Date.now() + 60 * 1000), 'countdown', 'myCanvas');
  </script>
</body>
</html>

这个 HTML 页面中的 JavaScript 代码用于创建一个倒计时1分钟的计时器。我们通过传入一个 Date 实例来指定倒计时结束时间。

示例2:倒计时10秒

现在,我们演示一个倒计时10秒的例子,但这一次我们只在 DIV 元素中显示倒计时,不需要画布元素的动画效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时示例2</title>
</head>
<body>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
  <script>
    createCountDown(new Date(Date.now() + 10 * 1000), 'countdown');
  </script>
</body>
</html>

这个 HTML 页面中的 JavaScript 代码用于创建一个倒计时10秒的计时器,只需传入倒计时结束时间和 DIV 元素的 ID。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript倒计时代码 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 国外的为初学者写的JavaScript教程

    下面我将为您详细讲解如何学习“国外的为初学者写的JavaScript教程”。 一、寻找合适的教程网站 在寻找JavaScript教程网站时,您可以通过搜索引擎来寻找。以下是几个优秀的JavaScript教程网站,推荐大家参考: MDN Web 文档:MDN Web 文档是一个权威的Web技术文档网站。该网站的JavaScript教程适合初学者学习,并有逐步深…

    JavaScript 2023年6月10日
    00
  • 动态加载js的方法汇总

    题目:动态加载js的方法汇总 什么是动态加载js 动态加载js,顾名思义,就是在页面加载后动态创建<script>标签,然后把这些标签插入到<head>或<body>标签中,最终实现页面js模块的异步加载。 为什么要动态加载js 传统静态加载方式会阻塞页面请求,影响用户体验,特别是对于需要加载较大模块时,会造成更长的等待时…

    JavaScript 2023年5月27日
    00
  • getElementByID、createElement、appendChild几个DHTML元素第2/2页

    针对这几个DHTML元素,我们一个一个来详细讲解。 getElementByID getElementByID 方法是用于通过 id 属性获取 HTML 元素的方法。它返回一个代表指定元素的对象。使用该方法时,需要在 HTML 元素上指定一个唯一的 id 属性,例如: <div id="example"></div&gt…

    JavaScript 2023年6月10日
    00
  • 自制的文件上传JS控件可支持IE、chrome、firefox etc

    实现自制的文件上传JS控件,需要分为以下几个步骤: 第一步:定义HTML结构 首先,我们需要定义HTML结构,提供上传文件的按钮,显示上传进度的进度条以及文件选择框的位置。 <div id="upload-box"> <input type="file" name="file" i…

    JavaScript 2023年5月27日
    00
  • 最新热门脚本Autojs源码分享

    最新热门脚本Autojs源码分享攻略 Autojs是一款Android平台下的JavaScript自动化工具,可以实现自动点击、滑动、输入等操作。同时也是一个优秀的脚本引擎,支持JavaScript语法和ES6规范。在Autojs社区中,可以找到各种各样的脚本,涵盖了各种应用场景。这篇攻略将详细讲解如何获取、使用Autojs脚本以及如何调试脚本。 步骤一:获…

    JavaScript 2023年6月10日
    00
  • 可视化埋点平台元素曝光采集intersectionObserver思路实践

    下面是“可视化埋点平台元素曝光采集intersectionObserver思路实践”的完整攻略: 1. 背景介绍 在网站开发中,我们需要对用户行为进行数据采集和分析,从而改善用户体验并优化网站内容。埋点采集是一种常见的数据采集方式,其主要通过在网站代码中插入特定的埋点代码,捕获用户在网站中的各种操作行为。其中,元素的曝光采集是一个非常有意义的场景,可以记录某…

    JavaScript 2023年6月11日
    00
  • javascript之对系统的toFixed()方法的修正

    前言: 在 Javascript 中,toFixed() 方法可以将一个数字保留指定位数的小数。但是这个方法存在一个问题,对于某些数字在小数部分保留时可能会出现精度错误。本文将介绍如何修正toFixed()方法在某些情况下出现的精度错误。 修正toFixed()方法的代码: 我们将修正后的代码命名为toFixedNew()方法。toFixedNew()方法可…

    JavaScript 2023年6月10日
    00
  • 第一次接触神奇的Bootstrap表单

    关于“第一次接触神奇的Bootstrap表单”的攻略,建议按照以下步骤来进行: 一、了解Bootstrap表单 Bootstrap表单是基于Bootstrap框架开发的,具备响应式设计、易于定制和丰富的细节特性。它可以让开发者快速创建美观的表单,同时避免了很多面对纯HTML/CSS时需要自己编写大量css代码的苦恼。 二、引入Bootstrap表单 引入Bo…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部