본문 바로가기
🖥️ Frontend/Frontend 프로젝트

<HTML.CSS.JS> 아빠 생일 프로그램

by 정람지 2022. 7. 28.

계획했던 것처럼 완벽하게 되진 않았다.. 원래 계획은 람쥐가 아빠의 패턴(출근.점심.퇴근)에 맞춰 움직이고, 그 람쥐를 클릭하면 람쥐가 메세지를 띄우는 거였다. 어떻게 바뀌었는지에 대한 이야기는 변명html에 적혀 있다..

 

링크: https://dadbirthday.goldchae.repl.co

 

아빠 생신 축하드립니다

[Work With me!] 람쥐가 같이 코딩을 합니다! 람쥐는 점심시간 (11시 30분) 에 밥을 먹으러 갑니다! 람쥐는 음료를 사들고 복귀합니다! (12시 30분) 람쥐는 6시에 칼퇴합니다! 일하는 람쥐를 클릭하면 메

dadbirthday.goldchae.repl.co

HTML+ CSS - 기본

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>아빠 생신 축하드립니다</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <style>
    .outer {
    text-align: center;
    border:5px dashed;
    padding:10px;
    border-color: #CC66CC;
    width : 700px;
    height: 500px ;
    background-color:#FDDCEF; 
    color:#CC66CC;  
    line-height: 1.5em;
    font-family: arial;
    }

    #center{
      position: relative;
      left: 300px;
      top: 50px;
    }
    
    #lolo {
      font-weight: 400;
      font-size: 1.5em;
      line-height: 1.5em;
    }
    
    #pink {
      color:#660066;
      font-weight: 400;
    }
    
    
    body{
      background-image : url('https://cdn.pixabay.com/photo/2020/09/09/02/12/smearing-5556288_960_720.jpg');
      background-size : cover ; 
    }
  
    
  </style>
    

  <script>

    function popup(){
      window.open("pop.html","work with me!", "width=500px, height=700px, left=500, top=150")
    }
    function popingup(){
      window.open("click.html","work with me!", "width=500px, height=700px, left=500, top=150")
    }

  		var fname ="";
  		var today =new Date();
  		var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      var i = today.getMilliseconds();
      var hh = String(h);
      var mm = String(m);
      var ss = String(s);
      var ii = String(i);
      var whatTime = hh+mm+ss+ii
      var realTime = parseInt(whatTime)
     
    console.log(realTime)
  </script>

  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body background="#FFCCFF">
  
  <div class=outer style="position: absolute; left: 400px; top: 140px;">
    <br>
    <h1 id=pink >[Work With me!]</h1>
    <br>
    <h3 id=lolo >람쥐가 같이 코딩을 합니다!</h3>
    <h3 id=lolo>람쥐는 점심시간 (11시 30분) 에 밥을 먹으러 갑니다!</h3>
    <h3 id=lolo>람쥐는 음료를 사들고 복귀합니다! (12시 30분)</h3>
    <h3 id=lolo>람쥐는 6시에 칼퇴합니다!</h3>
    <br>
    <h3 id=lolo>일하는 람쥐를 클릭하면 메세지가 뜹니다! (두번째버튼)</h3>
    <br>
    <button type="button" class="btn btn-outline-secondary" onclick="popup()" >람쥐와 함께하기</button>
    <button type="button" class="btn btn-outline-secondary" onclick="popingup()" >람쥐와 함께하기2</button>
    <h6>팝업 차단 해제해주세요</h6>
    <br>
 </div>
  

  
<button onclick="location.href='sad.html'" class="btn btn-outline-secondary" >변명</button>
</body>

</html>

변명 HTML

