커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
데일리 모토 시간 추가하기 질문이요.
[왕초보] ChatGPT로 웹개발 완전정복 v0
2주차
이*승
댓글
3
・
추천
0
・
조회수
14
조회수
14
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
챗지피티에게 "현재 시간을 표시하는 JavaScript 함수를 작성 해줘" 라고 질문 했을때
챗지피티는 저에게
function 현재시간표시() {
var 현재시간 = new Date();
var 시 = 현재시간.getHours();
var 분 = 현재시간.getMinutes();
var 초 = 현재시간.getSeconds();
시 = (시 < 10) ? '0' + 시 : 시;
분 = (분 < 10) ? '0' + 분 : 분;
초 = (초 < 10) ? '0' + 초 : 초;
var 현재시간문자열 = 시 + ':' + 분 + ':' + 초;
console.log('현재 시간: ' + 현재시간문자열);
}
// 함수 호출
현재시간표시();
이런 코드를 줬거든요?
근데 문제는 콘솔로그에는 시간이 표시되지만 div 태그에는 표시되지 않는다는거였어요.
그래서 이번엔 챗지피티에게 "함수를 호출했는데도 div 태그에 시간이 표시되지 않아." 라고 말했더니 이번엔
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현재 시간 표시</title>
</head>
<body>
<div id="시간표시"></div>
<script>
function 현재시간표시() {
var 현재시간 = new Date();
var 시 = 현재시간.getHours();
var 분 = 현재시간.getMinutes();
var 초 = 현재시간.getSeconds();
시 = (시 < 10) ? '0' + 시 : 시;
분 = (분 < 10) ? '0' + 분 : 분;
초 = (초 < 10) ? '0' + 초 : 초;
var 현재시간문자열 = 시 + ':' + 분 + ':' + 초;
// 시간을 표시할 div 요소를 찾아서 내용을 업데이트
var 시간표시Div = document.getElementById('시간표시');
시간표시Div.textContent = '현재 시간: ' + 현재시간문자열;
}
// 함수 호출
현재시간표시();
// 1초마다 시간 업데이트
setInterval(현재시간표시, 1000);
</script>
</body>
</html>
이런 코드를 줫거든요??? 그래서 시간이 표시 될수있게
시간 표시가 들어가야 하는 자리에 id를 "시간표시"로 먹여주고 스크립트 반영시켜서 저장하고
새로고침 했는데 아래 캡쳐 처럼 나왔어요.
그래서 아, 이거 안되겟다, 기왕에 JQuerry 배운김에 복습할겸 한번 써먹어보자.
그래서 JQuerry CDN 가져와서 고쳣거든요?
예전에 구글링해서 다른 사람들 코드 긁어와서 커스터마이징 해본적 있어서
정각 1분 전부터 빨간색으로 표시되게 하는거 랑 응용해서 코드 짯거든요?
제딴엔 제이쿼리 활용 잘했다고 생각했는데 시간이 표시되지 않아요..
뭐가 잘못 된걸까요?
작성한 코드 및 에러 메세지
<!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" />
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<title>Document</title>
<script>
function 현재시간표시() {
let 현재시간 = new Date();
let 시 = 현재시간.getHours();
let 분 = 현재시간.getMinutes();
let 초 = 현재시간.getSeconds();
시 = (시 < 10) ? '0' + 시 : 시;
분 = (분 < 10) ? '0' + 분 : 분;
초 = (초 < 10) ? '0' + 초 : 초;
let temp_html =`<p> ${시} + ':' + ${분} + ':' + ${초}</p>`
$('#time').append(temp_html)
if (현재시간.getMinutes() > 58) {
//정각 1분전부터 빨강색으로 출력
$('#time').style.color = "red";
}
setInterval(현재시간표시, 1000);
}
</script>
<link rel="stylesheet" href="./style.css">
</head>
<body >
<nav class="navbar">
<img
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
alt="sparta-logo"
/>
<div class="weather">
<img
src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png"
id="weather-icon"
/>
<p>날씨 맑음, 20ºC</p>
</div>
</nav>
<div class="container">
<div class="greating">
<h1>Hello, My name!</h1>
<div id="time"></div>
<div class="motto">
<h3>My life's motto</h3>
<h2>웃으면 행복해집니다.</h2>
</div>
</divdiv>
<div class="footer">
<p>- 작자 미상 -</p>
<p>멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p>
</div>
</body>
</html>
댓글 알림
