menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Html+Css+js实现春节倒计时效果移动端和PC端

武飞扬头像
前端大歌谣
帮助1人

目录

前言

导语

效果预览

html部分

移动端样式（mobile.css）

pc端样式（style.css）

js部分

效果演示

移动端

pc端

 总结

 下载地址

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 新的一年就要到了 可否写一个春节的倒计时呢 我想看看哪天可以过春节 需要源码的同学评论区留下邮箱，我发送给你，谢谢~

效果预览

学新通

html部分

  1.  
    <!DOCTYPE html>
  2.  
    <!--geyao-->
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <link rel="stylesheet" href="css/style.css">
  8.  
    <link rel="stylesheet" href="css/mobile.css">
  9.  
    <title>春节倒计时</title>
  10.  
    </head>
  11.  
    <body>
  12.  
    <div class="container">
  13.  
    <h2><span id="title">春节倒计时</span>2022</h2>
  14.  
    <div class="countdown">
  15.  
    <div id="day">--</div>
  16.  
    <div id="hour">--</div>
  17.  
    <div id="minute">--</div>
  18.  
    <div id="second">--</div>
  19.  
    </div>
  20.  
    <!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣
  21.  
    -->
  22.  
    <!-- <div id="btn">切换背景</div> -->
  23.  
    </div>
  24.  
    <script src="js/script.js"></script>
  25.  
     
  26.  
    </body>
  27.  
    </html>

移动端样式（mobile.css）

  1.  
    @media screen and (max-width: 1025px) {
  2.  
    * {
  3.  
    margin: 0;
  4.  
    padding: 0;
  5.  
    }
  6.  
    body {
  7.  
    background: rgb(129, 155, 190) url(../image/geyao1.jpg);
  8.  
    background-size: cover;
  9.  
    background-position: center center;
  10.  
    height: 100%;
  11.  
    }
  12.  
    .container {
  13.  
    margin: 0;
  14.  
    color: #fff;
  15.  
    line-height: normal;
  16.  
    position: absolute;
  17.  
    align-items: center;
  18.  
    left: 5%;
  19.  
    right: 5%;
  20.  
    }
  21.  
    .container h2 {
  22.  
    font-size: 6em;
  23.  
    text-align: center;
  24.  
    margin: 10% 0;
  25.  
    color: #fff;
  26.  
    }
  27.  
    .container h2 span {
  28.  
    color: #fff;
  29.  
    display: block;
  30.  
    text-align: center;
  31.  
    font-size: 0.3em;
  32.  
    font-weight: 300;
  33.  
    letter-spacing: 2px;
  34.  
    }
  35.  
    .countdown {
  36.  
    display: flex;
  37.  
    justify-content: space-around;
  38.  
    margin: 0;
  39.  
    }
  40.  
    .countdown div {
  41.  
    width: 20%;
  42.  
    height: 13vw;
  43.  
    margin: 0 10px;
  44.  
    line-height: 13vw;
  45.  
    font-size: 2em;
  46.  
    position: relative;
  47.  
    text-align: center;
  48.  
    background: #333333;
  49.  
    color: #ffffff;
  50.  
    font-weight: 500;
  51.  
    border-radius: 10px 10px 0 0;
  52.  
    }
  53.  
    .countdown div:before {
  54.  
    content: '';
  55.  
    position: absolute;
  56.  
    bottom: -30px;
  57.  
    left: 0;
  58.  
    width: 100%;
  59.  
    height: 30px;
  60.  
    background: #b00000;
  61.  
    color: #ffffff;
  62.  
    font-size: 0.4em;
  63.  
    line-height: 35px;
  64.  
    font-weight: 300;
  65.  
    border-radius: 0 0 10px 10px;
  66.  
    }
  67.  
    .countdown #day:before {
  68.  
    content: '天';
  69.  
    }
  70.  
    .countdown #hour:before {
  71.  
    content: '时';
  72.  
    }
  73.  
    .countdown #minute:before {
  74.  
    content: '分';
  75.  
    }
  76.  
    .countdown #second:before {
  77.  
    content: '秒';
  78.  
    }
  79.  
    }

pc端样式（style.css）

  1.  
     
  2.  
    * {
  3.  
    margin: 0;
  4.  
    padding: 0;
  5.  
    font-family: 'Poppins', sans-serif;
  6.  
    }
  7.  
    @media screen and (min-width: 1025px) {
  8.  
    body {
  9.  
    background: rgb(129, 155, 190) url(../image/geyao1.jpg);
  10.  
    background-attachment: fixed;
  11.  
    background-size: cover;
  12.  
    -webkit-background-size: cover;
  13.  
    -o-background-size: cover;
  14.  
    }
  15.  
    .container {
  16.  
    position: absolute;
  17.  
    top: 80px;
  18.  
    left: 100px;
  19.  
    right: 100px;
  20.  
    bottom: 80px;
  21.  
    background-size: cover;
  22.  
    -webkit-background-size: cover;
  23.  
    -o-background-size: cover;
  24.  
    display: flex;
  25.  
    justify-content: center;
  26.  
    align-items: center;
  27.  
    flex-direction: column;
  28.  
    box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8),
  29.  
    0 0 0 100px rgba(0, 0, 0, 0.3);
  30.  
    }
  31.  
    .container h2 {
  32.  
    text-align: center;
  33.  
    font-size: 10em;
  34.  
    line-height: 0.7em;
  35.  
    color: #ffffff;
  36.  
    margin-top: -80px;
  37.  
    }
  38.  
    .container h2 span {
  39.  
    display: block;
  40.  
    font-weight: 300;
  41.  
    letter-spacing: 6px;
  42.  
    font-size: 0.2em;
  43.  
    }
  44.  
    .countdown {
  45.  
    display: flex;
  46.  
    margin-top: 50px;
  47.  
    }
  48.  
    .countdown div {
  49.  
    position: relative;
  50.  
    width: 100px;
  51.  
    height: 100px;
  52.  
    line-height: 100px;
  53.  
    text-align: center;
  54.  
    background: #333;
  55.  
    color: #fff;
  56.  
    margin: 0 15px;
  57.  
    font-size: 3em;
  58.  
    font-weight: 500;
  59.  
    border-radius: 10px 10px 0 0;
  60.  
    }
  61.  
    .countdown div:before {
  62.  
    content: '';
  63.  
    position: absolute;
  64.  
    bottom: -30px;
  65.  
    left: 0;
  66.  
    width: 100%;
  67.  
    height: 35px;
  68.  
    background: #b00000;
  69.  
    color: #ffffff;
  70.  
    font-size: 0.35em;
  71.  
    line-height: 35px;
  72.  
    font-weight: 300;
  73.  
    border-radius: 0 0 10px 10px;
  74.  
    }
  75.  
    .countdown #day:before {
  76.  
    content: '天';
  77.  
    }
  78.  
    .countdown #hour:before {
  79.  
    content: '时';
  80.  
    }
  81.  
    .countdown #minute:before {
  82.  
    content: '分';
  83.  
    }
  84.  
    .countdown #second:before {
  85.  
    content: '秒';
  86.  
    }
  87.  
    }
  88.  
    canvas {
  89.  
    width: 100%;
  90.  
    height: 100%;
  91.  
    }
  92.  
    ::-webkit-scrollbar {
  93.  
    display: none;
  94.  
    }
  95.  
    #btn{
  96.  
    margin: 40px;
  97.  
    width: 100px;
  98.  
    height: 30px;
  99.  
    background: pink;
  100.  
    text-align: center;
  101.  
    color: darkred;
  102.  
    line-height: 30px;
  103.  
    }

