Web Front-end
Front-end Q&A
How to create a beautiful countdown effect with the front-end Three Musketeers
How 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!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1318
25
1268
29
1248
24
How to write a simple countdown program in C++?
Nov 03, 2023 pm 01:39 PM
C++ is a widely used programming language that is very convenient and practical in writing countdown programs. Countdown program is a common application that can provide us with very precise time calculation and countdown functions. This article will introduce how to use C++ to write a simple countdown program. The key to implementing a countdown program is to use a timer to calculate the passage of time. In C++, we can use the functions in the time.h header file to implement the timer function. The following is the code for a simple countdown program
How to use Vue to implement button countdown effects
Sep 21, 2023 pm 02:03 PM
How to use Vue to implement button countdown effects With the increasing popularity of web applications, we often need to use some dynamic effects to improve user experience when users interact with the page. Among them, the countdown effect of the button is a very common and practical effect. This article will introduce how to use the Vue framework to implement button countdown effects and give specific code examples. First, we need to create a Vue component that contains a button and countdown function. In Vue, a component is a reusable Vue instance, and a view will
How to cancel the 10-second countdown on booting up Win10? Three ways to cancel the countdown on booting up Win10
Feb 29, 2024 pm 07:25 PM
In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or perform some other operations. Although the boot countdown brings some convenience to our system, it may also cause trouble in some cases. I want to cancel the display, but I don’t know how to do it. This article brings you how to cancel the countdown of several seconds after booting up Win10. Understand the win10 boot countdown. In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or proceed
How to use CSS to create a countdown effect
Oct 26, 2023 am 10:36 AM
How to use CSS to create a countdown effect. The countdown effect is a common function in web development. It can provide users with a dynamic effect of countdown and give people a sense of urgency and expectation. This article will introduce how to use CSS to achieve the countdown effect, and give detailed implementation steps and code examples. The implementation steps are as follows: Step 1: HTML structure construction First, create a div container in HTML to wrap the countdown content. For example: <divclass="countd
Developing a web countdown application based on JavaScript
Aug 08, 2023 am 09:55 AM
Developing web countdown applications based on JavaScript With the development of the Internet, web applications play an increasingly important role in our lives. Among them, countdown application is a common function and is widely used in various occasions. This article will introduce how to use JavaScript to develop a simple web countdown application, and attach corresponding code examples. 1. Create the HTML structure First, we need to create an HTML file to build the basic structure of the web countdown application. < in document
How to use timer to achieve page countdown effect in uniapp
Oct 18, 2023 am 11:18 AM
Uniapp is a cross-platform development framework that can be used to develop various types of applications, including applets, H5, Android, iOS, etc. In Uniapp, the page countdown effect can be achieved using a timer. The timer can set a time interval and execute the specified code within each time interval to achieve the page countdown effect. Below is an example that demonstrates how to use a timer to achieve a page countdown effect. First, add the following code to the .vue file in the page where the countdown needs to be displayed:
How to use Vue to implement verification code countdown effects
Sep 19, 2023 am 11:36 AM
How to use Vue to implement verification code countdown effects. With the development of the Internet, verification codes have become one of the important means to protect user security. In order to improve user experience, we can use countdown effects to remind users of the remaining time to obtain the verification code. This article will introduce how to use Vue to implement the special effects of verification code countdown, and provide specific code examples. First, we need to create a Vue component to implement the verification code countdown function. In this component, we can define a countdown time variable to store the remaining seconds
How to use Vue to implement countdown function
Nov 07, 2023 pm 04:05 PM
How to use Vue to implement the countdown function In modern web development, implementing the countdown function is a very common requirement. Vue, as a popular JavaScript framework, provides a convenient way to implement this function. This article will introduce how to use Vue to implement the countdown function through specific code examples. First, we need to install Vue. Vue can be introduced through CDN or installed using npm. Here we choose to use CDN to import. <!DOCTYPEhtm
