html안에 시계넣기
본문
아래와 같이 소스를 짜깁기 했는데
시계가 나오지 않네요.
고수님들 부탁 드립니다.
<!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, 2000); //함수를 4초마다 호출
}
</script>
<body>
<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">
<src="c:\\display/clock/clock.html">
</div>
테스트 중
</body>
</html>
답변 4
clock.html 이파일이 현재 상태에서 어디 에 있는데요? 루투 메인에 있나요 ? 아니면 현재 페이지 경로에 있나요?
만약에 현상태에서 루투메인에 있다면 다음과 같이 경로 설정을 올바르게 해주시면됩니다.
<iframe src="/clock.html" style="position: fixed; width: 200px; height: 100px;"></iframe>
웅프님 감사드립니다.
height를 자동으로 화면에 맞추는 건 어떻게 할지 부탁 드립니다.
height: 0px 또는 height: 100% 해주시면됩니다. 단 100%하였을경우에는 상위 부모 div 에 클래스를 정의하여 요소를 만들어서 정의 하셔야 합니다.
또한
자동을 원할경우에는 JavaScript 와 css 스타일을 이용하여 정의 하셔야 합니다.
display/clock/clock.html 위 파일을 지금 로컬에서 적용중이신건가요?
그리고 태그가 <src 이렇게 말고 html 파일이면 <iframe src="c:\\display/clock/clock.html" width=100 height=100></iframe> 으로 해보세요
답변 감사드립옵고.
윈도우로컬 사용중이고 위 그대로 적용 했는데 html이 안 불러와지네요....ㅠㅠ
경로가 c:\ 바로 아래에 있다면 경로를 /display/clock/clock.html 로 적용해 보세요
윈도우로컬이면 경로가 /가 아니라 \ 사용하셔야 ~~
답변 감사드립옵고.
윈도우로컬 사용중이고 위 그대로 적용 했는데 html이 안 불러와지네요....ㅠㅠ
다음과 같이 해보시는건 어떨까 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar 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, 2000); // 함수를 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">
<iframe src="c:\\display/clock/clock.html" style="width: 100%; height: 300px;"></iframe>
</div>
테스트 중
</body>
</html>
<iframe> 요소를 추가하고 src 속성을 사용하여 시계 페이지의 경로를 지정하고, 시계를 표시하려면 <iframe>의 크기를 조절하여 화면에 맞게 조정하면 될 것 같습니다
답변 감사드립옵고.
윈도우로컬 사용중이고 위 그대로 적용 했는데 html이 안 불러와지네요....ㅠㅠ
iframe의 파일경로를 다음과 같이 수정해 보세요
파일 경로를 올바르게 지정해야 합니다. HTML 파일 내에서 파일 경로를 지정할 때 백슬래시(\) 대신 슬래시(/)를 사용하거나 이스케이프 문자를 사용해야 합니다. 또한, 파일 경로는 파일 시스템 경로가 아니라 웹 서버 경로 또는 상대 경로여야 합니다.
<iframe src="http://localhost:포트번호/display/clock/clock.html" style="width: 100%; height: 300px;"></iframe>
웹 서버를 사용하지 않을 경우, 파일 경로를 웹에서 접근 가능한 경로로 변경해보세요.