728x90
★ 알고리즘 6
- 보안키 입력패드를 구현
■ HTML 코드
<div id="box">
<div id="secret">
<input type="text" id="pw" readonly maxlength="4">
<div id="digit">
<input type="button" value="7" name="num">
<input type="button" value="8" name="num">
<input type="button" value="9" name="num">
<input type="button" value="4" name="num">
<input type="button" value="5" name="num">
<input type="button" value="6" name="num">
<input type="button" value="1" name="num">
<input type="button" value="2" name="num">
<input type="button" value="3" name="num">
<input type="button" value="0" name="num">
<input type="button" value="del" name="del">
<input type="button" value="enter" name="enter">
<div style="clear:both;"></div>
</div>
</div>
<div id="desc">
<h1>비밀번호 입력</h1>
<h3>사용법</h3>
<ol>
<li>숫자 4자리를 입력한다.</li>
<li>enter를 누른다.</li>
</ol>
<h3>구현할 것</h3>
<ul>
<li>숫자 버튼을 눌러 입력한다.</li>
<li>del 버튼을 눌러 삭제한다.</li>
<li>4자리 이상 입력이 되지 않는다.</li>
<li>정답 암호 : 0425</li>
<li>암호가 틀리면 붉게 변한다.</li>
<li>암호가 맞으면 파랗게 변한다.</li>
<li>3회 틀리면 작동이 불가능하다.</li>
<li>상단 숫자키로 입력할 수 있다.</li>
<li>우측 숫자키로 입력할 수 있다.</li>
<li>백스페이스, Delete, Enter 키로 입력할 수 있다.</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>■ CSS 코드
<style>
#box {
width: 890px;
margin: 30px auto;
}
#secret {
border: 1px solid #aaa;
border-radius: 5px;
background-color: #eee;
float: left;
width: 500px;
}
#desc {
float: left;
width: 350px;
padding-left: 30px;
color: #555;
}
#desc li {
font-size: 16px;
margin-bottom: 5px;
font-family :fantasy;
}
#secret #pw {
border: 1px dashed #aaa;
font-size: 4.5em;
color: #555;
width: 390px;
display: block;
margin: 30px auto;
padding: 10px;
padding-left: 40px;
letter-spacing: .85em;
outline: none;
}
#secret #digit {
padding-left: 23px;
padding-bottom: 30px;
}
#secret #digit input {
display: block;
float: left;
border: 1px solid #ccc;
font-size: 5.5em;
text-align: center;
color: #555;
padding: 10px;
width: 140px;
height: 140px;
margin: 5px;
text-shadow: -1px -1px 2px gray;
background: white;/* linear-gradient(#ccc, white, #ccc); */
outline: none;
}
#secret #digit input:nth-last-child(2)
, #secret #digit input:nth-last-child(3) {
font-size: 2.5em;
}
</style>■ JavaScript
<script>
var num, pw, enter, del;
var maxCount = 0;
window.onload = function() {
num = document.all.num;
pw = document.all.pw;
enter = document.all.enter;
del = document.all.del;
for (var i=0; i<num.length; i++) {
num[i].onclick = function() {
if (pw.value.length < 4) {
pw.value += event.srcElement.value;
}
};
}
del.onclick = function() {
pw.value = pw.value.substr(0, pw.value.length-1);
document.bgColor = "white";
};
enter.onclick = function() {
if (pw.value == "0425") {
alert("암호가 일치합니다.");
document.bgColor = "#66b3ff";
} else {
alert("암호가 일치하지 않습니다.");
document.bgColor = "#ff8080";
if (maxCount >= 2) {
document.bgColor = "#bb0000";
del.onclick = null;
enter.onclick = null;
}
maxCount++;
}
};
};
window.onkeydown = function() {
var c = event.keyCode;
if (c == 49 || c == 97) {
num[6].click();
} else if (c == 50 || c == 98) {
num[7].click();
} else if (c == 51 || c == 99) {
num[8].click();
} else if (c == 52 || c == 100) {
num[3].click();
} else if (c == 53 || c == 101) {
num[4].click();
} else if (c == 54 || c == 102) {
num[5].click();
} else if (c == 55 || c == 103) {
num[0].click();
} else if (c == 56 || c == 104) {
num[1].click();
} else if (c == 57 || c == 105) {
num[2].click();
} else if (c == 48 || c == 96) {
num[9].click();
} else if (c == 13) {
enter.click();
} else if (c == 110 || c == 8 || c == 46) {
del.click();
}
};
</script>■ 실행 결과
★ 알고리즘 7
- 고양이/강아지를 생성 후 테이블에 넣는다.
- 만들기 버튼을 눌러 고양이/강아지를 생성.
- 드래그로 이동시켜 테이블에 넣는다.
- 테이블에 넣어진 고양이/강아지는 더 이상 이동이 불가능
- document.elementFromPoint(x, y)
- document.elementsFromPoint(x, y)
■ HTML 코드
<h1>고양이/강아지 보관함</h1>
<table id="tbl1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>만들기</h2>
<div>
<input type="button" value="고양이 만들기" id="btncat">
<input type="button" value="강아지 만들기" id="btndog">
</div>
<div id="holder"></div>■ CSS 코드
<style>
body {
margin: 30px;
}
#tbl1 { border: 1px solid black; border-collapse: collapse; width: 1250px; }
#tbl1 td { border: 1px solid black; width: 250px; height: 188px; }
#tbl1 td img {
border-radius: 5px;
display: block;
}
#holder {
margin-top: 10px;
border: 1px solid black;
width: 250px; height: 188px;
}
.item {
position: absolute;
border-radius: 5px;
}
</style>■ JavaScript
<script>
let isDown = false;
let x = 0;
let y = 0;
let item;
document.getElementById('btncat').addEventListener('click', function() {
create('cat');
});
document.getElementById('btndog').addEventListener('click', function() {
create('dog');
});
function create(name) {
document.getElementById('holder').innerHTML = '';
let n =parseInt(Math.random()*5) + 1;
const img = document.createElement('img');
img.setAttribute('src', `images/${name}0${n}.jpg`);
img.classList.add('item');
document.getElementById('holder').appendChild(img);
}
window.addEventListener('mousedown', function(event) {
if (event.target.classList.contains('item')) {
isDown = true;
x = event.offsetX;
y = event.offsetY;
item = event.target;
}
});
window.addEventListener('mousemove', function(event) {
if (isDown) {
item.style.left = event.clientX - x + 'px';
item.style.top = event.clientY - y + 'px';
event.stopPropagation();
return false;
}
});
window.addEventListener('mouseup', function(event) {
isDown = false;
let td = getTd(event);
if (td) {
td.appendChild(event.target);
event.target.classList.remove('item');
}
});
function getTd(event) {
//해당 포인트에 어떤 태그들이 존재하는지 확인
const list = document.elementsFromPoint(event.clientX, event.clientY);
for (let i=0; i<list.length; i++) {
if (list[i].nodeName == 'TD') {
return list[i];
}
}
}
</script>■ 실행 결과
★ 알고리즘 8
- 텍스트를 입력하면 화면을 진동시키시오.
■ HTML
<h1>제목입니다.</h1>
<input type="text" id="txt1" autofocus>
<hr>
<h2>다른 내용입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, molestias deserunt repudiandae quas odio quis incidunt? Esse unde cupiditate sed dolores ut natus corrupti, adipisci explicabo repudiandae quod dignissimos asperiores?</p>
<p>Excepturi consequatur architecto consequuntur impedit animi sint inventore rerum quas nemo officiis modi hic tenetur, sit aliquid earum! Ullam iusto, nam enim ea numquam atque a amet incidunt laboriosam est!</p>
<p>Eveniet obcaecati error ratione, ex iure laudantium distinctio itaque. Obcaecati amet, voluptatum fugit dignissimos repudiandae laboriosam ullam. Vitae perspiciatis veritatis qui repudiandae necessitatibus ab soluta saepe pariatur, blanditiis sit ipsam!</p>
<p>Eveniet ab totam consectetur! Possimus corporis ea quod quas debitis hic reprehenderit repellat? Velit quas totam officia in. Ratione, quasi! Molestiae tenetur laudantium maiores. Sit nesciunt distinctio minima nostrum dolorum.</p>
<h1>Table</h1>
<table id="tbl1">
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Facere, autem ut.</td>
<td>Aliquid, veritatis repellat.</td>
<td>Eaque, expedita amet?</td>
<td>Ratione, dignissimos obcaecati!</td>
</tr>
<tr>
<td>Provident, ducimus reprehenderit?</td>
<td>Sunt, aspernatur dolorum?</td>
<td>Eum, magnam distinctio?</td>
<td>Animi, tempora quis.</td>
<td>Dignissimos, rerum explicabo?</td>
</tr>
<tr>
<td>Nulla, eum molestiae!</td>
<td>Ipsum, a necessitatibus!</td>
<td>In, numquam nam?</td>
<td>Expedita, voluptas molestiae.</td>
<td>Officiis, optio voluptatum?</td>
</tr>
<tr>
<td>Ea, quis minus.</td>
<td>Sint, autem perspiciatis.</td>
<td>Vel, dignissimos blanditiis!</td>
<td>Non, saepe ut?</td>
<td>Perspiciatis, rem in?</td>
</tr>
<tr>
<td>Odit, expedita provident?</td>
<td>Aut, autem itaque.</td>
<td>Ea, beatae consequatur!</td>
<td>Libero, fugit ratione.</td>
<td>A, recusandae nemo.</td>
</tr>
<tr>
<td>Quis, rerum aperiam?</td>
<td>Dolor, neque quaerat!</td>
<td>Omnis, nihil. Aspernatur?</td>
<td>Maiores, nobis sunt.</td>
<td>Fuga, nulla voluptate?</td>
</tr>
<tr>
<td>Debitis, sunt sed!</td>
<td>Eum, reprehenderit. Fugiat?</td>
<td>Dolorem, voluptatem adipisci!</td>
<td>Expedita, ad perferendis.</td>
<td>Eum, doloribus ut.</td>
</tr>
<tr>
<td>Atque, quidem expedita.</td>
<td>Animi, inventore maiores.</td>
<td>Nostrum, ut rem!</td>
<td>Accusamus, nisi corrupti.</td>
<td>Voluptatem, natus maiores.</td>
</tr>
</table>■ CSS 코드
<style>
body {
margin: 30px;
}
#txt1 {
font-size: 3em;
width: 100%;
}
#tbl1 { border: 1px solid black; border-collapse: collapse; }
#tbl1 td { border: 1px solid black; padding: 4px; width: 100px; }
</style>■ JavaScript
<script>
window.onload = function() {
document.getElementById("txt1").onkeydown = function() {
var m = [-5, 5, 0];
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
setTimeout(function() {
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
}, 5);
setTimeout(function() {
document.body.style.transform = "translate(0px, 0px)";
}, 20);
};
};
</script>■ 실행 결과
★ 알고리즘 9
- 텍스트를 입력하면 화면을 진동시키시오.
- 연타를 하면 배경이 점점 붉게 변합니다.
- 마지막 타이핑 후 1초가 지나면 배경이 돌아옵니다.
■ HTML 코드
<h1>제목입니다.</h1>
<input type="text" id="txt1" autofocus>
<hr>
<h2>다른 내용입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, molestias deserunt repudiandae quas odio quis incidunt? Esse unde cupiditate sed dolores ut natus corrupti, adipisci explicabo repudiandae quod dignissimos asperiores?</p>
<p>Excepturi consequatur architecto consequuntur impedit animi sint inventore rerum quas nemo officiis modi hic tenetur, sit aliquid earum! Ullam iusto, nam enim ea numquam atque a amet incidunt laboriosam est!</p>
<p>Eveniet obcaecati error ratione, ex iure laudantium distinctio itaque. Obcaecati amet, voluptatum fugit dignissimos repudiandae laboriosam ullam. Vitae perspiciatis veritatis qui repudiandae necessitatibus ab soluta saepe pariatur, blanditiis sit ipsam!</p>
<p>Eveniet ab totam consectetur! Possimus corporis ea quod quas debitis hic reprehenderit repellat? Velit quas totam officia in. Ratione, quasi! Molestiae tenetur laudantium maiores. Sit nesciunt distinctio minima nostrum dolorum.</p>
<h1>Table</h1>
<table id="tbl1">
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Facere, autem ut.</td>
<td>Aliquid, veritatis repellat.</td>
<td>Eaque, expedita amet?</td>
<td>Ratione, dignissimos obcaecati!</td>
</tr>
<tr>
<td>Provident, ducimus reprehenderit?</td>
<td>Sunt, aspernatur dolorum?</td>
<td>Eum, magnam distinctio?</td>
<td>Animi, tempora quis.</td>
<td>Dignissimos, rerum explicabo?</td>
</tr>
<tr>
<td>Nulla, eum molestiae!</td>
<td>Ipsum, a necessitatibus!</td>
<td>In, numquam nam?</td>
<td>Expedita, voluptas molestiae.</td>
<td>Officiis, optio voluptatum?</td>
</tr>
<tr>
<td>Ea, quis minus.</td>
<td>Sint, autem perspiciatis.</td>
<td>Vel, dignissimos blanditiis!</td>
<td>Non, saepe ut?</td>
<td>Perspiciatis, rem in?</td>
</tr>
<tr>
<td>Odit, expedita provident?</td>
<td>Aut, autem itaque.</td>
<td>Ea, beatae consequatur!</td>
<td>Libero, fugit ratione.</td>
<td>A, recusandae nemo.</td>
</tr>
<tr>
<td>Quis, rerum aperiam?</td>
<td>Dolor, neque quaerat!</td>
<td>Omnis, nihil. Aspernatur?</td>
<td>Maiores, nobis sunt.</td>
<td>Fuga, nulla voluptate?</td>
</tr>
<tr>
<td>Debitis, sunt sed!</td>
<td>Eum, reprehenderit. Fugiat?</td>
<td>Dolorem, voluptatem adipisci!</td>
<td>Expedita, ad perferendis.</td>
<td>Eum, doloribus ut.</td>
</tr>
<tr>
<td>Atque, quidem expedita.</td>
<td>Animi, inventore maiores.</td>
<td>Nostrum, ut rem!</td>
<td>Accusamus, nisi corrupti.</td>
<td>Voluptatem, natus maiores.</td>
</tr>
</table>■ CSS 코드
<style>
body {
margin: 30px;
}
#txt1 {
font-size: 3em;
width: 100%;
}
#tbl1 { border: 1px solid black; border-collapse: collapse; }
#tbl1 td { border: 1px solid black; padding: 4px; width: 100px; }
</style>■ JavaScript
<script>
var color = 0;
var timer = 0;
var gap = 0;
window.onload = function() {
document.getElementById("txt1").onkeydown = function() {
var m = [-5, 5, 0];
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
setTimeout(function() {
document.body.style.transform = "translate(" + (m[parseInt(Math.random() * 2)]) + "px, " + (m[parseInt(Math.random() * 2)]) + "px)";
}, 5);
setTimeout(function() {
document.body.style.transform = "translate(0px, 0px)";
}, 20);
document.body.style.backgroundColor = "rgba(255,0,0," + color + ")";
color += 0.01;
gap = 0;
};
};
timer = setInterval(function() {
gap++;
if (gap > 2) {
gap = 0;
timer = 0;
color = 0;
document.body.style.backgroundColor = "white";
}
}, 1000);
</script>■ 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 50 - TRANSITION 알고리즘 - 2 (0) | 2023.04.28 |
|---|---|
| JAVASCRIPT STEP 49 - TRANSITION 알고리즘 - 1 (0) | 2023.04.28 |
| JAVASCRIPT STEP 47 - STYLE 다양한 알고리즘 - 1 (3) | 2023.04.28 |
| JAVASCRIPT STEP 46 - Scroll (0) | 2023.04.28 |
| JAVASCRIPT STEP 45 - Calendar (0) | 2023.04.28 |
