gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 09:53:04 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com