<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<div class="colorscripter-code" style="color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#fafafa;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #e5e5e5"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#666;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div><div style="line-height:130%">7</div><div style="line-height:130%">8</div><div style="line-height:130%">9</div><div style="line-height:130%">10</div><div style="line-height:130%">11</div><div style="line-height:130%">12</div><div style="line-height:130%">13</div><div style="line-height:130%">14</div><div style="line-height:130%">15</div><div style="line-height:130%">16</div><div style="line-height:130%">17</div><div style="line-height:130%">18</div><div style="line-height:130%">19</div><div style="line-height:130%">20</div><div style="line-height:130%">21</div><div style="line-height:130%">22</div><div style="line-height:130%">23</div><div style="line-height:130%">24</div><div style="line-height:130%">25</div><div style="line-height:130%">26</div><div style="line-height:130%">27</div><div style="line-height:130%">28</div><div style="line-height:130%">29</div><div style="line-height:130%">30</div><div style="line-height:130%">31</div><div style="line-height:130%">32</div><div style="line-height:130%">33</div><div style="line-height:130%">34</div><div style="line-height:130%">35</div><div style="line-height:130%">36</div><div style="line-height:130%">37</div><div style="line-height:130%">38</div><div style="line-height:130%">39</div><div style="line-height:130%">40</div><div style="line-height:130%">41</div><div style="line-height:130%">42</div><div style="line-height:130%">43</div><div style="line-height:130%">44</div><div style="line-height:130%">45</div><div style="line-height:130%">46</div><div style="line-height:130%">47</div><div style="line-height:130%">48</div><div style="line-height:130%">49</div><div style="line-height:130%">50</div><div style="line-height:130%">51</div><div style="line-height:130%">52</div><div style="line-height:130%">53</div><div style="line-height:130%">54</div><div style="line-height:130%">55</div><div style="line-height:130%">56</div><div style="line-height:130%">57</div><div style="line-height:130%">58</div><div style="line-height:130%">59</div><div style="line-height:130%">60</div><div style="line-height:130%">61</div><div style="line-height:130%">62</div><div style="line-height:130%">63</div><div style="line-height:130%">64</div><div style="line-height:130%">65</div><div style="line-height:130%">66</div><div style="line-height:130%">67</div><div style="line-height:130%">68</div><div style="line-height:130%">69</div><div style="line-height:130%">70</div><div style="line-height:130%">71</div><div style="line-height:130%">72</div><div style="line-height:130%">73</div><div style="line-height:130%">74</div><div style="line-height:130%">75</div><div style="line-height:130%">76</div><div style="line-height:130%">77</div><div style="line-height:130%">78</div><div style="line-height:130%">79</div><div style="line-height:130%">80</div><div style="line-height:130%">81</div><div style="line-height:130%">82</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">&lt;!--</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">&nbsp;&nbsp;*&nbsp;다섯마리의&nbsp;말들&nbsp;경주시합&nbsp;게임&nbsp;만들기</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">&nbsp;&nbsp;-&nbsp;다섯마리의&nbsp;말을&nbsp;그림으로&nbsp;준비시킨다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">&nbsp;&nbsp;-&nbsp;지정된&nbsp;거리에&nbsp;먼저&nbsp;도착한&nbsp;순서대로&nbsp;등수를&nbsp;매겨준다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">&nbsp;&nbsp;(콜백&nbsp;함수:&nbsp;최종수행이끝나고처리하는함수&nbsp;를&nbsp;이용하여&nbsp;등수&nbsp;구하기)</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">--&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">!DOCTYPE</span>&nbsp;<span style="color:#0a9989">html</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">html</span>&nbsp;<span style="color:#0a9989">lang</span>=<span style="color:#df5000">"ko"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">head</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">meta</span>&nbsp;<span style="color:#0a9989">charset</span>=<span style="color:#df5000">"UTF-8"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">meta</span>&nbsp;<span style="color:#0a9989">name</span>=<span style="color:#df5000">"viewport"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">content</span>=<span style="color:#df5000">"width=device-width,&nbsp;initial-scale=1.0"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">title</span><span style="color:#010101">&gt;</span>ex01_경주.html<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">title</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">script</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">link</span>&nbsp;<span style="color:#0a9989">rel</span>=<span style="color:#df5000">"stylesheet"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">href</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">script</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">script</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">script</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://kit.fontawesome.com/df66332deb.js"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">crossorigin</span>=<span style="color:#df5000">"anonymous"</span><span style="color:#066de2"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#63a35c">'use&nbsp;strict'</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#a71d5d">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;ani1&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>&nbsp;<span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;ani2&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>&nbsp;<span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;ani3&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>&nbsp;<span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;ani4&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>&nbsp;<span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;ani5&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>&nbsp;<span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;let&nbsp;sw&nbsp;=&nbsp;!$("img").data("sw");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#startBtn"</span>).on(<span style="color:#63a35c">"click"</span>,&nbsp;<span style="color:#a71d5d">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;function&nbsp;changeImage()&nbsp;{</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;$("img").data("sw",sw);</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;if(sw&nbsp;==&nbsp;true)&nbsp;$("img.horseImg1").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;else&nbsp;$("img.horseImg2").attr("src","horse1.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;&nbsp;&nbsp;if($(".horseImg1").visible)&nbsp;$(".horseImg1").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;&nbsp;&nbsp;else&nbsp;$(".horseImg2").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;}</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;setTimeout("changeImage()",200);</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#horse1"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},ani1,&nbsp;<span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"번개"</span>,ani1)});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#horse2"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},ani2,&nbsp;<span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"태양"</span>,ani2)});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#horse3"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},ani3,&nbsp;<span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"청룡"</span>,ani3)});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#horse4"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},ani4,&nbsp;<span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"스톰"</span>,ani4)});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#63a35c">"#horse5"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginLeft:&nbsp;<span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},ani5,&nbsp;<span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"플래시"</span>,ani5)});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;cnt&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;<span style="color:#0099cc">0</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">let</span>&nbsp;str&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;<span style="color:#63a35c">''</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a71d5d">function</span>&nbsp;ranking(horse,&nbsp;time){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cnt<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;time&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">/</span>&nbsp;<span style="color:#0099cc">1000</span>&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#63a35c">""</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;time.<span style="color:#066de2">substring</span>(<span style="color:#0099cc">0</span>,<span style="color:#0099cc">4</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;`${cnt}등:&nbsp;${horse}&nbsp;(시간:&nbsp;${time}초)<span style="color:#ff3399"></span><span style="color:#a71d5d">&lt;</span>br<span style="color:#ff3399"></span><span style="color:#a71d5d">/</span><span style="color:#ff3399"></span><span style="color:#a71d5d">&gt;</span>`;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo.innerHTML&nbsp;<span style="color:#ff3399"></span><span style="color:#a71d5d">=</span>&nbsp;str;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">head</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">body</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">p</span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">br/</span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">p</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"container"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">button</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"startBtn"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"btn&nbsp;btn-primary"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">i</span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"fa-solid&nbsp;fa-play"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">i</span><span style="color:#010101">&gt;</span>&nbsp;출발<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">button</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">hr/</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse1"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">img</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">&gt;</span>번개<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse2"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">img</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse2.png"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg2"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">width</span>=<span style="color:#df5000">"110px"</span><span style="color:#0a9989">/</span><span style="color:#010101">&gt;</span>태양<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse3"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">img</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">&gt;</span>청룡<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse4"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">img</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse2.png"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg2"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">width</span>=<span style="color:#df5000">"110px"</span><span style="color:#0a9989">/</span><span style="color:#010101">&gt;</span>스톰<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse5"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#066de2">img</span>&nbsp;<span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span>&nbsp;<span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">&gt;</span>플래시<span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#010101">&lt;</span><span style="color:#066de2">div</span>&nbsp;<span style="color:#0a9989">id</span>=<span style="color:#df5000">"demo"</span><span style="color:#0a9989"></span><span style="color:#010101">&gt;</span><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">body</span><span style="color:#010101">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101">&lt;</span><span style="color:#010101">/</span><span style="color:#066de2">html</span><span style="color:#010101">&gt;</span></div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#e5e5e5;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div>"><div data-ke-class="article"><div class="colorscripter-code" style="color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#fafafa;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #e5e5e5"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#666;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div><div style="line-height:130%">7</div><div style="line-height:130%">8</div><div style="line-height:130%">9</div><div style="line-height:130%">10</div><div style="line-height:130%">11</div><div style="line-height:130%">12</div><div style="line-height:130%">13</div><div style="line-height:130%">14</div><div style="line-height:130%">15</div><div style="line-height:130%">16</div><div style="line-height:130%">17</div><div style="line-height:130%">18</div><div style="line-height:130%">19</div><div style="line-height:130%">20</div><div style="line-height:130%">21</div><div style="line-height:130%">22</div><div style="line-height:130%">23</div><div style="line-height:130%">24</div><div style="line-height:130%">25</div><div style="line-height:130%">26</div><div style="line-height:130%">27</div><div style="line-height:130%">28</div><div style="line-height:130%">29</div><div style="line-height:130%">30</div><div style="line-height:130%">31</div><div style="line-height:130%">32</div><div style="line-height:130%">33</div><div style="line-height:130%">34</div><div style="line-height:130%">35</div><div style="line-height:130%">36</div><div style="line-height:130%">37</div><div style="line-height:130%">38</div><div style="line-height:130%">39</div><div style="line-height:130%">40</div><div style="line-height:130%">41</div><div style="line-height:130%">42</div><div style="line-height:130%">43</div><div style="line-height:130%">44</div><div style="line-height:130%">45</div><div style="line-height:130%">46</div><div style="line-height:130%">47</div><div style="line-height:130%">48</div><div style="line-height:130%">49</div><div style="line-height:130%">50</div><div style="line-height:130%">51</div><div style="line-height:130%">52</div><div style="line-height:130%">53</div><div style="line-height:130%">54</div><div style="line-height:130%">55</div><div style="line-height:130%">56</div><div style="line-height:130%">57</div><div style="line-height:130%">58</div><div style="line-height:130%">59</div><div style="line-height:130%">60</div><div style="line-height:130%">61</div><div style="line-height:130%">62</div><div style="line-height:130%">63</div><div style="line-height:130%">64</div><div style="line-height:130%">65</div><div style="line-height:130%">66</div><div style="line-height:130%">67</div><div style="line-height:130%">68</div><div style="line-height:130%">69</div><div style="line-height:130%">70</div><div style="line-height:130%">71</div><div style="line-height:130%">72</div><div style="line-height:130%">73</div><div style="line-height:130%">74</div><div style="line-height:130%">75</div><div style="line-height:130%">76</div><div style="line-height:130%">77</div><div style="line-height:130%">78</div><div style="line-height:130%">79</div><div style="line-height:130%">80</div><div style="line-height:130%">81</div><div style="line-height:130%">82</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999"><!--</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999"> * 다섯마리의 말들 경주시합 게임 만들기</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999"> - 다섯마리의 말을 그림으로 준비시킨다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999"> - 지정된 거리에 먼저 도착한 순서대로 등수를 매겨준다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999"> (콜백 함수: 최종수행이끝나고처리하는함수 를 이용하여 등수 구하기)</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#999999">--></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">!DOCTYPE</span> <span style="color:#0a9989">html</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">html</span> <span style="color:#0a9989">lang</span>=<span style="color:#df5000">"ko"</span><span style="color:#0a9989"></span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">head</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">meta</span> <span style="color:#0a9989">charset</span>=<span style="color:#df5000">"UTF-8"</span><span style="color:#0a9989"></span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">meta</span> <span style="color:#0a9989">name</span>=<span style="color:#df5000">"viewport"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">content</span>=<span style="color:#df5000">"width=device-width, initial-scale=1.0"</span><span style="color:#0a9989"></span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">title</span><span style="color:#010101">></span>ex01_경주.html<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">title</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">script</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">link</span> <span style="color:#0a9989">rel</span>=<span style="color:#df5000">"stylesheet"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">href</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span><span style="color:#0a9989"></span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">script</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">script</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span><span style="color:#066de2"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">script</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"https://kit.fontawesome.com/df66332deb.js"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">crossorigin</span>=<span style="color:#df5000">"anonymous"</span><span style="color:#066de2"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#63a35c">'use strict'</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#a71d5d">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> ani1 <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span> <span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> ani2 <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span> <span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> ani3 <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span> <span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> ani4 <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span> <span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> ani5 <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> Math.random()<span style="color:#ff3399"></span><span style="color:#a71d5d">*</span><span style="color:#0099cc">5000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span> <span style="color:#0099cc">4000</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// let sw = !$("img").data("sw");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#startBtn"</span>).on(<span style="color:#63a35c">"click"</span>, <span style="color:#a71d5d">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// function changeImage() {</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// $("img").data("sw",sw);</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// if(sw == true) $("img.horseImg1").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// else $("img.horseImg2").attr("src","horse1.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// if($(".horseImg1").visible) $(".horseImg1").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// else $(".horseImg2").attr("src","horse2.png");</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// }</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// setTimeout("changeImage()",200);</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#horse1"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%"> marginLeft: <span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> },ani1, <span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"번개"</span>,ani1)});</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#horse2"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%"> marginLeft: <span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> },ani2, <span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"태양"</span>,ani2)});</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#horse3"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%"> marginLeft: <span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> },ani3, <span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"청룡"</span>,ani3)});</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#horse4"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%"> marginLeft: <span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> },ani4, <span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"스톰"</span>,ani4)});</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#63a35c">"#horse5"</span>).animate({</div><div style="padding:0 6px; white-space:pre; line-height:130%"> marginLeft: <span style="color:#63a35c">"500px"</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> },ani5, <span style="color:#a71d5d">function</span>(){ranking(<span style="color:#63a35c">"플래시"</span>,ani5)});</div><div style="padding:0 6px; white-space:pre; line-height:130%"> });</div><div style="padding:0 6px; white-space:pre; line-height:130%"> });</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> cnt <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> <span style="color:#0099cc">0</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">let</span> str <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> <span style="color:#63a35c">''</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#a71d5d">function</span> ranking(horse, time){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> cnt<span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#ff3399"></span><span style="color:#a71d5d">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> time <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> time <span style="color:#ff3399"></span><span style="color:#a71d5d">/</span> <span style="color:#0099cc">1000</span> <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#63a35c">""</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> time <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> time.<span style="color:#066de2">substring</span>(<span style="color:#0099cc">0</span>,<span style="color:#0099cc">4</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> str <span style="color:#ff3399"></span><span style="color:#a71d5d">+</span><span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> `${cnt}등: ${horse} (시간: ${time}초)<span style="color:#ff3399"></span><span style="color:#a71d5d"><</span>br<span style="color:#ff3399"></span><span style="color:#a71d5d">/</span><span style="color:#ff3399"></span><span style="color:#a71d5d">></span>`; </div><div style="padding:0 6px; white-space:pre; line-height:130%"> demo.innerHTML <span style="color:#ff3399"></span><span style="color:#a71d5d">=</span> str;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">script</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">head</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">body</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">p</span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">br/</span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">p</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"container"</span><span style="color:#0a9989"></span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">button</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"startBtn"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"btn btn-primary"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">i</span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"fa-solid fa-play"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">i</span><span style="color:#010101">></span> 출발<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">button</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">hr/</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse1"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">img</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">></span>번개<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse2"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">img</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse2.png"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg2"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">width</span>=<span style="color:#df5000">"110px"</span><span style="color:#0a9989">/</span><span style="color:#010101">></span>태양<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse3"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">img</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">></span>청룡<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse4"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">img</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse2.png"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg2"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">width</span>=<span style="color:#df5000">"110px"</span><span style="color:#0a9989">/</span><span style="color:#010101">></span>스톰<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"horse5"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#066de2">img</span> <span style="color:#0a9989">src</span>=<span style="color:#df5000">"horse1.png"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">class</span>=<span style="color:#df5000">"horseImg1"</span><span style="color:#0a9989"></span> <span style="color:#0a9989">width</span>=<span style="color:#df5000">"100px"</span><span style="color:#0a9989">/</span><span style="color:#010101">></span>플래시<span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#010101"><</span><span style="color:#066de2">div</span> <span style="color:#0a9989">id</span>=<span style="color:#df5000">"demo"</span><span style="color:#0a9989"></span><span style="color:#010101">></span><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">div</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">body</span><span style="color:#010101">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#010101"><</span><span style="color:#010101">/</span><span style="color:#066de2">html</span><span style="color:#010101">></span></div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#e5e5e5;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div></div></div><p> </p><div class="figure-video" data-ke-type="video" data-video-url="https://kakaotv.daum.net/embed/player/cliplink/rv4y8kndcscc97h7n9qlrf5uh@my?service=daum_cafe" data-video-host="kakaotv" data-video-play-service="daum_cafe" data-video-width="712" data-video-height="400" data-ke-style="alignCenter" data-video-thumbnail="https://thumb.kakaocdn.net/dna/kamp/source/rv4y8kndcscc97h7n9qlrf5uh/thumbs/2.jpg?credential=TuMuFGKUIcirOSjFzOpncbomGFEIdZWK&expires=33270793877&signature=EV%2BUs%2BXMwx3YeIYLZceZtqBXfZo%3D" data-ke-mobile-mobileStyle="widthFull" data-video-origin-width="712" data-video-origin-height="400"><iframe src="https://kakaotv.daum.net/embed/player/cliplink/rv4y8kndcscc97h7n9qlrf5uh@my?service=daum_cafe&ptoken=v2_8c73212bb9e4384ebeab51e62fc65e808001a88b780857fc971504c956895e5100a5eb3ba3a3e718a06a2333414b76c5e2a7a3ddee7505b627b19cde11" width="712" height="400" frameborder="0" scrolling="no" allowfullscreen="" allow="encrypted-media"></iframe><div class="figcaption"></div></div><p> </p><p>gif 없이 jpg이미지를 번갈아서 출력하는 건 구현하지 못했습니다</p><p>달력은 주말에 다시 해보겠습니다</p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
안소은
24.04.24 과제
안소은
추천 0
조회 33
24.04.24 00:23
댓글 1
다음검색
첫댓글 콜백함수처리로 랭킹순위구하기 좋습니다.
나머지도 꼭 해보세요. 수고하셨습니다.