mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面

系统管理员 2022-10-24 11:41 232阅读 0赞

2020-07-09更新

修复倒计时归零后出现负数的bug

自动切换至下一年日期

效果展示

![223f90991b5652d9f79d92938a0050da.png][]

前言

在B站上找视频学习的，勉强搞出来了，写下此篇文章作为笔记，也希望有更多感兴趣的人能够有所收获.

(萌新练习，大佬勿喷 (滑稽))

代码

HTML代码

index.html

Countdown to NCEE

## **Countdown to NCEE** 2021 ##

function getEndTime(myYear)\{

var myEndTime = new Date(''+myYear+'/06/07 00:00:00');

return myEndTime;

function countDown()\{

var mydate = new Date();

var year = '2021';

var EndTime = getEndTime(year);

var NowTime = new Date();

if( (EndTime.getTime() - NowTime.getTime() ) < 0)\{

year = mydate.getFullYear() + 1;

EndTime = getEndTime(year);

var t = EndTime.getTime() - NowTime.getTime();

var d=Math.floor(t/1000/60/60/24);

var h=Math.floor(t/1000/60/60%24);

var m=Math.floor(t/1000/60%60);

var s=Math.floor(t/1000%60);

document.getElementById('day').innerText = d;

document.getElementById('hour').innerText = h;

document.getElementById('minute').innerText = m;

document.getElementById('second').innerText = s;

setInterval(countDown,1000);

CSS代码

style.css

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

margin: 0;

padding: 0;

font-family: 'Poppins', sans-serif;

body

background: \#000 url(bg.jpg);

background-attachment: fixed;

background-blend-mode: hard-light;

.container\{

position: absolute;

top: 80px;

left: 100px;

right: 100px;

bottom: 80px;

background: url(bg.jpg);

background-attachment: fixed;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

box-shadow: 0 50px 50px rgba(0,0,0,0.5),

0 0 0 100px rgba(0,0,0,.1);

.container h2 \{

text-align: center;

font-size: 10em;

line-height: 0.7em;

color: \#333;

margin-top: -80px;

.container h2 span\{

display: block;

font-weight: 300;

letter-spacing: 6px;

font-size: 0.2em;

.countdown\{

display: flex;

margin-top: 50px;

.countdown div\{

position: relative;

width: 100px;

height: 100px;

line-height: 100px;

text-align: center;

background: \#333;

color: \#fff;

margin: 0 15px;

font-size: 3em;

font-weight: 500;

.countdown div:before\{

content: '';

position: absolute;

bottom: -30px;

left: 0;

width: 100%;

height: 35px;

background: \#ff0;

color: \#333;

font-size: 0.35em;

line-height: 35px;

font-weight: 300;

.container \#day:before\{

content: 'Days';

.container \#hour:before\{

content: 'Hours';

.container \#minute:before\{

content: 'Minutes';

.container \#second:before\{

content: 'Seconds';

项目演示

[223f90991b5652d9f79d92938a0050da.png]: /images/20221024/106c1193e7df4e3299c84e861c12615a.png

mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关一个倒计时gif

相关 javaScript实现高考倒计时

相关倒计时

相关 js -制作红绿灯倒计时

相关 mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面

相关 js 天数倒计时时间倒计时

相关一个页面多个倒计时 js

相关倒计时

相关 js制作简易倒计时

相关倒计时