Web Front-endFront-end Q&AHow to create a beautiful countdown effect with the front-end Three Musketeers
In the previous article "Use CSS to quickly create an advanced blurry background image", I introduced you how to use CSS to quickly create an advanced blurry background image. The effect is very cool. Interested friends can learn about it~
The focus of this article is to introduce to you how to achieve a very beautiful and practical countdown effect through the front-end three swordsmen (HTML, css, javascript).
If you need a countdown page, don’t miss this article~
Let’s go directly to the complete code:
The code to achieve the countdown effect is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('003.jpg');
height: 100%;
width:100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.topleft {
background-image: url('logo.png');
position: absolute;
width:100%;
height:100%;
background-repeat: no-repeat;
top: 2px;
left: 16px;
}
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
</head>
<body>
<div class="bgimg">
<div class="topleft">
<div id="color-overlay"></div>
</div>
<div class="middle">
<h1 id="距离-年春节还有">距离2022年春节还有：</h1>
<hr>
<p id="demo" style="font-size:30px"></p>
</div>
<div class="bottomleft">
<p>www.php.cn</p>
</div>
</div>
<script>
// 设定我们倒计时的日期
var countDownDate = new Date("2022,2,1").getTime();
// 每1秒更新一次计数
var countdownfunction = setInterval(function() {
// 获取今天的日期和时间
var now = new Date().getTime();
// 找出现在与倒数日期之间的差
var distance = countDownDate - now;
// 时间计算为天，小时，分和秒
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);
// 在id="demo"的元素中输出结果
document.getElementById("demo").innerHTML = days + "天" + hours + "时"
+ minutes + "分" + seconds + "秒";
// 如果倒计时结束了，写一些文字
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>Run this file, the effect is as follows:
(The background image comes from the Internet, sorry for the infringement)
I want to To achieve the countdown effect, this function is mainly implemented through javascript. The style is of course set through html/css. For the specific code explanation, I have noted the meaning of each step through comments in the above code. I believe everyone can understand it at a glance~
You can also directly copy the above code and test it locally. The background image or text content can be easily replaced. If you want to achieve a different countdown effect, then you can expand it based on the content of this article! Learning and mastering implementation ideas is the most important thing!
Finally, if you have any questions, please leave a comment!
PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css video tutorial" and "javascript basic tutorial"!
The above is the detailed content of How to create a beautiful countdown effect with the front-end Three Musketeers. For more information, please follow other related articles on the PHP Chinese website!
如何通过C++编写一个简单的倒计时程序？Nov 03, 2023 pm 01:39 PMC++是一种广泛使用的编程语言，在编写倒计时程序方面非常方便和实用。倒计时程序是一种常见的应用，它能为我们提供非常精确的时间计算和倒计时功能。本文将介绍如何使用C++编写一个简单的倒计时程序。实现倒计时程序的关键就是使用计时器来计算时间的流逝。在C++中，我们可以使用time.h头文件中的函数来实现计时器的功能。下面是一个简单的倒计时程序的代码
如何使用Vue实现按钮倒计时特效Sep 21, 2023 pm 02:03 PM如何使用Vue实现按钮倒计时特效随着Web应用程序的日益普及，我们经常需要在用户与页面进行交互时使用一些动态效果来提升用户体验。其中，按钮的倒计时特效是非常常见且实用的一种效果。本文将介绍如何使用Vue框架来实现按钮倒计时特效，并给出具体的代码示例。首先，我们需要创建一个Vue组件，包含一个按钮和倒计时的功能。在Vue中，组件是一种可复用的Vue实例，视图会
win10开机10秒倒计时怎么取消? Win10取消开机倒计时的三种方法Feb 29, 2024 pm 07:25 PM在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行一些其它的操作。虽然开机倒数为我们的系统带来了些许便利，但在一些情况下也可能带来麻烦。想取消显示，但是不知道怎么操作，这篇文章是本站给大家带来的Win10开机几秒倒计时取消方法。了解win10开机倒数在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行
如何使用CSS制作倒计时效果的实现步骤Oct 26, 2023 am 10:36 AM如何使用CSS制作倒计时效果的实现步骤倒计时效果是网页开发中常见的一个功能，可以为用户呈现倒计时的动态效果，给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果，并给出详细的实现步骤和代码示例。实现步骤如下：步骤一：HTML结构搭建首先，在HTML中创建一个div容器，用于包裹倒计时的内容。例如：<divclass="countd
基于JavaScript开发网页倒计时应用Aug 08, 2023 am 09:55 AM基于JavaScript开发网页倒计时应用随着互联网的发展，网页应用在我们的生活中扮演着越来越重要的角色。其中，倒计时应用是一种常见的功能，在各种场合都有广泛的应用。本文将介绍如何使用JavaScript开发一个简单的网页倒计时应用，并附上相应的代码示例。一、创建HTML结构首先，我们需要创建一个HTML文件，用于构建网页倒计时应用的基本结构。在文档的<
uniapp实现如何使用定时器实现页面倒计时效果Oct 18, 2023 am 11:18 AMUniapp是一个跨平台的开发框架，可以使用它来开发多种类型的应用程序，包括小程序、H5、安卓、iOS等。在Uniapp中，页面倒计时效果可以使用定时器来实现。定时器可以设置一个时间间隔，在每个时间间隔内执行指定的代码，从而实现页面倒计时的效果。下面是一个示例，演示如何使用定时器实现页面倒计时效果。首先，在需要显示倒计时的页面中的.vue文件中添加以下代码：
如何使用Vue实现验证码倒计时特效Sep 19, 2023 am 11:36 AM如何使用Vue实现验证码倒计时特效随着互联网的发展，验证码已经成为了保护用户安全的重要手段之一。为了提高用户体验，我们可以使用倒计时特效来提示用户获取验证码的剩余时间。本文将介绍如何使用Vue来实现验证码倒计时的特效，并提供具体的代码示例。首先，我们需要创建一个Vue组件来实现验证码倒计时功能。在该组件中，我们可以定义一个倒计时的时间变量，用于存储剩余的秒数
如何在uniapp中实现倒计时和闹钟功能Oct 20, 2023 pm 06:36 PM如何在uniapp中实现倒计时和闹钟功能一、倒计时功能的实现：倒计时功能在实际开发中非常常见，可以用于实现各种倒计时功能，如验证码倒计时、秒杀倒计时等。下面通过uniapp框架来介绍如何实现倒计时功能。在uniapp项目中创建一个倒计时组件，可以命名为Countdown.vue。在Countdown.vue中，我们可以定义一个倒计时的变量和一个计时器的标志位
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SublimeText3 Linux new version
SublimeText3 Linux latest version
SublimeText3 English version
Recommended: Win version, supports code prompts!
