我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › 倒计时效果分享

倒计时效果分享

复制链接 | 收藏本帖

2006

: 前端小姐姐小试身手Lv3

发表于2021-10-29 15:31

楼主

本帖最后由前端小姐姐于 2021-10-29 15:33 编辑

1、页面效果：

2、代码展示：
（1）html:
<section class="meeting02" id="aimingPoint-1">
<div class="max-width-1200">
      <div class="main">
         <div class="countdown">
            <h6>
                  <span class="text0">距离开播</span>
                  <span class="days">00</span>
                  <span class="text1">天</span>
                  <span class="hours">00</span>
                  <span class="text1">小时</span>
                  <span class="minutes">00</span>
                  <span class="text1">分</span>
                  <span class="seconds">00</span>
                  <span class="text1">秒</span>
            </h6>
            <p></p>
         </div>
      </div>
</div>
</section>

（2）css:
<style>
*{
      padding: 0;
      margin: 0;
}
/******* meeting02 *******/
.meeting02{
      padding: 75px 0;
      background-color: #13092e;
      position: relative;
}
.max-width-1200{
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
}
.meeting02 .main{
      width: calc(100% - 4px);
      height: 300px;
      overflow: hidden;
      position: relative;
      text-align: center;
      border: 2px solid transparent;
      background-clip: padding-box,border-box;
      background-origin: padding-box,border-box;
      background-image: linear-gradient(90deg,#13092e,#13092e),linear-gradient(90deg,#00dbff,#5d3dff);
      background-color: #160d39;
      margin: 0 auto;
}
.meeting02 .main a{
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
}
.meeting02 .main:after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(20,10,47,.65);
}
.meeting02 .main img{
      display: block;
      max-width: 100%;
      height: auto;
      border: 0;
      margin: 0 auto;
}
.meeting02 .main iframe{
      display: block;
      max-width: 100%;
      height: auto;
      border: 0;
      margin: 0 auto;
}
/**/
.meeting02 .main .countdown{
      position: absolute;
      left: 5%;
      top: 50%;
      z-index: 3;
      margin-top: -14px;
      width: 90%;
      height: 28px;
}
.meeting02 .main .countdown h6{
      line-height: 36px;
      color: #00dbff;
      font-size: 24px;
}
.meeting02 .main .countdown span{
      display: inline-block;
      vertical-align: top;
      font-size: 30px;
}
.meeting02 .main .countdown .text0{
      color: #ffffff;
      font-size: 24px;
      margin-right: 10px;
}
.meeting02 .main .countdown .text1{
      color: #ffffff;
      font-size: 24px;
      margin: 0 2px;
}
.meeting02 .main .countdown p{
      display: inline-block;
      line-height: 28px;
      color: #ffffff;
      font-size: 16px;
      border-bottom: 1px solid rgba(255,255,255,.8);
      margin-top: 10px;
}
.meeting02 .main a:hover .countdown p{
      color: #00dbff;
      border-color: rgba(0,219,255,.8);
}
</style>

（3）js:
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
      // 设置截止时间
var deadline = new Date('2021/11  /25 09:30:00');
      var timing = setTimeout(function fn () {
         // 获取当前时间
var nowDate = new Date();

         // 时间差
var leftTime = deadline.getTime() - nowDate.getTime();

         if( leftTime < 0 ){
            leftTime = nowDate.getTime() - deadline.getTime();
            $('.text0').text('直播已进行');
            $('.countdown p').text('点击报名观看直播');
            $('a.btn-href1').text('观看直播');
         }
         $('.days', '.countdown').text(('0' + Math.floor(leftTime / 1000 / 60 / 60 / 24)).slice(-2));
         $('.hours', '.countdown').text(('0' + Math.floor(leftTime / 1000 / 60 / 60 % 24)).slice(-2));
         $('.minutes', '.countdown').text(('0' + Math.floor(leftTime / 1000 / 60 % 60)).slice(-2));
         $('.seconds', '.countdown').text(('0' + Math.floor(leftTime / 1000 % 60)).slice(-2));

         timing = setTimeout(fn, 1000);

      }, 1000);
})
</script>

备注：// 设置截止时间
var deadline = new Date('2021/9  /25 09:30:00'); 当时间值小于此时此刻日期时，显示如下：