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>关于JavaScript 动态时间 SetTimeout 方法改变高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38956103/