JavaScript動的時間SetTimeoutメソッド高さを変更します。

JQueryがdivセクションを滑らせます。秒は下からスライドしますが、divセクションは調整しないでください。この問題を解決するには？JavaScript動的時間SetTimeoutメソッド高さを変更します。

<!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>

出典

2016-08-15 Mano Jeeva

時間要素に最大高さを設定してみてください。コードには他にもたくさんの改良が施されていますが、この追加の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>

出典

2016-08-15 13:46:42 JonSG

惜しいが、divがまだ少しを毎秒を振ります。 –

@JeremyThille最大の高さを72に設定します:-)上記のコードを上記のように変更しましたが、もう問題は表示されません – JonSG

が、あなたのコードでは、私は最初からあなたの時計の迅速なバージョンを開発優先非常に多くのレベルでそう間違って見えます:) 私はレイアウトのための魔法のフレキシボックスを使用。

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>

出典

2016-08-15 14:18:05

JavaScript動的時間SetTimeoutメソッド高さを変更します。

答えて

関連する問題