몇초후에 이미지와 시간나타내기
본문
고수님들 도움이 필요 합니다.
회사 공지사항 모니터에 시간을 나타내고 싶어서 코드를 짜집기 하고 있는데 생각처럼 잘 안되네요.
고수님들 부탁 드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calender Room</title>
<style>
body {
margin: 0;
overflow: hidden;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}
@keyframes fade {
0% {
opacity: 50;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
var index = 0; //이미지에 접근하는 인덱스
window.onload = function(){
slideShow();
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; //처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; //인덱스가 초과되면 1로 변경
}
x[index-1].style.display = "block"; //해당 인덱스는 block으로
setTimeout(slideShow, 3000); //함수를 4초마다 호출
}
<div class="container">
<h1 id="current-time"></h1>
</div>
<script>
const time = document.getElementById('current-time'); // id가 'current-time'인 요소
// 1초마다 현재 시각 업데이트
setInterval(() => {
const date = new Date(); // 새로운 Date 객체 생성
time.innerHTML = date.toLocaleTimeString();
}, 1000);
setTimeout(current-time, 12000); //함수를 4초마다 호출
}
</script>
<div>
<img class="slide1" src="c:\\display\a.jpg" >
<img class="slide1" src="c:\\display\b.jpg">
<img class="slide1" src="c:\\display\c.jpg">
<!-- 시계 시작 { -->
<!-- 시계 12초 후에 clock_2같이 시계동작{ -->
<img class="slide1" src="c:\\display\clock_2.jpg">
<style>
function getToday(){
var date = new Date();
var year = date.getFullYear();
var month = ("0" + (1 + date.getMonth())).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return year + month + day;
}
function getToday(){
var date = new Date();
var year = date.getFullYear();
var month = ("0" + (1 + date.getMonth())).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return year + "-" + month + "-" + day;
}
<br><br>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.container img {
width: 100%;
object-fit: cover;
}
#current-time {
position: absolute;
color: white;
font-size: 4rem;
}
</style>
</head>
<!-- 시계 끝 { -->
</div>
테스트 중
</body>
</html>
답변 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calender Room</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #555;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}
@keyframes fade {
0% {
opacity: 50;
}
100% {
opacity: 1;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.container img {
width: 100%;
object-fit: cover;
}
#current-time {
position: absolute;
color: white;
font-size: 4rem;
}
</style>
</head>
<body>
<div class="container">
<h1 id="current-time"></h1>
</div>
<script>
// function getToday(){
// var date = new Date();
// var year = date.getFullYear();
// var month = ("0" + (1 + date.getMonth())).slice(-2);
// var day = ("0" + date.getDate()).slice(-2);
// return year + month + day;
// }
// function getToday(){
// var date = new Date();
// var year = date.getFullYear();
// var month = ("0" + (1 + date.getMonth())).slice(-2);
// var day = ("0" + date.getDate()).slice(-2);
// return year + "-" + month + "-" + day;
// }
var index = 0; //이미지에 접근하는 인덱스
window.onload = function(){
slideShow();
const time = document.getElementById('current-time'); // id가 'current-time'인 요소
// 1초마다 현재 시각 업데이트
setInterval(() => {
const date = new Date(); // 새로운 Date 객체 생성
time.innerHTML = date.toLocaleTimeString();
}, 1000);
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; //처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; //인덱스가 초과되면 1로 변경
}
x[index-1].style.display = "block"; //해당 인덱스는 block으로
setTimeout(slideShow, 3000); //함수를 4초마다 호출
}
// setTimeout(current-time, 12000); //함수를 4초마다 호출
</script>
<div>
<img class="slide1" src="c:\\display\a.jpg" >
<img class="slide1" src="c:\\display\b.jpg">
<img class="slide1" src="c:\\display\c.jpg">
<!-- 시계 시작 { -->
<!-- 시계 12초 후에 clock_2같이 시계동작{ -->
<img class="slide1" src="c:\\display\clock_2.jpg">
<!-- 시계 끝 { -->
</div>
테스트 중
</body>
</html>
죄송합니다만 시간호출이 안되고 있습니다.