html+css+javascript 입문 코드로 작성된 과일 머신
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style>
*{margin: 0;padding: 0;}
ul{
list-style: none;
display: flex;
justify-content: space-between;
}
li{
float: left;
}
img{
width: 50px;
height: 50px;}
.box{
width:540px;
height:800px;
margin:0 auto;
border: 2px black solid;
}
table{
border: 3px #777777 solid;
margin: 0 auto;
}
.borderBlack{
border: 2px black solid;
}
.num{
width: 30px;
}
.sBtn{
width: 15px;
}
#shili{
display: flex;
justify-content: space-between;
}
style>
head>
<body>
<div class="box" id='0'>
<table border="0" cellspacing="0" cellpadding="0"
>
<td id='1' class="borderBlack"><img src="images/logo_01.gif" alt="">td>
<td id='2' class="borderBlack"><img src="images/logo_02.gif" alt="">td>
<td id='3' class="borderBlack"><img src="images/logo_03.gif" alt="">td>
<td id='4' class="borderBlack"><img src="images/logo_04.gif" alt="">td>
<td id='5' class="borderBlack"><img src="images/logo_05.gif" alt="">td>
<td id='6' class="borderBlack"><img src="images/logo_06.gif" alt="">td>
<td id='7' class="borderBlack"><img src="images/logo_07.gif" alt="">td>
<td id='8' class="borderBlack"><img src="images/logo_08.gif" alt="">td>
tr>
<tr>
<td id='28' class="borderBlack"><img src="images/logo_01.gif" alt="">td>
<td colspan="6" rowspan="6">
：br>
7：X2br>
：X3br>
BAR：X50 bar br>
td>
<td id='9' class="borderBlack"><img src="images/logo_09.gif" alt="">td>
tr>
<tr>
<td id='27'class="borderBlack"><img src="images/logo_09.gif" alt="">td>
<td id='10'class="borderBlack"> <img src="images/logo_01.gif" alt="">td>
tr>
<tr>
<td id='26' class="borderBlack"> <img src="images/logo_08.gif" alt="">td>
<td id='11' class="borderBlack"><img src="images/logo_02.gif" alt="">td>
tr>
<tr>
<td id='25' class="borderBlack"><img src="images/logo_07.gif" alt="">td>
<td id='12' class="borderBlack"><img src="images/logo_03.gif" alt="">td>
tr>
<tr>
<td id='24' class="borderBlack"><img src="images/logo_06.gif" alt="">td>
<td id='13' class="borderBlack"><img src="images/logo_04.gif" alt="">td>
tr>
<tr>
<td id='23' class="borderBlack"><img src="images/logo_05.gif" alt="">td>
<td id='14' class="borderBlack"><img src="images/logo_05.gif" alt="">td>
tr>
<tr>
<td id='22' class="borderBlack"><img src="images/logo_04.gif" alt="">td>
<td id='21' class="borderBlack"><img src="images/logo_03.gif" alt="">td>
<td id='20' class="borderBlack"><img src="images/logo_02.gif" alt="">td>
<td id='19' class="borderBlack"><img src="images/logo_01.gif" alt="">td>
<td id='18' class="borderBlack"><img src="images/logo_09.gif" alt="">td>
<td id='17' class="borderBlack"><img src="images/logo_08.gif" alt="">td>
<td id='16' class="borderBlack"><img src="images/logo_07.gif" alt="">td>
<td id='15' class="borderBlack"><img src="images/logo_06.gif" alt="">td>
tr>
table>
<p><input type="button" id='start' value=" "/>p>
<div id='shili'>
<img src="images/logo_01.gif" alt="" />
<img src="images/logo_02.gif" alt="" />
<img src="images/logo_03.gif" alt="" />
<img src="images/logo_04.gif" alt="" />
<img src="images/logo_05.gif" alt="" />
<img src="images/logo_06.gif" alt="" />
<img src="images/logo_07.gif" alt="" />
<img src="images/logo_08.gif" alt="" />
<img src="images/logo_09.gif" alt="" />
div>
<ul id='setbtn'>
<li>
<p><input type="button" id="" value="+" class="sBtn"/>
<input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num" />p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
<li>
<p><input type="button" id="" value="+" class="sBtn"/><input type="button" id="" value="-" class="sBtn"/>p>
<p><input type="text" id="" value="" class="num"/>p>
li>
ul>
<div>
<input type="text" value='100' id='coin' readonly="readonly"/><input type="button" value=" " id='insertCoins'/>
div>
div>
body>
html>
<script src="index.js">script>
js
1 var startbtn=document.getElementById("start");
2 var ID=1;
3 var IDX=0;
4 var resultID=0;
5 startbtn.οnclick=function(){
6 //
7 var a=Math.round(Math.random()*20+20);
8 var b=0;
9 var time;
10 time=setInterval(function(){
11 b++;
12 if(b==a){
13 resultID=ID;
14 clearInterval(time);
15 caculate();
16 }else{
17 if(ID>28){
18 ID=1;
19 var returnBack=document.getElementById(IDX.toString());
20 returnBack.style.border='2px black solid';
21 IDX=0;
22 var pickedImg = document.getElementById(ID.toString());
23 pickedImg.style.border='2px red solid';
24
25 }else{
26 var pickedImg = document.getElementById(ID.toString());
27 pickedImg.style.border='2px red solid';
28 var returnBack=document.getElementById(IDX.toString());
29 returnBack.style.border='2px black solid';
30 ID++;
31 IDX++;
32 }
33 }
34 },100)
35 }
36
37 var ulSetBtn=document.getElementById("setbtn").children;
38 //
39 for(var i=0;i){
40 var p=ulSetBtn[i].lastElementChild;
41 p.firstElementChild.value=0;
42 p.firstElementChild.setAttribute("readonly",'readonly');
43 }
44 //
45 for (let i =0;i){
46 var btn00=ulSetBtn[i].firstElementChild.firstElementChild;
47 btn00.addEventListener('click',function(){
48 var x=ulSetBtn[i].lastElementChild.firstElementChild;
49 x.value=parseInt(x.value)+1;
50 if(i!=7){
51 coin.value=parseInt(coin.value)-1;
52 }else{
53 coin.value=parseInt(coin.value)-10;
54 }
55 })
56 var btn01=ulSetBtn[i].firstElementChild.lastElementChild;
57 btn01.addEventListener('click',function(){
58 var x=ulSetBtn[i].lastElementChild.firstElementChild;
59 if(x.value>0){
60 x.value=parseInt(x.value)-1;
61 coin.value=parseInt(coin.value)+1;
62 }
63 })
64 }
65 //
66 var insertCoins=document.getElementById("insertCoins");
67 var coin=document.getElementById("coin");
68 insertCoins.οnclick=function(){
69 coin.value=parseInt(coin.value)+100;
70 }
71 //
72 function caculate(){
73 var result=(resultID-1)%8
74 switch(result){
75 case 0 :
76 var x=ulSetBtn[0].lastElementChild.firstElementChild;
77 coin.value=parseInt(coin.value)+parseInt(x.value)*2;
78 break;
79 case 1 :
80 var x=ulSetBtn[1].lastElementChild.firstElementChild;
81 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
82 break;
83 case 2 :
84 var x=ulSetBtn[2].lastElementChild.firstElementChild;
85 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
86 break;
87 case 3 :
88 var x=ulSetBtn[3].lastElementChild.firstElementChild;
89 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
90 break;
91 case 4 :
92 var x=ulSetBtn[4].lastElementChild.firstElementChild;
93 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
94 break;
95 case 5 :
96 var x=ulSetBtn[5].lastElementChild.firstElementChild;
97 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
98 break;
99 case 6 :
100 var x=ulSetBtn[6].lastElementChild.firstElementChild;
101 coin.value=parseInt(coin.value)+parseInt(x.value)*3;
102 break;
103 case 7 :
104 var x=ulSetBtn[7].lastElementChild.firstElementChild;
105 coin.value=parseInt(coin.value)+parseInt(x.value)*50;
106 break;
107 case 8 :
108 var x=ulSetBtn[8].lastElementChild.firstElementChild;
109 coin.value=parseInt(coin.value)+parseInt(x.value)*2;
110 break;
111 }
112 for(var i=0;i){
113 var p=ulSetBtn[i].lastElementChild;
114 p.firstElementChild.value=0;}
115 }
116
전재 대상:https://www.cnblogs.com/lurenjiazrj/p/8365616.html
관심 있을 수 있는
