일단 만드는 JavaScript
29 Jun 2023테킷 멋쟁이사자처럼 JavaScript
일단 만드는 JavaScript
Javascript로 만드는 [로또 번호 추첨기]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로또 번호 추첨기</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>로또 번호 추첨기</h1>
<script>
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
lotto.sort((a, b) => a - b);
document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
document.write("<div class='ball ball2'>" + lotto[1] + "</div>");
document.write("<div class='ball ball3'>" + lotto[2] + "</div>");
document.write("<div class='ball ball4'>" + lotto[3] + "</div>");
document.write("<div class='ball ball5'>" + lotto[4] + "</div>");
document.write("<div class='ball ball6'>" + lotto[5] + "</div>");
</script>
</body>
</html>
Javascript로 만드는 [자소서 글자수 계산기]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자소서 글자수 계산기</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<style>
h1 {
margin-top: 30px;
}
#count {
float: right;
}
</style>
</head>
<body class="container">
<h1>자기소개</h1>
<textarea
class="form-control"
rows="3"
id="jasoseol"
onkeydown="counter();"
>
저는 인성 문제가 없습니다.</textarea
>
<span id="count">(0/200)</span>
<script>
function counter() {
var content = document.getElementById("jasoseol").value;
if (content.length > 200) {
content = content.substring(0, 200);
document.getElementById("jasoseol").value = content;
}
document.getElementById("count").innerHTML =
"(" + content.length + "/200)";
}
counter();
</script>
</body>
</html>
미니 스타크래프트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>스타크래프트</title>
<style>
.background {
position: relative;
background-image: url("background.png");
background-size: 500px 330px;
width: 500px;
height: 330px;
}
#drone {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 60px;
}
#bunker {
position: absolute;
width: 150px;
height: 150px;
top: 80px;
right: 20px;
}
#spit {
display: none;
position: absolute;
top: 140px;
left: 150px;
width: 50px;
height: 30px;
z-index: 2;
}
</style>
</head>
<body>
<h1 id="hp">HP: 3</h1>
<div class="background">
<img id="drone" src="drone.png" alt="drone" />
<img id="spit" src="spit.png" alt="spit" />
<img id="bunker" src="bunker.png" alt="bunker" />
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script>
var hp = 3;
$("#drone").click(function () {
$("#spit").fadeIn();
$("#spit").animate({ left: "+=250px" });
$("#spit").fadeOut(function () {
hp = hp - 1;
$("#hp").text("HP: " + hp);
if (hp == 0) {
$("#bunker").fadeOut();
}
});
$("#spit").css({ left: 150 });
});
</script>
</body>
</html>
Date 객체
<script>
//1. Date 객체 생성
var now = new Date();
//2. 연도를 가져오는 메서드 .getFullYear()
console.log(now.getFullYear());
//3. 월 정보를 가져오는 메서드 .getMonth() {0: 1월, 1: 2월, ... 10: 11월, 11: 12월}
console.log(now.getMonth());
//4. 일 정보를 가져오는 메서드 .getDate()
console.log(now.getDate());
//5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드 .getTime()
console.log(now.getTime());
//6. 특정 일의 Date 객체 생성
var christmas = new Date("2020-12-25");
console.log(christmas);
//7. 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms);
</script>
Javascript로 만드는 [기념일 계산기]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>기념일 계산기</title>
<style>
* {
color: #333333;
}
p {
margin-bottom: 1px;
}
.photos {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#duhee {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-right: 30px;
}
#jisook {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-left: 30px;
}
#heart {
width: 50px;
height: 50px;
}
.gray {
color: #a0a0a0;
}
.special-day {
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
}
.days-left {
text-align: right;
}
.date {
text-align: right;
color: #a0a0a0;
}
</style>
</head>
<body class="container">
<section class="photos">
<img id="duhee" src="duhee.jpeg" alt="duhee" />
<img id="heart" src="heart.png" alt="heart" />
<img id="jisook" src="jisook.jpeg" alt="jisook" />
</section>
<div
class="container d-flex flex-column justify-content-center align-items-center mt-3"
>
<h3>두희♥지숙</h3>
<h3 id="love">0일째</h3>
<h4 class="date">2020.6.30</h4>
</div>
<hr />
<section class="special-day">
<h3 class="title">발렌타인 데이</h3>
<div class="date-box">
<p id="valentine" class="days-left">0일 남음</p>
<p class="date">2021.2.14</p>
</div>
</section>
<hr />
<section class="special-day">
<h3 class="title">1000일</h3>
<div class="date-box">
<p id="thousand" class="days-left">0일 남음</p>
<p id="thousand-date" class="date">0000.00.00</p>
</div>
</section>
<hr />
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script>
var now = new Date();
var start = new Date("2020-06-30");
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$("#love").text(day + "일째");
var valentine = new Date("2021-02-14");
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$("#valentine").text(day2 + "일 남음");
var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
var thousandDate =
thousand.getFullYear() +
"." +
(thousand.getMonth() + 1) +
"." +
thousand.getDate();
$("#thousand-date").text(thousandDate);
// thousand, now, getTime()
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$("#thousand").text(day3 + "일 남음");
</script>
</body>
</html>
실검에 오르는 세렝게티 동물 테스트 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<article class="start">
<h1 class="mt-5 text-center">나랑 꼭 닮은 세렝게티 동물은?</h1>
<button type="button" class="btn btn-primary mt-5" onclick="start()">
테스트 시작하기
</button>
</article>
<article class="question">
<div class="progress mt-5">
<div
class="progress-bar"
role="progressbar"
style="width: calc(100 / 12 * 1%)"
></div>
</div>
<h2 id="title" class="text-center mt-5">문제</h2>
<input id="type" type="hidden" value="EI" />
<button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
<button id="B" type="button" class="btn btn-primary mt-5">Primary</button>
</article>
<article class="result">
<img src="lion.jpg" alt="lion" class="rounded-circle mt-5" id="img" />
<h2 id="animal" class="text-center mt-5">동물 이름</h2>
<h3 id="explain" class="text-center mt-5">설명</h3>
</article>
<input type="hidden" id="EI" value="0" />
<input type="hidden" id="SN" value="0" />
<input type="hidden" id="TF" value="0" />
<input type="hidden" id="JP" value="0" />
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
<script>
var num = 1;
var q = {
1: { title: "문제 1번", type: "EI", A: "E", B: "I" },
2: { title: "문제 2번", type: "EI", A: "E", B: "I" },
3: { title: "문제 3번", type: "EI", A: "E", B: "I" },
4: { title: "문제 4번", type: "SN", A: "S", B: "N" },
5: { title: "문제 5번", type: "SN", A: "S", B: "N" },
6: { title: "문제 6번", type: "SN", A: "S", B: "N" },
7: { title: "문제 7번", type: "TF", A: "T", B: "F" },
8: { title: "문제 8번", type: "TF", A: "T", B: "F" },
9: { title: "문제 9번", type: "TF", A: "T", B: "F" },
10: { title: "문제 10번", type: "JP", A: "J", B: "P" },
11: { title: "문제 11번", type: "JP", A: "J", B: "P" },
12: { title: "문제 12번", type: "JP", A: "J", B: "P" },
};
var result = {
ISTJ: { animal: "하마", explain: "하마 설명", img: "lion.jpg" },
ISFJ: { animal: "부엉이", explain: "부엉이 설명", img: "lion.jpg" },
INFJ: { animal: "물소", explain: "물소 설명", img: "lion.jpg" },
INTJ: { animal: "치타", explain: "치타 설명", img: "lion.jpg" },
ISTP: { animal: "나무늘보", explain: "나무늘보 설명", img: "lion.jpg" },
ISFP: { animal: "거북이", explain: "거북이 설명", img: "lion.jpg" },
INFP: { animal: "코끼리", explain: "코끼리 설명", img: "lion.jpg" },
INTP: { animal: "침팬지", explain: "침팬지 설명", img: "lion.jpg" },
ESTP: { animal: "악어", explain: "악어 설명", img: "lion.jpg" },
ESFP: { animal: "미어캣", explain: "미어캣 설명", img: "lion.jpg" },
ENFP: { animal: "사자", explain: "사자 설명", img: "lion.jpg" },
ENTP: { animal: "태양새", explain: "태양새 설명", img: "lion.jpg" },
ESTJ: { animal: "기린", explain: "기린 설명", img: "lion.jpg" },
ESFJ: { animal: "고릴라", explain: "고릴라 설명", img: "lion.jpg" },
ENFJ: { animal: "카피바라", explain: "카피바라 설명", img: "lion.jpg" },
ENTJ: { animal: "호랑이", explain: "호랑이 설명", img: "lion.jpg" },
};
function start() {
$(".start").hide();
$(".question").show();
next();
}
$("#A").click(function () {
var type = $("#type").val();
var preValue = $("#" + type).val();
$("#" + type).val(parseInt(preValue) + 1);
next();
});
$("#B").click(function () {
next();
});
function next() {
if (num == 13) {
$(".question").hide();
$(".result").show();
var mbti = "";
$("#EI").val() < 2 ? (mbti += "I") : (mbti += "E");
$("#SN").val() < 2 ? (mbti += "N") : (mbti += "S");
$("#TF").val() < 2 ? (mbti += "F") : (mbti += "T");
$("#JP").val() < 2 ? (mbti += "P") : (mbti += "J");
$("#img").attr("src", result[mbti]["img"]);
$("#animal").html(result[mbti]["animal"]);
$("#explain").html(result[mbti]["explain"]);
} else {
$(".progress-bar").attr("style", "width: calc(100/12*" + num + "%)");
$("#title").html(q[num]["title"]);
$("#type").val(q[num]["type"]);
$("#A").html(q[num]["A"]);
$("#B").html(q[num]["B"]);
num++;
}
}
</script>
</body>
</html>