홀수 짝수 판별 알림창 띄우기
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홀수 짝수 판별</title>
<style>
</style>
</head>
<body>
<input type="text" id="num1">
<button id="btn">확인</button>
<script>
function evenBox(a){
if((a%2)==0){
alert("짝수입니다");
}else{
alert("홀수입니다");
}
}
let btn = document.getElementById("btn");
btn.addEventListener("click",function(){
let num1 = Number(document.getElementById("num1").value);
evenBox(num1);
})
</script>
</body>
</html>
양수 음수 알림창 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>양수 음수 판별</title>
<style>
</style>
</head>
<body>
<input type="text" id="num1">
<button id="btn">확인</button>
<script>
function evenBox(a){
if(a>=0){
alert("양수입니다");
}else{
alert("음수입니다");
}
}
let btn = document.getElementById("btn");
btn.addEventListener("click",function(){
let num1 = Number(document.getElementById("num1").value);
evenBox(num1);
})
</script>
</body>
</html>
색깔 변하는 박스 만들기
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#displayBox{
width: 200px;
height: 100px;
border: 2px solid black;
}
</style>
</head>
<body>
<select onchange="changeBox()" id="colorBox">
<option value="pink">분홍색</option>
<option value="gold">골드</option>
<option value="blue">파랑색</option>
</select>
<div id="displayBox"></div>
<script>
function changeBox(){
let displayBox = document.getElementById("displayBox");
let colorBox = document.getElementById("colorBox").value;
// colorBox의 value값을 왼쪽에 있는 colorBox로 넘겨주세요
displayBox.style.background = colorBox;
// displayBox의 배경색을 colorBox가 갖고 있는 색으로 바꿔줘
}
</script>
</body>
</html>
글자이미지 변경 및 사진 변경 함수
위에 두개를 합친 버전입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색변경</title>
<style>
h1 {
font-size: 100px;
color: red;
animation: fontBox 3s linear infinite;
}
@keyframes fontBox{
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
#displayBox{
width: 300px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Fifa Online</h1>
<select id="colorBox" onchange="colorChange()">
<option value="pink">분홍색</option>
<option value="gold">골드</option>
<option value="blue">파랑색</option>
</select>
<div id="displayBox">반갑습니다</div>
<select id="player" onchange="changeBox()">
<option value="./img/heungmin.png">손흥민</option>
<option value="./img/umbappe.png">음바페</option>
<option value="./img/messi.png">메시</option>
</select>
<img src="./img/heungmin.png" id ="disBox" alt="heungmin">
<!-- <img src="./img/umbappe.png" id ="disBox" alt="umbappe">
<img src="./img/messi.png" id ="disBox" alt="messi"> -->
<script>
function colorChange(){
let colorBox = document.getElementById("colorBox").value;
let displayBox = document.getElementById("displayBox");
console.log(colorBox);
displayBox.style.color = colorBox;
}
function changeBox(){
let player = document.getElementById("player").value;
// player value값을 왼쪽에 있는 player 넘겨주세요
let disBox = document.getElementById("disBox");
// disBox id를 갖고 있는 이미지를 불러와서 그걸 disBox 변수로 지정하겠다!!
console.log(player);
disBox.src = player;
// disBox 이미지를 player 갖고 있는 이미지로 바꿔줘
}
</script>
</body>
</html>
구구단 함수 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색변경</title>
<style>
h1 {
font-size: 100px;
color: palegreen;
animation: fontBox 3s linear infinite;
}
@keyframes fontBox {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#displayBox {
width: 300px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>구구단</h1>
<select id="gugudan" onchange="mul()">
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
</select>
<!-- <button id="btn">출력</button> -->
<div id="displayBox">
</div>
<script>
function mul() {
let gugudan = document.getElementById("gugudan").value;
let displayBox = document.getElementById("displayBox");
let result = "";
for (let i = 2; i <= 9; i++) {
result += gugudan + "*" + i + "=" + gugudan *i + "<br>";
}
console.log(result);
displayBox.innerHTML = result;
}
displayBox.addEventListener("click",function(){
mul()
});
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 보수, 지역변수 전역변수, 파라미터 argument의 개념 (0) | 2023.06.29 |
|---|---|
| for 문 활용하여 수식 마음대로 표현하기 (0) | 2023.06.28 |
| javascript로 사칙 연산 계산기 / 숫자맞추기 게임 만들기 (0) | 2023.06.19 |
| 지하벙커 만들기 (0) | 2023.06.18 |
| 배열안에 있는 숫자중 가장 작은 값 출력하기 (0) | 2023.06.16 |
