2020-07-09更新

  • 修复倒计时归零后出现负数的bug
  • 自动切换至下一年日期

效果展示

前言

在B站上找视频学习的，勉强搞出来了，写下此篇文章作为笔记，也希望有更多感兴趣的人能够有所收获.
(萌新练习，大佬勿喷 (滑稽))

代码

HTML代码

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Countdown to NCEE</title>

        <link rel="stylesheet" href="css/style.css">

    </head>

    <body>

        <div class="container">

             <h2><span>Countdown to NCEE</span> 2021</h2>

             <div class="countdown">

                 <div id="day">NA</div>

                 <div id="hour">NA</div>

                 <div id="minute">NA</div>

                 <div id="second">NA</div>

             </div>

         </div>

    </body>

</html>

<script type="text/javascript">

    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);

</script>

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';

}

项目演示

项目演示地址：https://cairbin.gitee.io/nceecountdown/

HTML/CSS+JS制作一个高考倒计时页面的更多相关文章

  1. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  2. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  3. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  4. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  5. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  6. js实现一个砖头在页面拖拉效果

    用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html>   <head>       <meta ...

  7. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  8. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  9. #1使用html+css+js制作网站教程 准备

    #1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...

随机推荐

  1. ArcGIS修路问题（最优路径问题）

    1 前言 修路问题,辅助减少花费.用栅格进行路径分析. 2 问题阐述 根据题目要求,找出一条从学校通往某目的地的道路,实现以下操作: (1)坡度在30度以上的地形不适合修建道路,适合修路的坡度相等间隔 ...

  2. springcloud报错-------关于 hystrix 的异常 FallbackDefinitionException:fallback method wasn't found

    典型如下 第一种import java.util.List;@RestController@RequestMapping("/order")@DefaultProperties(d ...

  3. Oracle视图、存过、包、方法赋予/收回权限给用户

    oracle给某用户授权/回收视图查询 赋权: grant select on $_view to $_user; 这样 $_user用户就拥有了查询$_view视图的权限了 回收: revoke s ...

  4. Rsync反弹shell

    vulhub环境靶机 : 192.168.91.130 攻击机:kali 192.168.91.128 一.环境搭建 vulhub环境靶机环境搭建 ​ 在纯净ubuntu中部署vulhub环境: 1. ...

  5. [转载]从phpinfo中能获取哪些敏感信息

    phpinfo()想必的最熟悉的了,在搭建环境之后都会随后写一个 phpinfo()来测试环境是否正常,很多人测试完毕忘记删除就开始部署环境了,这就造成了一些敏感信息的泄漏.那么我们能从 phpinf ...

  6. 记录Markdown的学习

    目录 1. 引言 2. 标题 这是一级标题 这是二级标题 这是三级标题 这是四级标题 3. 文字相关 3.1 粗体 3.2 斜体 3.3 粗体和斜体 3.4 删除线 3.5 混合使用 3.6 反引号引 ...

  7. CF1479B Painting the Array（贪心+DP）

    题目大意:给你一个序列,让你提取出一个子序列A,剩余的部分组成子序列B,现定义seg(x)表示把序列x中相邻的相同数合并成一个数后,序列x的长度,分别求seg(A)+seg(B)的最大值和最小值,n= ...

  8. Grep 命令有什么用？如何忽略大小写？如何查找不含该串的行?

    是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来. grep [stringSTRING] filename grep [^string] filename

  9. MySQL 数据库作发布系统的存储，一天五万条以上的增量， 预计运维三年,怎么优化？

    1.设计良好的数据库结构,允许部分数据冗余,尽量避免 join 查询,提高效率. 2.选择合适的表字段数据类型和存储引擎,适当的添加索引. 3.MySQL 库主从读写分离. 4.找规律分表,减少单表中 ...

  10. maven下载出现unknown文件夹

    问题场景 maven下载配置完成后,发现如上图代码包下载失败,本地maven库中出现unknown文件夹,也就是说,maven无法定位下载到上面的代码包. 解决过程 仔细观察发现,所有下载失败的代码包 ...