2개의 주사위
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.<br><br>
<img alt="" src="./images/sai_1.gif" id="d1">
<img alt="" src="./images/sai_6.gif" id="d2"><br><br>
<p id="dic1">합계</p><br>
<script type="text/javascript">
function dice() {
// ceil : 올림
let r1 = Math.ceil(Math.random()*6);
let r2 = Math.ceil(Math.random()*6);
// document.getElementById("d1").src="./images/sai_"+r1+".gif";
// document.getElementById("d2").src="./images/sai_"+r2+".gif";
// 이런식으로도 접근 가능
document.images[0].src = "./images/sai_"+r1+".gif";
document.images[1].src = "./images/sai_"+r2+".gif";
}
</script>
</body>
</html>
해석
이 코드는 주사위 이미지명의 끝번호가 1~6일 경우 유효한 예제이다.
Math.random()*6을 올림처리하여 1~6까지 랜덤의 수를 구하고,
img태그의 id값이나 images의 요소번호로 img태그에 접근하여 이미지 주소값의 마지막 번호롤 바꿔준다.
이미지 주소값이 일정하지 않을 경우 예제
</script>
<h2>4번문제</h2>
<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.<br><br>
<img alt="" id="random1" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif">
<img alt="" id="random2" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"><br><br>
<button type="button" onclick="radom()">주사위를 굴린다</button>
<script type="text/javascript">
function radom() {
let randomNum1 = Math.round(Math.random()*6);
let randomNum2 = Math.round(Math.random()*6);
if(randomNum1 == 1){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"
}else if(randomNum1 == 2){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhnQZy%2Fbtq6LW5qS62%2FAOJu3uPFLeaVVkjAkZVUs1%2Fimg.gif"
}else if(randomNum1 == 3){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYRuiD%2Fbtq6HQd0tDp%2Fhs6OP3kdsLqWKV5bHWZzbK%2Fimg.gif"
}else if(randomNum1 == 4){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG8rVr%2Fbtq6JxZz1hP%2F3WhKeYaAKkL6S11B3LPfuk%2Fimg.gif"
}else if(randomNum1 == 5){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEMxkY%2Fbtq6Gp8KkpC%2FFKtnqwR5HBXMkGjzxgclfK%2Fimg.gif"
}else if(randomNum1 == 6){
document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNdGpW%2Fbtq6DRYA7iQ%2FPxZBpN1flIbnRi17XxtiF1%2Fimg.gif"
}
if(randomNum2 ==1){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"
}else if(randomNum2 == 2){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhnQZy%2Fbtq6LW5qS62%2FAOJu3uPFLeaVVkjAkZVUs1%2Fimg.gif"
}else if(randomNum2 == 3){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYRuiD%2Fbtq6HQd0tDp%2Fhs6OP3kdsLqWKV5bHWZzbK%2Fimg.gif"
}else if(randomNum2 == 4){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG8rVr%2Fbtq6JxZz1hP%2F3WhKeYaAKkL6S11B3LPfuk%2Fimg.gif"
}else if(randomNum2 == 5){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEMxkY%2Fbtq6Gp8KkpC%2FFKtnqwR5HBXMkGjzxgclfK%2Fimg.gif"
}else if(randomNum2 == 6){
document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNdGpW%2Fbtq6DRYA7iQ%2FPxZBpN1flIbnRi17XxtiF1%2Fimg.gif"
}
}
'IT > JSON' 카테고리의 다른 글
| [Html+JavaScript] 스크립트에서 테이블 생성하여 JSON 데이터 넣기/XML 데이터 넣기 (0) | 2021.06.08 |
|---|---|
| [Html+JS+JSON] html에서 json 데이터 불러오기(접근방법) (0) | 2021.06.08 |
| [Html+JS+JSON] JSON정의/JSON파일 예시/html 접근 예시/json → String형변환(stringify)/String → json(parse) (0) | 2021.06.08 |
| [Html+JavaScript] 배열의 연산/getElementsByTagName (0) | 2021.06.08 |
| [Html+JavaScript] 환영합니다 현재 시각은 (0) | 2021.06.07 |