首页 > 编程语言 >使用 JavaScript 创建一个兔年春节倒数计时器

使用 JavaScript 创建一个兔年春节倒数计时器

时间:2023-01-08 10:34:32浏览次数:74  
标签:clock color 兔年 JavaScript 60 计时器 font


我们可以通过多种方式构建 JavaScript 倒数计时,我在本教程中展示的这个​​兔年春节倒数计时器​​ 是由 HTML CSS 和 JavaScript 创建的。


它的工作方式非常简单,需要两种类型的时间。我们要运行倒计时的当前时间和特定时间,必须手动添加计时器倒计时,JavaScript 的new Date()用于捕获当前时间。new Date ()是一种 JavaScript 方法,从设备获取当前时间。

如何在 JavaScript 中构建倒数计时器

早些时候我分享了各种简单的倒数计时器的设计。但是,如果你想制作高级倒数计时器,那么此设计适合你。

下面我分享了一个关于如何使用 JavaScript 创建一个​​兔年春节倒数计时器​​的分步教程。

首先 HTML 添加所有信息。然后我使用 CSS 设计了这个倒数计时器。最后,我使用 JavaScript 使 javascript 计数器计时器有效。

第1步:创建倒计时输入框

使用下面的 HTML 和 CSS,我创建了一个输入日期的地方。这就是我使用输入法的原因。这里type="date"用于选择和输入日期。

<div class=”clock-input”>
<input type=”date” name=”time-to” class=”time-to” id=”time-to” value=”” onchange=”calcTime(this.value)”>
</div>
html {
font-size: 62.5%;
font-family: “Montserrat”, sans-serif;
font-weight: 300;
line-height: 1rem;
letter-spacing: 0.08rem;
}

body {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
font-size: 1.4rem;
font-weight: inherit;
background: url("https://haiyong.site/img/bizhi/2301061.png" );
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}

.clock-input {
clear: both;
text-align: center;
max-width: 250px;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #fff;
margin: 0 auto 90px;
}

input#time-to {
padding: 5px;
border: 0;
border-radius: 3px;
font-size: 23px;
font-family: sans-serif;
text-align: center;
color: #066dcd;
background-color: #fff;
}

使用 JavaScript 创建一个兔年春节倒数计时器_前端

第2步:倒数计时器的基本结构

我使用以下 HTML添加了此javascript 倒计时的所有信息。 这里基本上做了4个盒子。一天中的时间、小时、分钟和秒将分别显示在这些框中。

<div class="container">
<div class="clock-column">
<p class="clock-day clock-timer"></p>
<p class="clock-label">日</p>
</div>

<div class="clock-column">
<p class="clock-hours clock-timer"></p>
<p class="clock-label">时</p>
</div>

<div class="clock-column">
<p class="clock-minutes clock-timer"></p>
<p class="clock-label">分</p>
</div>

<div class="clock-column">
<p class="clock-seconds clock-timer"></p>
<p class="clock-label">秒</p>
</div>
</div>

第 3 步:使用 CSS 设计 JavaScript 定时器

1.设计时间视图框

我使用下面的 CSS 设计了这些盒子。这里使用的框是min-height: 160px,min-width: 160px和 background-color: #fff。

.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 20rem;
width: 60rem;
background-color: transparent;
border-radius: 3px;
box-shadow: none;
}

.clock-column {
margin-right: 7rem;
text-align: center;
position: relative;
background-color: #fff;
min-height: 160px;
min-width: 160px;
border-radius: 5px;
}

使用 JavaScript 创建一个兔年春节倒数计时器_CSS_02

2.在两个方框之间加一个冒号

现在,在两个框之间分别添加了一个冒号。这个冒号是使用 CSS 的“:: after”添加的。我还使用了font-size: 75px来增加符号的大小。

.clock-column::after {
content: ":";
display: block;
height: 0.25rem;
width: 0.25rem;
font-size: 75px;
font-weight: 200;
color: #feffff;
position: absolute;
top: 60px;
right: -25px;
}
.clock-column:last-child::after {
display: none;
}

使用 JavaScript 创建一个兔年春节倒数计时器_开发语言_03

3.设计倒计时信息

现在我们需要使用以下 CSS 来设计框中的倒数计时器信息。这里只能看到文字,看不到时间相关的信息,后面使用JavaScript查看倒计时时间。

.clock-label {
padding-top: 20px;
text-transform: uppercase;
color: #131313;
font-size: 16px;
text-align: center;
border-top: 2px solid rgba(6, 121, 215, 0.989);
}

