[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>학습 도우미</title>
<link rel ="stylesheet" href="뽑기화면.css">
</head>
<body>
<div><input class="mi" type="number" /></div>
<div><input class="ma" type="number" /></div>
<button class="btn">뽑기</button>
<div id="result"></div>
<script>
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
const result = document.getElementById('result');
let mi = document.querySelector('.mi').value.trim(),
ma = document.querySelector('.ma').value.trim();
if(!mi || !ma) {
result.textContent = '';
return false;
}
mi = Number(mi);
ma = Number(ma);
if(mi > ma) [mi, ma] = [ma, mi];
const ran = Math.floor(Math.random()*(ma-mi+1)+mi);
result.textContent = ran;
});
</script>
</body>
</html>
CSS 코드
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
background:url(./뽑기화면.png) no-repeat;
background-size:cover;
}
.btn {
font-size: 25px;
padding: 15px 30px;
background-color: black;
color: white;
border-radius: 50px;
font-family: sans-serif;
font-weight: bold;
}
.btn:focus {
outline: none;
}
.btn:hover {
background-color: white;
color: black;
}
#result {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 100px;
font-weight: bold;
color: white
}
이렇게 버튼을 누르면 랜덤으로 숫자가 나오게 만들었는데,, 여기서 체크박스를 만들어서
체크박스를 체크 해두면 숫자가 중복으로 나오지 않게 만들고 싶은데,, 도와주실분 계신가요 ㅠㅠㅠㅠ
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>학습 도우미</title>
<link rel ="stylesheet" href="뽑기화면.css">
</head>
<body>
<div><input class="mi" type="number" /></div>
<div><input class="ma" type="number" /></div>
<button class="btn">뽑기</button>
<div id="result"></div>
<script>
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
const result = document.getElementById('result');
let mi = document.querySelector('.mi').value.trim(),
ma = document.querySelector('.ma').value.trim();
if(!mi || !ma) {
result.textContent = '';
return false;
}
mi = Number(mi);
ma = Number(ma);
if(mi > ma) [mi, ma] = [ma, mi];
const ran = Math.floor(Math.random()*(ma-mi+1)+mi);
result.textContent = ran;
});
</script>
</body>
</html>
CSS 코드
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
background:url(./뽑기화면.png) no-repeat;
background-size:cover;
}
.btn {
font-size: 25px;
padding: 15px 30px;
background-color: black;
color: white;
border-radius: 50px;
font-family: sans-serif;
font-weight: bold;
}
.btn:focus {
outline: none;
}
.btn:hover {
background-color: white;
color: black;
}
#result {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 100px;
font-weight: bold;
color: white
}
이렇게 버튼을 누르면 랜덤으로 숫자가 나오게 만들었는데,, 여기서 체크박스를 만들어서
체크박스를 체크 해두면 숫자가 중복으로 나오지 않게 만들고 싶은데,, 도와주실분 계신가요 ㅠㅠㅠㅠ
#html css #html css 적용 #html css javascript #html css 연결 #html css js #html css 예제 사이트 #html css 불러오기 #html css 강의 #html css 차이 #html css 템플릿
