Javascript 使用倒计时功能使图像在页面中居中且响应迅速_Javascript_Html_Css

Javascript 使用倒计时功能使图像在页面中居中且响应迅速

javascript html css

Javascript 使用倒计时功能使图像在页面中居中且响应迅速,javascript,html,css,Javascript,Html,Css,我试图创建一个HTML页面，其中包含一个倒计时，我想添加一个图像，居中，使其响应。我尝试了几种方法，但结果都没有反应。我想让它看起来像这张照片：但是如果我调整页面大小，它看起来像这样（完全灾难）：我试着加上“宽度：100%”，但结果显示图像很大，这就是为什么我必须使用“宽度：20%”。我怎样才能使这张图像有响应性（正如你所看到的，倒计时是正确的）下面是我的代码： var target_date=新日期（“2020年1月20日”）；变量天、小时、分钟、秒；//时间单位变量 var

我试图创建一个HTML页面，其中包含一个倒计时，我想添加一个图像，居中，使其响应。我尝试了几种方法，但结果都没有反应。我想让它看起来像这张照片：

但是如果我调整页面大小，它看起来像这样（完全灾难）：

我试着加上“宽度：100%”，但结果显示图像很大，这就是为什么我必须使用“宽度：20%”。我怎样才能使这张图像有响应性（正如你所看到的，倒计时是正确的）

下面是我的代码：

var target_date=新日期（“2020年1月20日”）；
变量天、小时、分钟、秒；//时间单位变量
var countdown=document.getElementById（“tiles”）；//获取标记元素
getCountdown（）；
setInterval（函数（）{
getCountdown（）；
}, 1000);
函数getCountdown（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数左=（目标日期-当前日期）/1000；
天数=pad（parseInt（剩余秒/86400））；
剩余秒数=剩余秒数%86400；
小时=pad（parseInt（剩余秒/3600））；
剩余秒数=剩余秒数%3600；
分钟=pad（parseInt（剩余秒/60））；
秒=pad（parseInt（秒左%60））；
//格式化倒计时字符串+设置标记值
countdown.innerHTML=“+天+”“+小时+”“+分钟+”“+秒+”；
}
功能板（n）{
返回（n<10？'0'：''）+n；
}

正文{
字体：标准13px/20px Arial，Helvetica，无衬线；
单词包装：打断单词；
颜色：#eee；
背景:#3535；
}
img{
位置：绝对位置；
左：600px；
顶部：0px；
宽度：20%；
高度：自动；
}
#倒计时{
宽度：465px；
高度：112px；
文本对齐：居中；
背景：#222；
背景图像：-webkit线性渐变（顶部，#222，#333，#333，#222）；
背景图像：-moz线性梯度（顶部，#222，#333，#333，#222）；
背景图像：-ms线性梯度（顶部，#222，#333，#333，#222）；
背景图像：-o-线性梯度（顶部，#222，#333，#333，#222）；
边框：1px实心#111；
边界半径：5px；
盒子阴影：0px 0px 8px rgba（0,0,0,0.6）；
保证金：自动；
填充：24px0；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
#倒计时：之前{
内容：“；
宽度：8px；
高度：65px；
背景：#444；
背景图像：-webkit线性渐变（顶部，#555，#444，#444，#555）；
背景图像：-moz线性梯度（顶部，#555，#444，#444，#555）；
背景图像：-ms线性渐变（顶部，#555，#444，#444，#555）；
背景图像：-o-线性梯度（顶部，#555，#444，#444，#555）；
边框：1px实心#111；
边框左上半径：6px；
边框左下半径：6px；
显示：块；
位置：绝对位置；
顶部：48px；
左：-10px；
}
#倒计时：之后{
内容：“；
宽度：8px；
高度：65px；
背景：#444；
背景图像：-webkit线性渐变（顶部，#555，#444，#444，#555）；
背景图像：-moz线性梯度（顶部，#555，#444，#444，#555）；
背景图像：-ms线性渐变（顶部，#555，#444，#444，#555）；
背景图像：-o-线性梯度（顶部，#555，#444，#444，#555）；
边框：1px实心#111；
边框右上角半径：6px；
边框右下半径：6px；
显示：块；
位置：绝对位置；
顶部：48px；
右：-10px；
}
#倒计时#瓦片{
位置：相对位置；
z指数：1；
}
#倒计时#瓷砖>跨度{
宽度：92px；
最大宽度：92px；
字体：粗体48px“Droid Sans”，Arial，无衬线；
文本对齐：居中；
颜色：#111；
背景色：#ddd；
背景图像：-webkit线性渐变（顶部，#bbb，#eee）；
背景图像：-moz线性梯度（顶部，#bbb，#eee）；
背景图像：-ms线性梯度（顶部，#bbb，#eee）；
背景图像：-o-线性梯度（顶部，#bbb，#eee）；
边框顶部：1px实心#fff；
边界半径：3px；
盒影：0px 0px 12px rgba（0,0,0,0.7）；
利润率：0.7px；
填充：18px0；
显示：内联块；
位置：相对位置；
}
#倒计时#tiles>span:之前{
内容：“；
宽度：100%；
高度：13px；
背景：#111；
显示：块；
填充：0 3px；
位置：绝对位置；
最高：41%；
左：-3px；
z指数：-1；
}
#倒计时#tiles>span:{
内容：“；
宽度：100%；
高度：1px；
背景：#eee；
边框顶部：1px实心#333；
显示：块；
位置：绝对位置；
最高：48%；
左：0；
}
#倒计时，标签{
宽度：100%；
高度：25px；
文本对齐：居中；
位置：绝对位置；
底部：8px；
}
#倒计时，李{
宽度：102px；
字体：粗体15px“Droid Sans”，Arial，无衬线；
颜色：#f47321；
文本阴影：1px 1px 0px#000；
文本对齐：居中；
文本转换：大写；
显示：内联块；
}


