JavaScript动态时间SetTimeout方法改变高度

JavaScript Dynamic Time SetTimeout Method Changes the height

本文关键字：改变 高度 方法 SetTimeout 动态 时间 JavaScript      更新时间：2023-09-26

JQuery滑动滑动div部分。秒应该从底部滑动，但它不应该调整div部分。如何解决这个问题?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":";
document.getElementById("txt1").innerHTML= m+":";
$(document).ready(function(){
$("#txt2").fadeOut("fast");});
document.getElementById("txt2").innerHTML= s;
$(document).ready(function(){
$("#txt2").slideDown();});
    var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
<style>
#col {
background-color:red;
color:white;
}
</style>
</head>
<body onload="startTime()">
<div id="col" style="position:fixed;font-size:5em">
<span id="txt"></span><span id="txt1"></span><span id="txt2"></span>.</div>
</body>
</html>

很抱歉这么说，但是你的代码在很多层面上看起来都是错误的，我宁愿从头开始开发一个快速版本的时钟:)我使用了神奇的Flexbox进行布局。

var $h, $m, $s, checkTime, startTime;
$h = $(".hours");
$m = $(".minutes");
$s = $(".seconds");
startTime = function() {
    var today = new Date();
    $h.text(checkTime(today.getHours()));
    $m.text(checkTime(today.getMinutes()));
    $s
      .text(checkTime(today.getSeconds()))
      .css("opacity",1)
      .hide()
      .slideDown('fast')
      .delay(400)
      .animate({"opacity":0},200);
};
checkTime = function(i) { return i < 10 ? "0"+i : i; };
setInterval(startTime, 1000);
startTime();
h1 {
  font-family: 'Inconsolata';
  font-size: 2rem;
  width : 160px;
  background-color : red;
  color : white;
  display: flex;
  align-items: flex-end;
  justify-content : center;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Inconsolata:700' rel='stylesheet' type='text/css'>
<h1>
  <span class="hours"></span>
  <span>: </span>
  <span class="minutes"></span>
  <span>: </span>
  <span class="seconds"></span>
</h1>

尝试在time元素上设置max-height。你还可以对代码做一些其他的改进，但是这些额外的CSS应该可以让你解决这个显示问题。

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  
  m = checkTime(m);
  s = checkTime(s);
  
  document.getElementById('txt').innerHTML = h + ":";
  document.getElementById("txt1").innerHTML= m + ":";
  // -------------------
  // -- You probably don't want to do this a ready()
  // -------------------
  $(document).ready(function(){
    $("#txt2").fadeOut("fast");
  });
  // -------------------
  document.getElementById("txt2").innerHTML = s;
  // -------------------
  // -- You probably don't want to do this a ready()
  // -------------------
  $(document).ready(function(){
    $("#txt2").slideDown();
  });
  // -------------------
  var t = setTimeout(startTime, 1000);
}
#col {
  background-color:red;
  color:white;
}
#txt, #txt1, #txt2 {
  max-height: 72px;
}
<body onload="startTime()">
<div id="col" style="position:fixed;font-size:5em">
<span id="txt"></span><span id="txt1"></span><span id="txt2"></span>.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

相关文章：