当青训营遇上码上掘金

主题 2：遇见-遇见最好的自己

前言

世界充满了我们相遇的几率，我却始终希望在最好的年华遇见你。2022已经结束，2023崭新的一年即将开始。新的一年充斥着无数美好的祝福，也充满着挑战。作为24届毕业生，我想说留给我们奋斗的时间不多。大学最后一年，无论是考研还是就业，都面临着巨大的挑战。如果不能在这最后一年丰富自己，可能大学就这样结束了。面临未知的社会，只有一年的奋斗和努力，才能换来接触时的从容与淡定。随着2023新年钟声的敲响，2024的倒计时也悄然开始。希望2023一年的坚持与奋斗，在2024遇见最好的自己。

思路

本次项目主要使用前段三剑客html+css+javascript技术进行搭建。

项目不难实现，通过div标签把倒计时显示的几个框架搭建成功。

<div class="container">
    <h2>
      <span>Countdown to new year </span>
      <div id="Year">NA</div>
    </h2>
    <div class="countdouwn">
      <div id="day">NA</div>
      <div id="hour">NA</div>
      <div id="minute">NA</div>
      <div id="second">NA</div>
    </div>
  </div>

下面使用javaScript对倒计时进行计算。并把信息返回到div标签上。

<script>
    // 自动为下一年
    function newYear() {
      var Y = new Date().getFullYear() +1
      var newDay = Y + '/1/1 00:00:00'
      var countDate = new Date(newDay);
      var now = new Date().getTime()
      gap = countDate - now;
      var second = 1000
      var minute = second * 60
      var hour = minute * 60
      var day = hour * 24

      var d = Math.floor(gap / day)
      var h = Math.floor((gap % day) / hour)
      var m = Math.floor((gap % hour) / minute)
      var s = Math.floor((gap % minute) / second)

      // 此处可删除
      d = addZero(d)
      h = addZero(h)
      m = addZero(m)
      s = addZero(s)
      // func end

      // 显示的年
      document.getElementById('Year').innerText = Y

      // 倒计时
      document.getElementById('day').innerText = d
      document.getElementById('hour').innerText = h
      document.getElementById('minute').innerText = m
      document.getElementById('second').innerText = s
    }

    // 数字小于10前面就加0
    function addZero(num) {
      return num < 10 ? '0' + num : num
    }

    setInterval(() => {
      newYear()
    }, 1000)
  </script>

最后就是通过css对页面进行装饰

 @import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
	  * {
	    margin: 0;
	    padding: 0;
	    font-family: "Poppins", sans-serif;
	  }
	  @media screen and (min-width: 1025px) {
	    body {
	      
	      background-attachment: fixed;
	      background-blend-mode: hard-light;
	    }
	  
	    .container {
	     
	      width: 80%;
	      margin: 5% auto;
	      padding: 11% 5%;
	      background-attachment: fixed;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      flex-direction: column;
	      box-shadow: 0 50px 50px rgba(245, 207, 207, 0.5), 0 0 0 100px rgba(218, 75, 75, 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: 400;
	      letter-spacing: 6px;
	      font-size: 0.2em;
	    }
	  
	    .countdouwn {
	      display: flex;
	      margin-top: 50px;
	    }
	  
	    .countdouwn div {
	      position: relative;
	      width: 100px;
	      height: 100px;
	      line-height: 100px;
	      text-align: center;
	      background: #333333;
	      color: #ffffff;
	      margin: 0 15px;
	      font-size: 3em;
	      font-weight: 500;
	    }
	  
	    .countdouwn 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;
	    }
	  
	    .countdouwn #day:before {
	      content: "Days";
	    }
	  
	    .countdouwn #hour:before {
	      content: "Hours";
	    }
	  
	    .countdouwn #minute:before {
	      content: "Minutes";
	    }
	  
	    .countdouwn #second:before {
	      content: "Seconds";
	    }
	  }

实现

附录

希望在新的一年，大家一起努力，遇见最好的自己。加油加油加油！！！！！