日子
小时数
分钟
秒

它来自许多html元素的

绝对位置。要使其居中，您需要使用类似于flexbox的其他工具：

var target_date=新日期（“2020年1月20日”）；
变量天、小时、分钟、秒；//时间单位变量
var countdown=document.getElementById（“tiles”）；//获取标记元素
getCountdown（）；
setInterval（函数（）{getCountdown（）；}，1000）；
函数getCountdown（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数左=（目标日期-当前日期）/1000；
天数=pad（parseInt（剩余秒/86400））；
剩余秒数=剩余秒数%86400；
小时=pad（parseInt（剩余秒/3600））；
剩余秒数=剩余秒数%3600；
分钟=pad（parseInt（剩余秒/60））；
秒=pad（parseInt（秒左%60））；
//格式化倒计时字符串+设置标记值
countdown.innerHTML=“+天+”“+小时+”“+分钟+”“+秒+”；
}
功能板（n）{
返回（n<10？'0'：''）+n；
}
body{
字体：标准13px/20px Arial，Helvetica，无衬线；word
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center;">
      <div>
        <img src="logo.png" />
      </div>
      <div id="countdown">
        <div id="tiles"></div>
        <div class="labels">
          <li>Days</li>
          <li>Hours</li>
          <li>Mins</li>
          <li>Secs</li>
        </div>
      </div>
    </div>

    <script>
      var target_date = new Date("January 20, 2020");
      var days, hours, minutes, seconds; // variables for time units
      var countdown = document.getElementById("tiles"); // get tag element
      getCountdown();
      setInterval(function() {
        getCountdown();
      }, 1000);

      function getCountdown() {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;
        days = pad(parseInt(seconds_left / 86400));
        seconds_left = seconds_left % 86400;
        hours = pad(parseInt(seconds_left / 3600));
        seconds_left = seconds_left % 3600;
        minutes = pad(parseInt(seconds_left / 60));
        seconds = pad(parseInt(seconds_left % 60));
        // format countdown string + set tag value
        countdown.innerHTML =
          "<span>" +
          days +
          "</span><span>" +
          hours +
          "</span><span>" +
          minutes +
          "</span><span>" +
          seconds +
          "</span>";
      }

      function pad(n) {
        return (n < 10 ? "0" : "") + n;
      }
    </script>
  </body>
</html>

body {
  font: normal 13px/20px Arial, Helvetica, sans-serif;
  word-wrap: break-word;
  color: #eee;
  background: #353535;
}

img {
  width: 230px;
  height: auto;
}

#countdown {
  width: 465px;
  height: 112px;
  text-align: center;
  background: #222;
  background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
  background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
  background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
  background-image: -o-linear-gradient(top, #222, #333, #333, #222);
  border: 1px solid #111;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
  margin: auto;
  padding: 24px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#countdown:before {
  content: "";
  width: 8px;
  height: 65px;
  background: #444;
  background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
  background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
  background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
  background-image: -o-linear-gradient(top, #555, #444, #444, #555);
  border: 1px solid #111;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  display: block;
  position: absolute;
  top: 48px;
  left: -10px;
}

#countdown:after {
  content: "";
  width: 8px;
  height: 65px;
  background: #444;
  background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
  background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
  background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
  background-image: -o-linear-gradient(top, #555, #444, #444, #555);
  border: 1px solid #111;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  display: block;
  position: absolute;
  top: 48px;
  right: -10px;
}

#countdown #tiles {
  position: relative;
  z-index: 1;
}

#countdown #tiles > span {
  width: 92px;
  max-width: 92px;
  font: bold 48px "Droid Sans", Arial, sans-serif;
  text-align: center;
  color: #111;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(top, #bbb, #eee);
  background-image: -moz-linear-gradient(top, #bbb, #eee);
  background-image: -ms-linear-gradient(top, #bbb, #eee);
  background-image: -o-linear-gradient(top, #bbb, #eee);
  border-top: 1px solid #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  margin: 0 7px;
  padding: 18px 0;
  display: inline-block;
  position: relative;
}

#countdown #tiles > span:before {
  content: "";
  width: 100%;
  height: 13px;
  background: #111;
  display: block;
  padding: 0 3px;
  position: absolute;
  top: 41%;
  left: -3px;
  z-index: -1;
}

#countdown #tiles > span:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  border-top: 1px solid #333;
  display: block;
  position: absolute;
  top: 48%;
  left: 0;
}

#countdown .labels {
  width: 100%;
  height: 25px;
  text-align: center;
  position: absolute;
  bottom: 8px;
}

#countdown .labels li {
  width: 102px;
  font: bold 15px "Droid Sans", Arial, sans-serif;
  color: #f47321;
  text-shadow: 1px 1px 0px #000;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}