.clock-timer {
color: #131313;
font-size: 46px;
line-height: 1;
}

使用 JavaScript 创建一个兔年春节倒数计时器_CSS_04

第四步:简单倒数计时器的JavaScript

我已经在上面添加了我所有的基本信息来制作这个javascript 倒计时,但尚未实施。

正如我之前所说,当前时间将首先使用此处的new Date()从你的设备获取。然后将从当前时间中减去你输入的时间值。

然后,该时间将以天、小时、分钟和秒的形式表示。最后,使用innerHTML,它们显示在网页上。然后用setInterval每秒更新一次这个时间。

加载事件监听器

loadEventListeners();

function loadEventListeners() {
// DOMContentLoaded事件在初始 HTML 文档已完全加载时触发
document.addEventListener('DOMContentLoaded', function() { calcTime(); });
};

var timeTo = document.getElementById('time-to').value,
date,
now = new Date(),
newYear = new Date('1.1.2023').getTime(),
startTimer = '';

天、小时、分钟和秒的时间计算

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
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);

select元素

document.querySelector('.clock-day').innerHTML = days;
document.querySelector('.clock-hours').innerHTML = hours;
document.querySelector('.clock-minutes').innerHTML = minutes;
document.querySelector('.clock-seconds').innerHTML = seconds;

使用 JavaScript 创建一个兔年春节倒数计时器_CSS_05


⭐️ 好书推荐

《Power BI数据分析与可视化实战》

使用 JavaScript 创建一个兔年春节倒数计时器_前端_06

【内容简介】

数据清洗、数据建模、数据可视化设计与高级技法,本书全面展示Power BI的神奇之处,分分钟创建高级报表,Excel Home全新讲授Power BI多项绝秘应用和高级玩法,全面揭秘商业智能数据可视化内幕,不需要任何代码,教你分分钟创建动态数据报表,配套海量视频教程和案例练习文件等学习资源。




标签:clock,color,兔年,JavaScript,60,计时器,font
From: https://blog.51cto.com/haiyongblog/5996524

相关文章

  • JavaScript-DOM-节点操作
    JavaScript-DOM-节点操作目录JavaScript-DOM-节点操作5.节点操作5.1为什么学节点操作5.2节点概述5.3节点层级6.工作中常见操作1.排他思想(算法)2.百度换肤效果3.表格隔......
  • JavaScript学习笔记—数组方法slice和splice
    (1)slice()方法定义:从已有的数组返回选定的元素语法:arrayObject.slice(start,end)start:必选。截取开始位置的索引,包含开始索引end:可选。截取结束位置的索引,不包含结......
  • 函数传参 Java JavaScript python 都是按值传递的
    实验代码如下:JavapythonJavaScript:......
  • 分享2023年最新的15种JavaScript 速记技巧 【终极秘籍】
    强大且广受欢迎的编程语言JavaScript具有庞大的内置函数库,可用于执行各种任务。 本文涵盖了每个开发人员都应该知道的15个JavaScript特性。无论您是新手还是经......
  • JavaScript学习笔记—数组的四个方法
    (1)push()方法可向数组的末尾添加一个或多个元素,并返回新的长度//创建一个数组vararr=["孙悟空","猪八戒","沙和尚"];arr.push("唐僧");arr.push("蜘蛛精","白骨......
  • JavaScript学习笔记—使用字面量创建数组
    语法:[]//元素为数字vararr=[1,2,3,6,10];//元素可以是任意数据类型vararr2=["hello",1,true,null,undefined];//也可以是对象varobj={name:"孙悟空......
  • JavaScript学习笔记—数组length属性
    length属性返回数组的长度(数组元素的个数)。语法:数组.length/**连续的数组,可以获取数组长度(元素个数)*非连续的数组,获取数组最大索引+1*/vararr=[1,4,10];arr......
  • JavaScript学习笔记—构造函数
    执行流程:1.立刻创建一个新的对象2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象3.逐行执行函数中的代码4.将新建的对象作为返回值返回通......
  • JavaScript学习笔记—原型对象prototype
      创建的每个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象就是我们所谓的原型对象。  函数作为普通函数调用prototype没有任何作用  当函......
  • JavaScript学习笔记—声明
    (1)变量声明提前使用var关键字声明的变量,会在所有代码执行前被声明(但不会赋值)console.log("a="+a);//a已声明,但是值是undefinedvara=123;如果声明变量时不使用v......