<!DOCTYPE html>
<html>
  <head>
   
  </head>
  <body>
   <h3>원래 시간마다 딱딱 바뀌는 거 하고 싶었는데 새로고침해야 바뀐 이미지가 적용이 되더라고여 근데 특정 시간에 새로고침하는 게 너무 어려워서 5분마다 새로고침하게 했어여ㅜ 이미지마다 6분 이상씩 설정해놓긴 했는데.. 생각했던 모양새는 안나오고여 정해진 시간마다 새로고침해서 한번씩만봐주세여 그리고 가끔씩 이상해서 시간 콘솔로그찍어 봤더니 밀리초가 두자리랑 3자리 왔다갔다해서.. 몇번 새로고침하면 언젠간 맞는 화면 나옵니다..그리고 버튼 2에 있는 거 원래 시간마다 움직이는 애랑 같이 하려고 했는데 어려워서..나눳어여 클릭하면 랜덤으로 이미지가 나와여 그림 6개 정도 있어여 내년에는 더 잘해볼게여.. 생신축하드려여~!~!~!</h3>

  </body>
</html>

HTML + CSS + JS - 클릭하면 바뀌는 람쥐

<!DOCTYPE html>
<html>
  <head>
    <style>
      #img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="img" onclick="toggleImg()" src="./picture/morning.gif">
    </div>

    
  <script>
    function toggleImg() {
      const data = [
        "./picture/1.png",
        "./picture/2.png",
        "./picture/3.png",
        "./picture/4.png",
        "./picture/5.png",
        "./picture/6.png",
      ];
      
      function randomValueFromArray(array) {
        const random = Math.floor(Math.random() * array.length);
        return array[random];
      }
      
      let picture = randomValueFromArray(data);

      document.getElementById("img").src = picture;
    }
  </script>
  </body>
</html>

HTML + CSS + JS - 시간마다 바뀌는 람쥐

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>working ramram</title>
  
  <style>
    .center {
      background-color: #FFCCFF;
    }
  </style>
  
  <script>
  	function clock() {
  		var fname ="";
  		var today =new Date();
  		var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      var i = today.getMilliseconds();
      var hh = String(h);
      var mm = String(m);
      var ss = String(s);
      var ii = String(i);
      var whatTime = hh+mm+ss+ii
      var realTime = parseInt(whatTime)
      
  		if(realTime>=090000000 && realTime<113000000){
  			fname="./picture/morning.gif";
  		}
  		else if(realTime>=113000000 && realTime<=113600000){
  			fname="./picture/lunch.gif";
  		}
      else if(realTime>=123000000 && realTime<=123600000){
  			fname="./picture/goback.gif";
  		}
      else if(realTime>=123600000 && realTime<180000000){
  			fname="./picture/afternoon.gif";
  		}
      else if(realTime>=180000000 && realTime<=180600000){
  			fname="./picture/gohome.gif";
  		}
      else{
        fname="./picture/lunchtime.png";
      }
  		
  		document.getElementById("time").src=fname;
      setTimeout('location.reload()',600000);
  	}

    var cover = document.getElementById("time");
		cover.addEventListener("mouseover",changePic, false);
    cover.addEventListener("mouseout",originPic, false);
    
    function changePic() {
      cover.src = "./picture/1.png";
    }
    function originPic() {
      cover.src = "./picture/1.png";
    }
    
  	
</script>
  
</head>
  
<body onload="clock()">
	<img id="time" src="" width=500px height=700px >
 
    
   
</body>
  
</html>

실행 화면

23.10.23

누가 방문했길래 오랜만에 봤는데

이때 내가 하고 싶었던 건 리액트를 이용해야 할 수 있는 것 같다

싱글 페이지 애플리케이션 / SPA 이런 걸로..?

..

내일 시험 2개..

컴구 휴..

'🖥️ Frontend > Frontend 프로젝트' 카테고리의 다른 글

<HTML.CSS.JS> 개미 생일 가위바위보 게임  (0) 2022.08.21
<HTML.CSS.JS>로또 추첨 게임  (0) 2022.08.04
<HTML.CSS.JS>람지 키우기  (0) 2022.07.28
<HTML.CSS.JS>틱택토 게임-미완  (0) 2022.07.28
<HTML.CSS.JS> 구구단게임  (0) 2022.07.26

관련글

티스토리툴바