使用 Jquery 和 CSS 的即将推出页面

2025 年 5 月 18 日 | 阅读 7 分钟

在本文中，我们将看到如何使用 Jquery、HTML 和 CSS 创建带有倒计时的即将推出页面。即将推出页面是网站的第一个页面。它应该具有有吸引力的功能，并包含有关网站的所有信息等。它用于向您的客户显示重要信息，让他们了解您的业务。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Coming Soon Page using Jquery and CSS </title>    
        <meta name = "description"/>    
         <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import 'https://fonts.googleapis.com/css?family=Allerta+Stencil|Roboto+Mono';
body {
    background: #2F3F51;
    background-image: repeating-radial-gradient (
        circle,
        #283247 , #283247 45%,
        transparent 45%, transparent 60%,
        #283247 60%,#283247 100%
        );
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
    margin: 30px;
  font-family: 'Allerta Stencil', sans-serif;
}
h2 {
	font-weight: 500;
	font-size: 27px;
	font-size: 2vw;
	margin: 5 auto;
	color: #fff;
	width: 100%;
	text-align: center;
}
@keyframes fadeIn {
  from { top: 20%; opacity: 0; }
  to { top: 100; opacity: 1; }
}
@-webkit-keyframes fadeIn {
  from { top: 20%; opacity: 0; }
  to { top: 100; opacity: 1; }
}
.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  animation: fadeIn 1000ms ease;
  -webkit-animation: fadeIn 1000ms ease;
}
form {
	text-align: center;
	width: 100%;
	margin-top: 60px;
}
form input[type="text"] {
	width: 22%;
	padding: 16px;
	font-size: 0.85em;
	color: #fff;
	outline: none;
	font-weight: 600;
	background: none;
	border: 1px solid#FFFFFF;
	transition: border-color 0.5s;
}
form input[type="text"]:focus {
	background: rgba(255,255,255, 0.3);
}
form input[type="submit"] {
	border: 1px solid #FD3267;
	padding: 16px 16px;
	font-size: 0.85em;
	transition: 0.5s all;
	background: none;
	color: #FD3267;
	outline: none;
	cursor: pointer;
	margin-left: 15px;
}
form input[type="submit"].slide-hover-left-1 {
    background-image: linear-gradient(0, #0A3D5B, #0A3D5B);
    background-size: 0;
    transition: .8s;
    background-repeat: no-repeat;
}
form input[type="submit"].slide-hover-left-1:hover {
    background-size: 100%;
    color: #fff;
}
form input[type="submit"]:hover {
	border: 1px solid #D11250;
	color: #D11250;
}
h1 {
  font-size: 40px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0;
  line-height: 1;
  font-weight: 700;
}
.dot {
  color: #4FEBFE;
}
p {
  text-align: center;
  margin: 18px;
  font-family: 'Muli', sans-serif;
  font-weight: normal;
}
.icons {
  text-align: center;
}
.icons i {
  color: #00091B;
  background: #fff;
  height: 15px;
  width: 15px;
  padding: 13px;
  margin: 0 10px;
  border-radius: 50px;
  border: 2px solid #fff;
  transition: all 200ms ease;
  text-decoration: none;
  position: relative;
}
.icons i:hover {
  color: #fff;
  background: none;
  cursor: pointer !important;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  text-decoration: none;
}
.icons i:active {
  color: #fff;
  background: none;
  cursor: pointer !important;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  text-decoration: none;
}
ul {
	list-style: none;
	display: block;
}
a {
	color: #fd3267;
}
ul.countdown {
	margin-top: 10px;
	text-align: center;
	padding: 0;
	margin-bottom: 0;
	width: 100%;
}
ul.countdown li {
	display: inline-block;
	margin-right: 3%;
	text-align: center;
}
ul.countdown li span {
	font-size: 22px;
	width: 150px;
	letter-spacing: 5px;
	font-weight: 300;
	color: #fff;
}
ul.countdown li p {
	font-size: 14px;
	margin-bottom: 0;
}
ul.countdown li:last-child {
	margin-right: 0;
}
.days_ref { color: #2ECC71 }
.hours_ref { color: #fd3267 }
.minutes_ref { color: #9B59B6 }
.seconds_ref { color: #3498DB }
</style>
<body>
<div class = "wrapper">
  <h1> Example of <span class = "dot"> Coming soon Page </span> </h1>
  <h2>using Jquery </h2>
  <div class = "icons">
    <a href = " "> <i class = "fa fa-twitter"> </i> </a>
    <a href = " "> <i class = "fa fa-youtube-play"> </i> </a>
     <a href = " "> <i class = "fa fa-paper-plane"> </i> </a>
  </div>
  <ul class = "countdown">
    <li>
      <span class = "days"> 1O </span>
      <p class = "days_ref"> days </p>
    </li>
    <li>
      <span class = "hours"> 5 </span>
      <p class = "hours_ref"> hours </p>
    </li>
    <li>
      <span class = "minutes"> 15 </span>
      <p class = "minutes_ref"> minutes </p>
    </li>
    <li>
      <span class = "seconds"> 9 </span>
      <p class = "seconds_ref"> seconds </p>
    </li>
  </ul>
    <form>
    <input type = "text" placeholder = "Enter your email">
    <input type = "submit" class = "slide-hover-left-1"  value = "Submit">
  </form>
 </div>
<script>
$(document).ready(function() {   
  function e() {
      var e = new Date;
      e.setDate(e.getDate() + 20);
      var dd = e.getDate();
      var mm = e.getMonth() + 1;
      var y = e.getFullYear();
      var futureFormattedDate = mm + "/" + dd + "/" + y + ' 12:00:00';
      return futureFormattedDate;
  }
  $('.countdown').downCount({
      date: e(),
      offset: -4
  });
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 Jquery 和 CSS 创建了一个即将推出页面。在这个页面中，我们有一个社交图标、表单和倒计时计时器。计时器用于显示网站发布剩余的时间。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Coming Soon Page using Jquery and CSS </title>    
        <meta name = "description"/>    
         <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import "compass/css3";
body, html {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;    
  background-color:#611187;
  background-image: linear-gradient(to right top, #611187, #7823a1, #8f33bc, #a743d8, #c054f4);  font-family: 'Comfortaa', cursive;
}
.wrap {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 310px;  
}
a {
  text-decoration: none;
  color: #1a1a1a;
}
h1 {  
  margin-bottom: 60px;
  text-align: center;
  font: 300 2.25em lato;
  text-transform: uppercase;
  strong {
    font-weight: 400;
    color: #ea4c4c;
  }  
}
h2 {
  margin-bottom: 80px;  
  text-align: center;  
  font: 300 0.7em lato; 
  text-transform: uppercase;  
  strong {    
    font-weight: 400;   
  }
}
.countdown {
  width: 720px;
  margin: 0 auto;
  .bloc-time {
    float: left;    
    margin-right: 45px;    
    text-align: center;    
    &:last-child {
      margin-right: 0;
    }
  }
  .count-title {
    display: block;
    margin-bottom: 15px;
    font: normal 0.94em lato;
    color: #1a1a1a;
    text-transform: uppercase;
  }
 .figure {
    position: relative;
    float: left;
    height: 110px;
    width: 100px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 8px; 
    @include box-shadow(0 3px 4px 0 rgba(0, 0, 0, .2),inset 2px 4px 0 0 rgba(255, 255, 255, .08));
    &:last-child {
      margin-right: 0;
    }
    >span {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      font: normal 5.94em/107px lato;
      font-weight: 700;
      color: #de4848;
    }

    .top, .bottom-back {    
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
      }
    }
    .top {
      z-index: 3;
      background-color: #f7f7f7;
      transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%; 
      @include border-top-radius(10px); 
      @include transform(perspective(200px));
    }
    .bottom {  
      z-index: 1;
      
      &:before {
        content: "";
        position: absolute;
        display: block; 
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: rgba(0, 0, 0, .02);
      }
    }
    .bottom-back {
      z-index: 2;
      top: 0;
      height: 50%;
      overflow: hidden;    
      background-color: #f7f7f7;
      @include border-top-radius(10px);
      span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
    .top, .topb {
      height: 50%;
      overflow: hidden;
      @include backface-visibility(hidden);
    }
    . topb{
      z-index: 4;
      bottom: 0;
      background-color: #fff;
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
      @include transform(perspective(200px) rotateX(180deg));
      @include border-bottom-radius(10px); 
      span {
        position: absolute;
        top: -100%;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
</style>
<body>
<div class = "wrap">  
  <h1> Example of Coming Soon Page using   <strong> Jquery and CSS</strong></h1>
  <div class="countdown">
    <div class="bloc-time hours" data-init-value="7">
      <span class="count-title">Hours</span>
      <div class="figure hours hours-1">
        <span class="top">2</span>
        <span class="top-back">
          <span>2</span>
        </span>
        <span class="bottom">2</span>
        <span class="bottom-back">
          <span>2</span>
        </span>
      </div>
      <div class="figure hours hours-2">
        <span class="top">4</span>
        <span class="top-back">
          <span>4</span>
        </span>
        <span class="bottom">4</span>
        <span class="bottom-back">
          <span>4</span>
        </span>
      </div>
    </div>
    <div class="bloc-time min" data-init-value="0">
      <span class="count-title">Minutes</span>
      <div class="figure min min-1">
        <span class="top">0</span>
        <span class="top-back">
          <span>0</span>
        </span>
        <span class="bottom">0</span>
        <span class="bottom-back">
          <span>0</span>
        </span>        
      </div>
      <div class="figure min min-2">
       <span class="top">0</span>
        <span class="top-back">
          <span>0</span>
        </span>
        <span class="bottom">0</span>
        <span class="bottom-back">
          <span>0</span>
        </span>
      </div>
    </div>
    <div class="bloc-time sec" data-init-value="0">
      <span class="count-title">Seconds</span>
        <div class="figure sec sec-1">
        <span class="top">0</span>
        <span class="top-back">
          <span>0</span>
        </span>
        <span class="bottom">0</span>
        <span class="bottom-back">
          <span>0</span>
        </span>          
      </div>
      <div class="figure sec sec-2">
        <span class="top">0</span>
        <span class="top-back">
          <span>0</span>
        </span>
        <span class="bottom">0</span>
        <span class="bottom-back">
          <span>0</span>
        </span>
      </div>
    </div>
  </div>
</div>
<script>
var Countdown = {
    $el: $('.countdown'),
    countdown_interval: null,
  total_seconds     : 0,
    init: function() {
    		this.$ = {
    	hours  : this.$el.find('.bloc-time.hours .figure'),
    	minutes: this.$el.find('.bloc-time.min .figure'),
    	seconds: this.$el.find('.bloc-time.sec .figure')
   	};
    this.values = {
	      hours  : this.$.hours.parent().attr('data-init-value'),
        minutes: this.$.minutes.parent().attr('data-init-value'),
        seconds: this.$.seconds.parent().attr('data-init-value'),
    };
        this.total_seconds = this.values.hours * 60 * 60 + (this.values.minutes * 60) + this.values.seconds;
    this.count();    
  },
  count: function() {
    var that    = this,
        $hour_1 = this.$.hours.eq(0),
        $hour_2 = this.$.hours.eq(1),
        $min_1  = this.$.minutes.eq(0),
        $min_2  = this.$.minutes.eq(1),
        $sec_1  = this.$.seconds.eq(0),
        $sec_2  = this.$.seconds.eq(1);
        this.countdown_interval = setInterval(function() {
        if(that.total_seconds > 0) {
            if(that.values.minutes >= 0 && that.values.seconds < 0) {
                that.values.seconds = 59;
            }
            if(that.values.hours >= 0 && that.values.minutes < 0) {
                that.values.minutes = 59;
            }
            that.checkHour(that.values.hours, $hour_1, $hour_2);
            that.checkHour(that.values.minutes, $min_1, $min_2);
            that.checkHour(that.values.seconds, $sec_1, $sec_2);
        }
        else {
            clearInterval(that.countdown_interval);
        }
    }, 1000);    
  },
  animateFigure: function($el, value) {
     var that         = this,
     $top         = $el.find('.top'),
         $bottom      = $el.find('.bottom'),
         $back_top    = $el.find('.top-back'),
         $back_bottom = $el.find('.bottom-back');
    $back_top.find('span').html(value);
    $back_bottom.find('span').html(value);
    TweenMax.to($top, 0.8, {
        rotationX           : '-180deg',
        transformPerspective: 300,
	      ease                : Quart.easeOut,
        onComplete          : function() {
            $top.html(value);
            $bottom.html(value);
            TweenMax.set($top, { rotationX: 0 });
        }
    });
    TweenMax.to($back_top, 0.8, { 
        rotationX           : 0,
        transformPerspective: 300,
	      ease                : Quart.easeOut, 
        clearProps          : 'all' 
    });    
  },
  checkHour: function(value, $el_1, $el_2) {
    var val_1       = value.toString().charAt(0),
        val_2       = value.toString().charAt(1),
        fig_1_value = $el_1.find('.top').html(),
        fig_2_value = $el_2.find('.top').html();
  }
};
Countdown.init();
</script>
</body>
</html>

说明

在上面的示例中，我们创建了使用 Jquery 和 CSS 在即将推出页面中添加计时器的功能。

输出

以下是这个例子的输出。

下一个主题Jquery-emoji-rating-plugin

← 上一步下一步 →

使用 Jquery 和 CSS 的即将推出页面

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 和 CSS 的即将推出页面

示例 1

示例 2

相关帖子

Jquery 令牌生成器插件来选择一个值

jQuery odd() 方法

jQuery :lang() 选择器

queue() 方法

jQuery replaceAll() 方法

jQuery nextAll() 方法

jQuery insertBefore() 方法

makeArray() 方法

jQuery is() 方法

noop() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器