<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
console.log("myclick");
var objs = document.querySelectorAll(".mydiv");
var arr = [
1,2,3,4,5, 6,7,8,9,10,
11,12,13,14,15, 16,17,18,19,20,
21,22,23,24,25, 26,27,28,29,30,
31,32,33,34,35, 36,37,38,39,40,
41,42,43,44,45
];
console.log(arr)
for (var i = 0; i < 1000; i++) {
var rnd = parseInt(Math.random()*45);
var a = arr[0];
var b = arr[rnd];
arr[0]=b
arr[rnd]=a
}
console.log(arr);
objs[0].innerHTML = arr[0];
objs[1].innerHTML = arr[1];
objs[2].innerHTML = arr[2];
objs[3].innerHTML = arr[3];
objs[4].innerHTML = arr[4];
objs[5].innerHTML = arr[5];
}
</script>
</head>
<body>
<table border="1">
<tr>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="lotto인생한방" onclick="myclick()"/>
</td>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
var arr = [
1,2,3,4,5, 6,7,8,9,10,
11,12,13,14,15, 16,17,18,19,20,
21,22,23,24,25, 26,27,28,29,30,
31,32,33,34,35, 36,37,38,39,40,
41,42,43,44,45
];
for (var i = 0; i < 1000; i++) {
var rnd = parseInt(Math.random()*45);
var a = arr[0];
var b = arr[rnd];
arr[0]=b
arr[rnd]=a
}
$(".mydiv").eq(0).html(arr[0]);
$(".mydiv").eq(1).html(arr[1]);
$(".mydiv").eq(2).html(arr[2]);
$(".mydiv").eq(3).html(arr[3]);
$(".mydiv").eq(4).html(arr[4]);
$(".mydiv").eq(5).html(arr[5]);
}
$(document).ready(function(){
$("#btn").bind("click", function (event) {
myclick();
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
<td><div class="mydiv" >__</div></td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="lotto인생한방" id="btn"/>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
width: 100px;
text-align: right;
}
</style>
<script type="text/javascript">
function myclick(obj){
var obj_it = document.querySelector("#it");
var str_new = obj.value;
var str_old = obj_it.value;
obj_it.value = str_old + str_new
console.log("myclick",obj.value);
console.log("myclick",str_new,str_old);
}
function mycall(){
var obj_it = document.querySelector("#it");
alert("calling\n" + obj_it.value);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="1" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="2" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="3" onclick="myclick(this)"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="4" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="5" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="6" onclick="myclick(this)"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="7" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="8" onclick="myclick(this)"/>
</td>
<td >
<input type="button" class="btn" value="9" onclick="myclick(this)"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="0" onclick="myclick(this)"/>
</td>
<td colspan="2" >
<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
</td>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
width: 100px;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function mycall(){
alert("calling\n" + $("#it").val());
}
function myclick(obj){
var str_new = obj.value;
var str_old = $("#it").val();
$("#it").val(str_old + str_new);
}
$(document).ready(function(){
$(".btn").bind("click", function (event) {
//console.log(event.target);
myclick(event.target);
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="1" />
</td>
<td >
<input type="button" class="btn" value="2" />
</td>
<td >
<input type="button" class="btn" value="3" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="4" />
</td>
<td >
<input type="button" class="btn" value="5" />
</td>
<td >
<input type="button" class="btn" value="6" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="7" />
</td>
<td >
<input type="button" class="btn" value="8" />
</td>
<td >
<input type="button" class="btn" value="9" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="0" />
</td>
<td colspan="2" >
<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
</td>
</tr>
</table>
</body>
</html>
또 다른 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#it{
width: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var it = document.querySelector("#it");
var btn = document.querySelectorAll(".btn");
for(i = 0; i < btn.length; i++){
btn[i].addEventListener('click', function(){numclick(event)});
}
}
function numclick(event){
console.log(event.target.value);
var num_val = event.target.value;
var str_new = num_val;
var str_old = it.value;
var resStr = str_old+str_new;
console.log("str_old" + str_old);
console.log("str_new" + str_new);
console.log(resStr);
it.value = str_old + str_new;
}
function myclick(){
var nums = it.value;
alert(nums + " 으로 전화거는 중...")
it.value="";
}
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it" dir="rtl"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="1"/>
</td>
<td>
<input type="button" class="btn" value="2"/>
</td>
<td>
<input type="button" class="btn" value="3"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="4"/>
</td>
<td>
<input type="button" class="btn" value="5"/>
</td>
<td>
<input type="button" class="btn" value="6"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="7"/>
</td>
<td>
<input type="button" class="btn" value="8"/>
</td>
<td>
<input type="button" class="btn" value="9"/>
</td>
</tr>
<td>
<input type="button" class="btn" value="0"/>
</td >
<td colspan="2">
<input type="button" id="btn_call" value="CALL" onclick="myclick()"/>
</td>
<tr>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
width: 100px;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
var str =""
$(document).ready(function(){
$(".btn").bind("click", function (event) {
str += $(this).val();
$("#it").val(str);
});
$("#btn_call").bind("click", function(){
alert("calling\n" + str )
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it"/>
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="1" id="btn"/>
</td>
<td >
<input type="button" class="btn" value="2" id="btn" />
</td>
<td >
<input type="button" class="btn" value="3" id="btn" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="4" id="btn" />
</td>
<td >
<input type="button" class="btn" value="5" id="btn" />
</td>
<td >
<input type="button" class="btn" value="6" id="btn" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="7" id="btn" />
</td>
<td >
<input type="button" class="btn" value="8" id="btn" />
</td>
<td >
<input type="button" class="btn" value="9" id="btn" />
</td>
</tr>
<tr>
<td >
<input type="button" class="btn" value="0" id="btn" />
</td>
<td colspan="2" >
<input type="button" id="btn_call" value="CALL" onclick="mycall()"/>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
width: 30px;
}
</style>
<script type="text/javascript">
function myclick(){
// 가위바위보!
console.log("myclick");
var obj_com = document.querySelector("#itCom");
var obj_mine = document.querySelector("#itMine");
var obj_result = document.querySelector("#itResult");
var com = ""
var mine = obj_mine.value;
var result = ""
console.log(com,mine,result);
var rnd = Math.random();
console.log(rnd)
if (rnd > 0.66) {
com = "가위" ;
} else if (rnd > 0.33) {
com = "바위" ;
} else {
com = "보" ;
}
console.log(com)
if (com == "가위" && mine == "가위") { result ="비김" };
if (com == "가위" && mine == "바위") { result ="이김" };
if (com == "가위" && mine == "보") { result ="짐" };
if (com == "바위" && mine == "가위") { result ="짐" };
if (com == "바위" && mine == "바위") { result ="비김" };
if (com == "바위" && mine == "보") { result ="이김" };
if (com == "보" && mine == "가위") { result ="이김" };
if (com == "보" && mine == "바위") { result ="짐" };
if (com == "보" && mine == "보") { result ="비김" };
obj_com.value = com;
obj_result.value = result;
}
</script>
</head>
<body>
<table border="1px">
<tr>
<td>나:</td>
<td>
<input type="text" class="it" id="itMine"/>
</td>
</tr>
<tr>
<td>컴:</td>
<td>
<input type="text" class="it" id="itCom"/>
</td>
</tr>
<tr>
<td>결과:</td>
<td>
<input type="text" class="it" id="itResult"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="게임하기" onclick="myclick()"/>
</td>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
width: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
// 가위바위보!
var com = "";
var mine = $("#itMine").val();
var result = ""
var rnd = Math.random();
if (rnd > 0.66) {
com = "가위" ;
} else if (rnd > 0.33) {
com = "바위" ;
} else {
com = "보" ;
}
console.log(com)
if (com == "가위" && mine == "가위") { result ="비김" };
if (com == "가위" && mine == "바위") { result ="이김" };
if (com == "가위" && mine == "보") { result ="짐" };
if (com == "바위" && mine == "가위") { result ="짐" };
if (com == "바위" && mine == "바위") { result ="비김" };
if (com == "바위" && mine == "보") { result ="이김" };
if (com == "보" && mine == "가위") { result ="이김" };
if (com == "보" && mine == "바위") { result ="짐" };
if (com == "보" && mine == "보") { result ="비김" };
$("#itCom").val(com);
$("#itResult").val(result);
}
$(document).ready(function(){
$("#btn").bind("click", function (event) {
myclick();
});
$(".it").bind("keyup", function (event) {
if (event.key == "Enter") {
myclick();
}
});
});
</script>
</head>
<body>
<table border="1px">
<tr>
<td>나:</td>
<td>
<input type="text" class="it" id="itMine"/>
</td>
</tr>
<tr>
<td>컴:</td>
<td>
<input type="text" class="it" id="itCom"/>
</td>
</tr>
<tr>
<td>결과:</td>
<td>
<input type="text" class="it" id="itResult"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="게임하기" id="btn" />
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it_f, #it_l{
width: 20px;
}
</style>
<script type="text/javascript">
function star(cnt){
var ret = "";
for(var i = 0; i<cnt; i++){
ret += "*";
}
ret += "\n"
return ret;
}
function myclick(){
console.log("myclick");
var obj_f = document.querySelector("#it_f");
var obj_l = document.querySelector("#it_l");
var obj_ta = document.querySelector("#ta");
var a = obj_f.value;
var b = obj_l.value;
var aa = parseInt(a);
var bb = parseInt(b);
console.log(aa, bb);
var txt = "";
/* txt += "*\n";
txt += "**\n"; */
for(var i=aa; i <= bb; i++){
txt += star(i);
}
obj_ta.value = txt;
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>첫번째 별 수</td>
<td>
<input type="text" id="it_f"/>
</td>
</tr>
<tr>
<td>끝번째 별 수</td>
<td>
<input type="text" id="it_l"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="별빛이내린다아" onclick="myclick()"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" rows="10" cols="15"></textarea>
</td>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it_f, #it_l{
width: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function star(cnt){
var ret = "";
for(var i = 0; i<cnt; i++){
ret += "*";
}
ret += "\n"
return ret;
}
function myclick(){
var a = $("#it_f").val();
var b = $("#it_l").val();
var aa = parseInt(a);
var bb = parseInt(b);
var txt = "";
/* txt += "*\n";
txt += "**\n"; */
for(var i=aa; i <= bb; i++){
txt += star(i);
}
$("#ta").val(txt);
}
$(document).ready(function(){
$("#btn").bind("click", function (event) {
myclick();
});
$(".star").bind("keyup", function (event) {
if (event.key == "Enter") {
myclick();
}
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>첫번째 별 수</td>
<td>
<input type="text" id="it_f" class="star"/>
</td>
</tr>
<tr>
<td>끝번째 별 수</td>
<td>
<input type="text" id="it_l" class="star"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="별빛이내린다아" id="btn" />
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" rows="10" cols="15"></textarea>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
width: 25px;
}
#mydiv{
height: 200px;
}
</style>
<script type="text/javascript">
var com = "123";
function myclick(){
console.log("myclick");
var obj_it = document.querySelector("#it");
var obj_div = document.querySelector("#mydiv");
var mine = obj_it.value;
var s = getStrike(com, mine);
var b = getBall(com, mine);
var str_new = mine + " " + s + "S" + b +"B"+"<br/>\n";
var str_old = obj_div.innerHTML;
obj_div.innerHTML = str_old + str_new;
obj_it.value = "";
if(s==3) {
setTimeout(function(){
alert("야구게임\n 당신이 이겼습니다")
},1);
}
console.log("s ", s,"b ", s)
}
function getStrike(com, mine){
var cnt = 0
var c1 = com.substring(0,1);
var c2 = com.substring(1,2);
var c3 = com.substring(2,3);
var m1 = mine.substring(0,1);
var m2 = mine.substring(1,2);
var m3 = mine.substring(2,3);
if (c1 == m1) cnt++;
if (c2 == m2) cnt++;
if (c3 == m3) cnt++;
return cnt
}
function getBall(com, mine){
var cnt = 0
var c1 = com.substring(0,1);
var c2 = com.substring(1,2);
var c3 = com.substring(2,3);
var m1 = mine.substring(0,1);
var m2 = mine.substring(1,2);
var m3 = mine.substring(2,3);
if (c1 == m2 || c1 == m3) cnt++;
if (c2 == m1 || c2 == m3) cnt++;
if (c3 == m1 || c3 == m2) cnt++;
return cnt
}
function setCom(){
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr)
for (var i = 0; i < 1000; i++) {
var rnd = parseInt(Math.random()*9);
var a = arr[0];
var b = arr[rnd];
arr[0] = b
arr[rnd] = a
}
com = arr[0] + "" + arr[1] + "" + arr[2]; /* 문자로 바꿔주기 */
console.log("com : ",com);
}
setCom();
</script>
</head>
<body>
<table border="1">
<tr>
<td>야구게임</td>
<td>
<input type="text" id="it" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="맞추기" onclick="myclick()"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="mydiv"/>
</td>
</tr>
</table>
</body>
</html>
//---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#it{
width: 25px;
}
#mydiv{
height: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
var com = "123";
function myclick(){
var mine = $("#it").val();
var s = getStrike(com, mine);
var b = getBall(com, mine);
var str_new = mine + " " + s + "S" + b +"B"+"<br/>\n";
var str_old = $("#mydiv").html();
$("#mydiv").html(str_old + str_new);
$("#it").val("");
if(s==3) {
// 방법 1
//setTimeout(() => alert("야구게임\n 당신이 이겼습니다"), 1);
// 방법 2
//setTimeout((function(){ alert("야구게임\n 당신이 이겼습니다")})(),1);
// 방법 3
setTimeout(() => {alert("야구게임\n 당신이 이겼습니다")}, 1);
}
console.log("s ", s,"b ", s)
}
function getStrike(com, mine){
var cnt = 0
var c1 = com.substring(0,1);
var c2 = com.substring(1,2);
var c3 = com.substring(2,3);
var m1 = mine.substring(0,1);
var m2 = mine.substring(1,2);
var m3 = mine.substring(2,3);
if (c1 == m1) cnt++;
if (c2 == m2) cnt++;
if (c3 == m3) cnt++;
return cnt
}
function getBall(com, mine){
var cnt = 0
var c1 = com.substring(0,1);
var c2 = com.substring(1,2);
var c3 = com.substring(2,3);
var m1 = mine.substring(0,1);
var m2 = mine.substring(1,2);
var m3 = mine.substring(2,3);
if (c1 == m2 || c1 == m3) cnt++;
if (c2 == m1 || c2 == m3) cnt++;
if (c3 == m1 || c3 == m2) cnt++;
return cnt
}
function setCom(){
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr)
for (var i = 0; i < 1000; i++) {
var rnd = parseInt(Math.random()*9);
var a = arr[0];
var b = arr[rnd];
arr[0] = b
arr[rnd] = a
}
com = arr[0] + "" + arr[1] + "" + arr[2]; /* 문자로 바꿔주기 */
console.log("com : ",com);
}
$(document).ready(function(){
$("#btn").bind("click", function (event) {
myclick();
});
$("#it").bind("keyup", function (event) {
if (event.key == "Enter") {
myclick();
}
});
setCom();
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>야구게임</td>
<td>
<input type="text" id="it" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="맞추기" id="btn"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="mydiv"/>
</td>
</tr>
</table>
</body>
</html>