js部分

  1.  
    class Snowflake {
  2.  
    constructor() {
  3.  
    this.x = 0;
  4.  
    this.y = 0;
  5.  
    this.vx = 0;
  6.  
    this.vy = 0;
  7.  
    this.radius = 0;
  8.  
    this.alpha = 0;
  9.  
    this.reset();
  10.  
    }
  11.  
    reset() {
  12.  
    this.x = this.randBetween(0, window.innerWidth);
  13.  
    this.y = this.randBetween(0, -window.innerHeight);
  14.  
    this.vx = this.randBetween(-3, 3);
  15.  
    this.vy = this.randBetween(2, 5);
  16.  
    this.radius = this.randBetween(1, 4);
  17.  
    this.alpha = this.randBetween(0.1, 0.9);
  18.  
    }
  19.  
    randBetween(min, max) {
  20.  
    return min Math.random() * (max - min);
  21.  
    }
  22.  
    update() {
  23.  
    this.x = this.vx;
  24.  
    this.y = this.vy;
  25.  
    if (this.y this.radius > window.innerHeight) {
  26.  
    this.reset();
  27.  
    }
  28.  
    }
  29.  
    }
  30.  
    class Snow {
  31.  
    constructor() {
  32.  
    this.canvas = document.createElement('canvas');
  33.  
    this.ctx = this.canvas.getContext('2d');
  34.  
    document.body.appendChild(this.canvas);
  35.  
    window.addEventListener('resize', () => this.onResize());
  36.  
    this.onResize();
  37.  
    this.updateBound = this.update.bind(this);
  38.  
    requestAnimationFrame(this.updateBound);
  39.  
    this.createSnowflakes();
  40.  
    }
  41.  
    onResize() {
  42.  
    this.width = window.innerWidth;
  43.  
    this.height = window.innerHeight;
  44.  
    this.canvas.width = this.width;
  45.  
    this.canvas.height = this.height;
  46.  
    }
  47.  
    createSnowflakes() {
  48.  
    const flakes = window.innerWidth / 4;
  49.  
    this.snowflakes = [];
  50.  
    for (let s = 0; s < flakes; s ) {
  51.  
    this.snowflakes.push(new Snowflake());
  52.  
    }
  53.  
    }
  54.  
    update() {
  55.  
    this.ctx.clearRect(0, 0, this.width, this.height);
  56.  
    for (let flake of this.snowflakes) {
  57.  
    flake.update();
  58.  
    this.ctx.save();
  59.  
    this.ctx.fillStyle = '#FFF';
  60.  
    this.ctx.beginPath();
  61.  
    this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
  62.  
    this.ctx.closePath();
  63.  
    this.ctx.globalAlpha = flake.alpha;
  64.  
    this.ctx.fill();
  65.  
    this.ctx.restore();
  66.  
    }
  67.  
    requestAnimationFrame(this.updateBound);
  68.  
    }
  69.  
    }
  70.  
    new Snow();
  71.  
    var stop = false;
  72.  
    function show_runtime() {
  73.  
    var newDay = '2022/2/1 00:00:00';
  74.  
    var countDate = new Date(newDay);
  75.  
    var now = new Date().getTime();
  76.  
    gap = countDate - now;
  77.  
    var second = 1000;
  78.  
    var minute = second * 60;
  79.  
    var hour = minute * 60;
  80.  
    var day = hour * 24;
  81.  
    var d = Math.floor(gap / day);
  82.  
    var h = Math.floor((gap % day) / hour);
  83.  
    var m = Math.floor((gap % hour) / minute);
  84.  
    var s = Math.floor((gap % minute) / second);
  85.  
    if ((d, h, m, s < 0)) {
  86.  
    stop = true;
  87.  
    } else {
  88.  
    document.getElementById('day').innerText = d;
  89.  
    document.getElementById('hour').innerText = h;
  90.  
    document.getElementById('minute').innerText = m;
  91.  
    document.getElementById('second').innerText = s;
  92.  
    }
  93.  
    }
  94.  
    function newyear() {
  95.  
    document.getElementById('title').innerText = 'Happy Spring Festival';
  96.  
    document.getElementById('day').innerText = '春';
  97.  
    document.getElementById('hour').innerText = '节';
  98.  
    document.getElementById('minute').innerText = '快';
  99.  
    document.getElementById('second').innerText = '乐';
  100.  
    }
  101.  
    var time = setInterval(() => {
  102.  
    show_runtime();
  103.  
    if (stop === true) {
  104.  
    newyear();
  105.  
    clearInterval(time);
  106.  
    }
  107.  
    }, 1000);
  108.  
    // 定时器 控制图片自动切换
  109.  
    function downTime() {
  110.  
    let item = 1;
  111.  
    setInterval(() => {
  112.  
    item ;
  113.  
    if (item === 4) {
  114.  
    item = 1;
  115.  
    }
  116.  
    console.log(item, 'item');
  117.  
    document.body.style.backgroundImage = `url(./image/geyao${item}.jpg)`;
  118.  
    return item;
  119.  
    e.stopPropagation(); //取消事件冒泡
  120.  
    }, 2000);
  121.  
    }
  122.  
    window.onload = downTime;

效果演示

移动端

学新通

学新通

学新通

pc端

学新通

学新通

 学新通

 总结

在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连 喜欢请一键三连 谢谢~

 下载地址



Html Css js实现春节倒计时效果(移动端和PC端)

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgbekhk
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群