Question

有人可以帮助我使此代码具有响应性吗？我在w3school（https://www.w3schools.com/html/html_responsive.asp）上添加了代码行<meta name="viewport" content="width=device-width, initial-scale=1.0">，但是倒计时无法检测到我何时使用手机。

// Set the date we're counting down to
var countDownDate = new Date("Nov 27, 2020 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("day").innerHTML = "<br />" + days + "<br />"+ "Ngày";
    document.getElementById("hour").innerHTML = "<br />" + hours + "<br />" + "Giờ";
    document.getElementById("minute").innerHTML = "<br />" + minutes + "<br />" + "Phút";
    document.getElementById("second").innerHTML = "<br />" + seconds + "<br />" + "Giây";
}, 1000);

body, html {
  height: 100%;
  margin: 0;
}
.bgimg {
  background-image: url('https://training.leadthechange.asia/wp-content/uploads/2020/10/MINDFUL-1536x864.png');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.middle {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 .circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 30px;
    background: #333333;
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: bold;
  }

<div class="bgimg">
  <div class="middle">
  <div class="circle"><span id="day"></span></div>
  <div class="circle"><span id="hour"></span></div>
  <div class="circle"><span id="minute"></span></div>
  <div class="circle"><span id="second"></span></div>
  </div>
</div>

图片还可以，但是以天，小时，分钟，秒为单位的倒数计时没有响应

Answer 1

通过使用媒体查询，我们可以使倒计时具有响应性。

尝试一下：

/* Here 767px means viewport width */
@media only screen and (max-width: 767px) {
.circle { 
width: 80px; 
height: 80px; 
font-size: 18px; 
}

/* Below css is to beautify only */ 
.middle { 
width: 100%;
text-align: center;
}
}

Answer 2

可以通过调整父div使它响应。我已尝试解决您的问题here。要查看完整页面，请单击here。代码

// Set the date we're counting down to
var countDownDate = new Date("Nov 27, 2020 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("day").innerHTML = "<br />" + days + "<br />"+ "Ngày";
    document.getElementById("hour").innerHTML = "<br />" + hours + "<br />" + "Giờ";
    document.getElementById("minute").innerHTML = "<br />" + minutes + "<br />" + "Phút";
    document.getElementById("second").innerHTML = "<br />" + seconds + "<br />" + "Giây";
}, 1000);

html { 
  background: url(https://training.leadthechange.asia/wp-content/uploads/2020/10/MINDFUL-1536x864.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 .circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 30px;
    background: #333333;
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: bold;
  }

<div class = "parent">
  <div class="middle">
  <div class="circle"><span id="day"></span></div>
  <div class="circle"><span id="hour"></span></div>
  <div class="circle"><span id="minute"></span></div>
  <div class="circle"><span id="second"></span></div>
  </div>
</div>

（如果您想减小圆圈及其文本的大小，则可以使用其他人指出的媒体查询！但是通常减小移动设备元素的整体大小是一个坏主意，因为这样可以看到问题。）

使用手机时，html，css，javascript没有响应

2 个答案: