将 javascript 时间与 marquee 标签中的内容整合在同一行显示
integrating javascript time with content in marquee tag to show on the same line
似乎无法让这个 javascript 时钟与我希望在我的字幕中滚动的内容出现在同一行。目前,我想要的文本作为时间后的内容出现在下面的一行上?有没有办法在同一行的时间旁边显示文本内容?
谢谢
<body>
<header id="pageHeader">
<marquee style="
width: 100%;
/* position: fixed; */
display: block;
background: #000;
z-index: 999999999999;
margin: 0;
font-size:18px;
color: #FFB6C1;
left: 0;
"> <!DOCTYPE html>
<html>
<head>
<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 + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"> </div>
CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
</body>
</html> </marquee>
我刚刚将 display: inline-block
添加到您的 div
,因此它不会占据整行 space。
#txt {
display: inline-block;
}
<body>
<header id="pageHeader">
<marquee style="
width: 100%;
/* position: fixed; */
display: block;
background: #000;
z-index: 999999999999;
margin: 0;
font-size:18px;
color: #FFB6C1;
left: 0;
"> <!DOCTYPE html>
<html>
<head>
<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 + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"> </div>
CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
</body>
</html> </marquee>
似乎无法让这个 javascript 时钟与我希望在我的字幕中滚动的内容出现在同一行。目前,我想要的文本作为时间后的内容出现在下面的一行上?有没有办法在同一行的时间旁边显示文本内容? 谢谢
<body>
<header id="pageHeader">
<marquee style="
width: 100%;
/* position: fixed; */
display: block;
background: #000;
z-index: 999999999999;
margin: 0;
font-size:18px;
color: #FFB6C1;
left: 0;
"> <!DOCTYPE html>
<html>
<head>
<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 + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"> </div>
CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
</body>
</html> </marquee>
我刚刚将 display: inline-block
添加到您的 div
,因此它不会占据整行 space。
#txt {
display: inline-block;
}
<body>
<header id="pageHeader">
<marquee style="
width: 100%;
/* position: fixed; */
display: block;
background: #000;
z-index: 999999999999;
margin: 0;
font-size:18px;
color: #FFB6C1;
left: 0;
"> <!DOCTYPE html>
<html>
<head>
<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 + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"> </div>
CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
</body>
</html> </marquee>