int a = 65;
float f = a; // 묵시적형변환(자동형변환)
System.out.println(f); // 값=65.0
char c = (char)a; // 명시적형변환(강제형변환)
System.out.println(c); // 값=A
final double PI = 3.14; // 변수를 상수처럼 절대 변경하지 않겠다(final)(변수명은 모든 글자는 대문자로)
| 연산자 (2) | 2023.01.08 |
|---|---|
| equals (문자열 비교하기) (0) | 2023.01.08 |
| 변수 (0) | 2022.12.15 |
| 스캔(값 입력받기) (0) | 2022.12.15 |
| 프린트 및 문자형태 (0) | 2022.12.14 |
import java.util.Scanner;
// 스캔 기능을 활성화시키기
// Scanner를 sc라는 이름으로 사용하겠다
Scanner sc = new Scanner(System.in);
// sc.next(); 문자열로 입력받아라 -> 기능자체가 키보드로 입력한 입력값
System.out.println(sc.next());
// sc.nextInt(); 정수값으로 입력받아라
System.out.println(sc.nextInt());
// sc.nextFloat(); 실수형값으로 입력받아라
System.out.println(sc.nextFloat());
// sc.nextLine(); 띄어쓰기 포함해서 입력받음
System.out.println(sc.nextLine());
| 연산자 (2) | 2023.01.08 |
|---|---|
| equals (문자열 비교하기) (0) | 2023.01.08 |
| 변수 (0) | 2022.12.15 |
| 데이터 타입과 형변환 (0) | 2022.12.15 |
| 프린트 및 문자형태 (0) | 2022.12.14 |
안녕하세요ㅎㅎ
코딩을 배운지 몇달밖에 안된 초보입니당..
처음으로 만들어본 포트폴리오구요
화려하게 만들고싶은데 뭘 어떻게 해야될지 아직 감이 안와서 ㅠㅠ 생각한걸 표현을 못하겠어요...
지금 배운것들로 최대한 이것저것 다 써가면서 만들어봤습니당..
실력이 좀 더 늘면 다시 만들어봐겠어요.....ㅎㅎ;;;
HTML 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sticky Memo</title>
<script src="랜딩페이지.js" defer></script>
<link rel="stylesheet" href="랜딩페이지.css">
<script src="https://kit.fontawesome.com/3777ee8c9b.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- 상단 메뉴 -->
<header>
<nav class="headA">
<span><a href="#" class="num1">HOME</a></span>
<span><a href="#a1" class="num2">ABOUT</a></span>
<span><a href="#a2" class="num3">SKILL</a></span>
<span><a href="#a3" class="num4">PROJECTS</a></span>
<span><a href="#a4" class="num5">CONTACT</a></span>
<a>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
<i class="fa-solid fa-angles-down"></i>
</a>
</nav>
</header>
<!--메인화면-->
<section class="conA" >
<div class="container">
<h1>PORTFOLIO</h1>
<p>안녕하세요 *** 입니다.</p>
<p>제 포트폴리오에 오신것을 환영합니다.</p>
</div>
</section>
<div id="a1"></div>
<!--소개-->
<section class="conB">
<div class="ABOUT">ABOUT</div>
<div class="container">
<div class="Img"></div>
<div class="cover">
여기에 소개글 작성
</div>
</div>
</section>
<div id="a2"></div>
<!--스킬-->
<section class="conC">
<div class="SKILL">SKILL</div>
<div class="container">
<div class="text">
<h1 class="HTML">HTML</h1>
<div class="HTMLImg"></div>
</div>
<div class="text">
<h1 class="Java">Java</h1>
<div class="JavaImg"></div>
</div>
<div class="text">
<h1 class="Python">Python</h1>
<div class="PythonImg"></div>
</div>
<div class="text">
<h1 class="SQL">SQL</h1>
<div class="SQLImg"></div>
</div>
<div class="text">
<h1 class="CSS">CSS</h1>
<div class="CSSImg"></div>
</div>
<div class="text">
<h1 class="JavaScript">JavaScript</h1>
<div class="JavaScriptImg"></div>
</div>
</div>
</section>
<div id="a3"></div>
<!--작업-->
<section class="conD">
<div class="PROJECTS">PROJECTS</div>
<div class="container">
<div><img src="../Resource/NumberPuzzle.gif" class="Img"></div>
<div class="Project">
<h1>01. NumberPuzzle</h1>
<h2>내용</h2>
<p>
START버튼 클릭 시
랜덤 숫자들이 칸에 배치되고
그 숫자들을 순서대로 빠르게 찾아보는 간단한 게임입니다.
</p>
<h2>참여인원</h2>
<p>1 명</p>
<h2>개발기간</h2>
<p>22.10.22 ~ 22.10.23</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
<div class="container">
<div><img src="../Resource/PORTFOLIO.gif" class="Img"></div>
<div class="Project">
<h1>02. PORTFOLIO</h1>
<h2>내용</h2>
<p>
포트폴리오 입니다.
</p>
<h2>참여인원</h2>
<p>1 명</p>
<h2>개발기간</h2>
<p>22.10.29 ~ 22.10.30</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
<div class="container">
<div><img src="../Resource/1.jpg" class="Img"></div>
<div class="Project">
<h1>03. 준비중</h1>
<h2>내용</h2>
<p>
-
</p>
<h2>참여인원</h2>
<p>-</p>
<h2>개발기간</h2>
<p>-</p>
<div class="Link"><a href="#">LINK</a></div>
</div>
</div>
</section>
<!--연락처-->
<nav class="footA">
<div class="CONTACT">CONTACT</div>
<div class="tel">
<ul>
<li><i class="fa-solid fa-envelope"></i> 이메일</li>
<li><i class="fa-solid fa-phone"></i> 폰번호</li>
</ul>
</div>
</nav>
<div class="footD">©2022 본인이름. All rights reserved.</div>
<div id="a4"></div>
</body>
</html>
CSS 코드
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap');
/* 기본 설정: 페이지 전체 */
body {
margin: 0;
}
/*-----------------------------------------------------------------*/
/*------------------------ 메뉴칸 -------------------------*/
/*-----------------------------------------------------------------*/
.headA {
width: 400px;
justify-content: center;
top: -145px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(235, 246, 255, 0.72);
position: fixed;
display: block;
border-radius: 15px;
transition-duration: 0.7s;
cursor : pointer;
font-family: 'Cinzel', serif;
z-index: 99;
}
.headA:hover {
transition-duration: 0.7s;
top: 190px;
display: block;
}
.headA > span > a {
font-weight: 1000;
font-size: 1.8rem;
border-radius: 15px;
transition-duration: 0.5s;
display: block;
color: #000000;
}
.headA > span > a:hover{
text-align: center;
color: #ffffff;
cursor : pointer;
border-radius: 15px;
box-shadow: 1px 1px 5px 1px black;
letter-spacing: 1rem;
background-color: rgb(0, 0, 0);
transition-duration: 0.5s;
animation: Line 0.8s infinite;
}
.headA a {
display: block;
padding: 15px;
color: inherit;
font-size: 14px;
text-decoration: none;
}
.headA i{
animation: flash 3s infinite;
}
.conA > .container{
left: 100px;
/*display: flex;*/
}
/*-----------------------------------------------------------------*/
/*------------------------ 메인 -------------------------*/
/*-----------------------------------------------------------------*/
.conA {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../Resource/2-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
min-width: 450px;
color: #FFF;
}
.conA > .container {
width: 100%;
height: 600px;
text-align: center;
justify-content: center;
display: inline-block;
box-shadow: 10px 10px 20px black;
text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
background-color: rgba(206, 206, 206, 0.84);
animation: Line 2s infinite;
}
.conA > .container > h1 {
color: #20273b;
font-size: 10rem;
margin-bottom: -1px;
font-family: 'Cinzel', serif;
}
.conA > .container > p{
margin-bottom: -50px;
color: #20273b;
font-size: 2.5rem;
font-weight: 1000;
font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------ 소개 -------------------------*/
/*-----------------------------------------------------------------*/
.conB {
background-color: #dbe3e7;
border-top: 5px solid #99b5b9;
}
.conB > .ABOUT {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conB > .container {
padding: 10%;
display: flex;
justify-content: center;
}
.conB > .container > .Img {
position: relative;
width: 600px;
height: 400px;
margin-right: 5%;
display: inline-block;
border-radius: 5px;
background-position: center;
background-size: cover;
background-image: url(../Resource/1.jpg);
}
.conB > .container > .cover{
width: 500px;
display: inline-block;
font-size: 25px;
font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------ 기술 -------------------------*/
/*-----------------------------------------------------------------*/
.conC {
background-color: #bcc6cb;
}
.conC > .SKILL {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conC > .container{
padding: 15%;
justify-content: center;
gap: 1rem;
display: flex;
flex-wrap: wrap;
}
.conC > .container > .text > div{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 15rem;
height: 15rem;
border: 0.3rem solid #dbe3e7;
transition-duration: 0.3s;
opacity: 0.5;
}
.conC > .container > .text > div:hover{
transition-duration: 0.5s;
animation: Line 2s infinite;
opacity: 1;
}
.conC > .container > div > h1{
color: #bbc4ca;
text-align: center;
font-size: 1.7rem;
width: 15.5rem;
height: 2rem;
border-radius: 5px;
background-color: #4b5e6e;
font-family: 'Cinzel', serif;
}
.conC > .container > .text > div > p {
font-family: 'Hahmlet', serif;
}
.conC > .container > div > .HTMLImg{
background-image: url(../Resource/HTML.png);
}
.conC > .container > div > .JavaImg{
background-image: url(../Resource/Java.png);
}
.conC > .container > div > .PythonImg{
background-image: url(../Resource/Python.png);
}
.conC > .container > div > .SQLImg{
background-image: url(../Resource/MySQL.png);
}
.conC > .container > div > .CSSImg{
background-image: url(../Resource/CSS.png);
}
.conC > .container > div > .JavaScriptImg{
background-image: url(../Resource/JavaScript.png);
}
/*-----------------------------------------------------------------*/
/*------------------------ 작업 -------------------------*/
/*-----------------------------------------------------------------*/
.conD {
background-color: #d9e1e6;
}
.conD > .PROJECTS {
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid black;
text-align: center;
font-family: 'Cinzel', serif;
}
.conD > .container{
padding: 10%;
display: flex;
justify-content: center;
gap: 10rem;
}
.conD > .container > .Project {
position: relative;
width: 35rem;
display: grid;
font-family: 'Hahmlet', serif;
grid-template-columns: repeat(1, 1fr);
overflow: hidden;
}
.conD > .container > div > .Img {
box-shadow: 3px 3px 20px black;
position: relative;
width: 40rem;
height: 30rem;
display: inline-block;
border-radius: 5px;
background-position: center;
background-size: cover;
}
.conD > .container > .Project > div {
height: 35px;
padding-top: 10px;
text-align: center;
border-radius: 5px;
color: white;
background-color: rgba(32, 39, 60, 0.59);
transition-duration: 0.5s;
}
.conD > .container > .Project > div:hover {
background-color: #20273b;
transition-duration: 0.5s;
cursor: pointer;
}
.conD > .container > .Project > h1 {
display: block;
margin-top: 0;
margin-bottom: 5px;
font-size: 3rem;
}
.conD > .container > .Project > h2 {
display: inline-block;
margin-bottom: 5px;
margin-top: 0;
}
.conD > .container > .Project > p{
display: block;
margin-top: 0;
}
.conD > .container > .Project > .Link > a {
letter-spacing: 0.5rem;
font-weight: 1000;
font-size: 1.5rem;
color: #d7dfe5;
font-family: 'Cinzel', serif;
text-decoration: none;
}
/*-----------------------------------------------------------------*/
/*------------------------ 연락 -------------------------*/
/*-----------------------------------------------------------------*/
.footA {
background-color: #20273b;
}
.footA > .CONTACT {
color: white;
padding-top: 2%;
position: relative;
font-size: 2rem;
border-bottom: 2px solid #ffffff;
text-align: center;
font-family: 'Cinzel', serif;
}
.footA > .tel {
display: flex;
justify-content: center;
padding: 7%;
}
.footA > .tel > ul {
justify-content: center;
list-style: none;
}
.footA > .tel > ul > li {
color: white;
font-weight: 1000;
font-size: 1.7rem;
font-family: 'Cinzel', serif;
}
.footD {
color: white;
font-size: 0.8rem;
text-align: center;
background-color: #20273c;
padding-bottom: 3%;
}
@media (max-width: 767px){
.conA > .container > h1 {
font-size: 4rem;
padding-top: 30%;
}
.conA > .container > p{
font-size: 1.5rem;
margin-bottom: 0px;
}
.conB > .container > .Img {
width: 300px;
height: 200px;
}
.conB > .container > .cover{
font-size: 1rem ;
}
.conC > .container > .text > div{
width: 7rem;
height: 7rem;
}
.conC > .container > div > h1{
font-size: 1.5rem;
width: 7rem;
height: 1.7rem;
}
.conC > .container{
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(3, 1fr);
}
.conD > .container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.conD > .container > div > .Img {
width: 25rem;
height: 18rem;
}
.conD > .container > .Project > div:hover {
background-color: #20273b;
transition-duration: 0.5s;
cursor: pointer;
}
.conD > .container > .Project > h1 {
font-size: 1.5rem;
}
.conD > .container > .Project > h2 {
font-size: 1rem;
}
.conD > .container > .Project > p{
font-size: 0.8rem;
}
.conD > .container > .Project > .Link > a {
font-size: 1rem;
}
.footA > .tel > ul > li {
font-size: 1.3rem;
}
}
/*-----------------------------------------------------------------*/
/*------------------------ 애니메이션 ----------------------*/
/*-----------------------------------------------------------------*/
@keyframes Line {
from{
border: 0.3rem solid rgb(153, 181, 185);
}
70%{
border: 0.3rem solid rgb(76, 95, 110);
}
30%{
border: 0.3rem solid rgb(153, 181, 185);
}
to{
border: 0.3rem solid rgb(188, 198, 203);
}
}
@keyframes flash {
from{
color: black;
}
50%{
color: white;
}
to{
color: #000000;
}
}
포트폴리오 설명
1. 배치는 홈 > 소개 > 기술 > 작업 > 연락 순으로 배치 해봤구요
2. 또 위에 숨겨진 메뉴버튼을 만들어서 마우스 이동시 튀어나오게 만들었고, 메뉴 클릭 시 그 위치로 이동(링크로 해서 약간 어색..자연스럽게 이동하는걸 아직 몰라서..)합니다ㅎㅎ
3. 모바일 반응형으로 만들어 보긴 했는데 .. 어색..
4. 작업 한것들을 gif로 추가해서 프로젝트 목록에 배치
질문과 지적 환영합니다!!~!~!~!
혹시나 필요하신거 있시면 댓글남겨주세용~
| container 태그 (0) | 2022.12.18 |
|---|---|
| br 태그 (0) | 2022.12.18 |
| b 태그 (0) | 2022.12.18 |
| a 태그 (0) | 2022.12.18 |
| 간단한 숫자게임 만들기.. (1) | 2022.12.14 |
아직 초보라서..코드가 엄청 허접+난잡합니다 ..
html 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>숫자클릭하기</title>
<link rel="stylesheet" href="nunber.css">
<script src="number.js" defer></script>
</head>
<body>
<div id="start">START</div>
<div class="back" ><div id="timer" hidden><span>00:00:00</span></div></div>
<div class="number-container" id="numberContainer" hidden>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
<div class="number" hidden></div>
</div>
<div id="Time" hidden></div>
</div>
</body>
</html>
css 코드
body {
background-color: #1c1d18;
}
body > .number-container {
position: absolute;
display: grid;
width: 600px;
height: 600px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
grid-template-columns: repeat(6, 1fr);
gap: 0.1rem;
}
.back {
position: absolute;
width: 1200px;
height: 800px;
left: 50%;
top: 47%;
transform: translate(-50%, -50%);
background-color: rgba(234, 255, 224, 0.92);
border-radius: 15px;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
z-index: 0;
animation: Line 1.5s infinite;
}
.number {
border: 0.3rem solid rgb(0, 0, 0, 0.4);
background-color: rgba(250, 250, 218, 0.8);
font-size: 4.1rem;
text-align: center;
border-radius: 15px;
font-weight: 500;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
}
.number:hover {
border: 0.3rem solid rgba(255, 255, 255);
background-color: rgb(172, 245, 221);
cursor : pointer;
animation: Line2 0.5s infinite;
}
.number:active{
margin: -10px;
font-size: 5rem;
background-color: rgb(172, 245, 221);
background-color: aquamarine;
box-shadow: #222222;
z-index: 9;
}
#timer {
position: fixed;
width: 590px;
height: 80px;
left: 50%;
top: 8%;
transform: translate(-50%, -50%);
border-radius: 15px;
background-color: rgba(250, 250, 218, 0.8);
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
font-size: 3.5rem;
text-align: center;
z-index: 9;
font-weight: 1000;
animation: Line 1.5s infinite;
}
#Time {
position: fixed;
width: 1200px;
height: 140px;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: rgb(5, 5, 5);
background-color: rgb(50, 115, 255, 0.6);
border: 0.125rem solid rgb(255, 255, 255, 0.7);
border-radius: 15px;
text-align: center;
font-size: 90px;
text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
box-shadow: 3px 3px 40px rgba(0, 0, 0, 0.9);;
font-weight: 1000;
z-index: 0;
-webkit-text-stroke: 1px rgb(255, 255, 255);
animation: Line 1.5s infinite;
}
#start {
position: fixed;
width: 400px;
height: 130px;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: rgb(75, 75, 75);
background-color: rgb(172, 245, 221);
border: 0.125rem solid rgb(210, 215, 225);
border-radius: 15px;
text-align: center;
text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.3);
font-size: 90px;
font-weight: 1000;
letter-spacing: 0.8rem;
-webkit-text-stroke: 2px black;
z-index: 8;
transition-duration: 0.7s;
}
#start:hover {
color: black;
background-color: aquamarine;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.9);
font-size: 95px;
letter-spacing: 1rem;
cursor : pointer;
animation: Line 1.5s infinite;
transition-duration: 0.7s;
}
@keyframes Line {
from{
border: 0.2rem solid rgb(43, 255, 0);
}
50%{
border: 0.2rem solid rgb(0, 238, 255);
}
to{
border: 0.2rem solid rgb(229, 255, 0);
}
}
@keyframes Line2 {
from{
border: 0.2rem solid rgb(0, 0, 0);
}
to{
border: 0.2rem solid rgb(255, 255, 255);
}
}
js 코드
let arr = []; // 랜덤문제배열
let arr2 = []; // 정답배열
let maxNum = 36; // 칸의 최대크기
let clickBox = document.querySelectorAll('.number'); // 숫자버튼
let numberBox = document.querySelector('.number-container');
let startButton = document.getElementById('start') //스타트버튼
let Timer = document.getElementById('timer');
let lastTime = document.getElementById('Time');
let xBox = document.getElementById('xbox');
let Back = document.getElementById('back');
const timerStatus = { RUNNING: true, STOP: false }; //enum처럼 상태 객체를 만들기
let nowStatus = timerStatus.STOP; //타이머의 상태를 저장하는 변수 (기본값: STOP)
let timerID = ""; // 타이머를 갱신
// 1~순서배열
for (let i = 1; i <= maxNum; i++) {
arr2.push(i);
}
// 배열의 길이가 칸의 최대크기랑 동일할때까지 랜덤숫자를 중복없이 배열에 추가한다.
while (arr.length !== maxNum){
let ran = random(maxNum)
if((arr.indexOf(ran)) === -1){
arr.push(ran);
}
}
// 랜덤숫자텍스트를 div에 순서대로 배치
clickBox.forEach(x => {
x.innerHTML += arr.shift() ;
})
// 숫자 클릭이벤트
clickBox.forEach(x => {
x.addEventListener('click', () => {
for(let i=1; i <= maxNum; i++){
if(parseInt(x.textContent) === arr2[0]){
x.style.backgroundColor = 'aquamarine';
x.style.border = '0.3rem solid rgb(0, 0, 0)';
arr2.shift();
}
}
if(arr2.length === 0){
lastTime.innerText = 'CLEAR TIME : ' + Timer.textContent;
lastTime.toggleAttribute('hidden');
lastTime.style.zIndex = 30;
Timer.toggleAttribute('hidden');
clickBox.forEach(x => {
x.toggleAttribute('hidden');
});
}
});
});
// 스타트버튼 클릭
startButton.addEventListener('click', ()=>{
startButton.toggleAttribute('hidden');
clickBox.forEach(x => {
x.toggleAttribute('hidden');
});
numberBox.toggleAttribute('hidden');
Timer.toggleAttribute('hidden');
nowStatus = timerStatus.RUNNING;
if(timerID === ""){
timerID = setInterval(timer_setting, 10);
}
});
//랜덤숫자생성
function random(limit){
return parseInt(Math.random() * limit +1);
}
//타이머
function timer_setting(){
let timerNowString = timer.textContent; //현재 진행된 타이머 시간
let times = timerNowString.split(':'); // ':'으로 문자열을 나눈다
let hour = +times[0];
let min = +times[1];
let sec = +times[2];
sec++;
if(sec >= 99){
min++;
sec = 0;
}
if(min >= 60){
hour++;
min = 0;
}
if(hour >= 60){
hour = 0;
clearInterval(timerID);
}
//1초가 지난 현재 타이머 시간을 문자열로 생성
const timerSting = `${format_setting(hour)}:${format_setting(min)}:${format_setting(sec)}`;
//타이머 시간 표시 부분에 문자열을 설정
timer.textContent = timerSting;
return timerSting;
}
//날짜나 시간 형식을 00:00:00 형태로 만들어주기 위한 포맷 형식
function format_setting(data){ //data -> 월, 일, 시, 분, 초 중에 하나가 들어옴 (string)
// data 를 문자열로 바꿧을 때 한 글자면 앞에 0을 붙여서 반환시킨다.
return data.toString().length < 2 ? '0' + data : data;
}
게임 설명
1. START 버튼을 누르면 게임 실행
2. div칸에 숫자가 랜덤하게 배치됨
3. 1부터 끝까지 순서대로 클릭
4. 마지막 숫자를 누르면 게임 종료
질문과 지적 환영합니다!!~!~!~!
혹시나 필요하신거 있시면 댓글남겨주세용~
System.out.println("hello world");
System.out.println("hello world"); // 문자열
System.out.println('a'); // 문자형
System.out.println(100); // 정수
System.out.println(3.14); //실수
format : 형식지정자 -> %알파벳
System.out.printf("형식지정자", 출력값);
System.out.printf("%s","문자열값"); // 문자열: String
System.out.printf("%a",'a'); // 문자형: Character
System.out.printf("%d",100); // 정수: Decimal
System.out.printf("%f",3.14); // 실수: Float
| 연산자 (2) | 2023.01.08 |
|---|---|
| equals (문자열 비교하기) (0) | 2023.01.08 |
| 변수 (0) | 2022.12.15 |
| 데이터 타입과 형변환 (0) | 2022.12.15 |
| 스캔(값 입력받기) (0) | 2022.12.15 |