html안에 시계넣기

html안에 시계넣기

QA

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: 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> 으로 해보세요

 

 

윈도우로컬이면 경로가 /가 아니라 \ 사용하셔야 ~~

다음과 같이 해보시는건 어떨까 합니다.


<!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>의 크기를 조절하여 화면에 맞게 조정하면 될 것 같습니다

iframe의 파일경로를  다음과 같이 수정해 보세요

 파일 경로를 올바르게 지정해야 합니다. HTML 파일 내에서 파일 경로를 지정할 때 백슬래시(\) 대신 슬래시(/)를 사용하거나 이스케이프 문자를 사용해야 합니다. 또한, 파일 경로는 파일 시스템 경로가 아니라 웹 서버 경로 또는 상대 경로여야 합니다.


<iframe src="http://localhost:포트번호/display/clock/clock.html" style="width: 100%; height: 300px;"></iframe>


웹 서버를 사용하지 않을 경우, 파일 경로를 웹에서 접근 가능한 경로로 변경해보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 5

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT