1 건의
키보드 입력 검색결과





화면에 나타나는 문장(자바 문법)을 정확히 입력해야 다음 화면으로 넘어가도록 구현해보았습니다.



<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JAVA TAJA</title>

<style type="text/css">

html {

height: 100%;

}


body {

height: 100%;

margin: 0;

background-color: #FFFFF6;

}


.main {

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

height: 370px;

width: 700px;

position: absolute;

display: block;


}


.site-name {

display: block;

font-size: 110px;

color: #00004B;

font-weight: bold;

font-style: italic;

text-align: center;

}


.sentence {

font-size: 40px;

color: #A6A6A6;

margin: 50px auto 15px 65px;

font-weight: lighter;

font-family: sans-serif;

display: inline-block;

}


span{

font-size: 40px;

color: #A6A6A6;

margin: 50px auto 15px 65px;

font-weight: lighter;

font-family: sans-serif;

display: inline-block;

}


input[type="text"]{

background-color: transparent;

border-style: solid;

border-width: 0px 0px 2px 0px;

border-color: #CE3636;

font-size: 40px;

font-family: sans-serif;

font-weight: lighter; 

color : black;

outline: none;

width: 81%;

display: inline-block;

margin-left: 65px;

transition: 0.9s;

}


input[type="text"]:focus{

border-color: green;

}


.shakeIt{

animation: shake 0.3s;

animation-iteration-count: 1;

}


@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

 }


.refresh-enter {

width: 160px;

height: 60px;

display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    float: right;

    margin: 5px 50px 0 0;

}


.refresh-spin {

background-image: url('images/refresh.png');

background-repeat: no-repeat;

background-size: 100% 100%;

width: 45px;

height: 45px;

display: inline-block;

cursor: pointer;

-webkit-animation-duration: 200ms;

    -webkit-animation-iteration-count: 1;

    -webkit-animation-timing-function: ease-out;

    -moz-animation-name: spin;

    -moz-animation-duration: 200ms;

    -moz-animation-iteration-count: 1;

    -moz-animation-timing-function: ease-out;

    -ms-animation-name: spin;

    -ms-animation-duration: 200ms;

    -ms-animation-iteration-count: 1;

    -ms-animation-timing-function: ease-out;

    animation-name: spin;

    animation-duration: 200ms;

    animation-iteration-count: 1;

    animation-timing-function: ease-out;

}


#refresh{

background-image: url('images/refresh.png');

background-repeat: no-repeat;

background-size: 100% 100%;

width: 45px;

height: 45px;

display: inline-block;

cursor: pointer;

}


.spin-refresh{

-webkit-animation-name: spin;

    -webkit-animation-duration: 200ms;

    -webkit-animation-iteration-count: 1;

    -webkit-animation-timing-function: ease-out;

    -moz-animation-name: spin;

    -moz-animation-duration: 200ms;

    -moz-animation-iteration-count: 1;

    -moz-animation-timing-function: ease-out;

    -ms-animation-name: spin;

    -ms-animation-duration: 200ms;

    -ms-animation-iteration-count: 1;

    -ms-animation-timing-function: ease-out;

    animation-name: spin;

    animation-duration: 200ms;

    animation-iteration-count: 1;

    animation-timing-function: ease-out;

}


@-moz-keyframes spin {

    from { -moz-transform: rotate(0deg); }

    to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }

}


button{

width: 100px;

height: 45px;

color: white;

font-size: 20px;

border-radius: 8px;

background-color: #CE3636;

outline: none;

transition: 0.4s;

display:  inline-block;

}


button:hover {

color: #CE3636;

background-color: white;

}


.spinner {

  width: 150px;

  height: 200px;

  font-size: 70px;

  display: none;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  position: absolute;

}


.spinner > div {

  width: 6px;

  display: inline-block;

  height: 100%;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;

  animation: sk-stretchdelay 1.2s infinite ease-in-out;

}


.spinner .rect1 {

background-color: red;

  -webkit-animation-delay: -1.2s;

  animation-delay: -1.2s;

}

.spinner .rect2 {

background-color: orange;

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}


.spinner .rect3 {

background-color: yellow;

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}


.spinner .rect4 {

background-color: green;

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}


.spinner .rect5 {

background-color: blue;

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

.spinner .rect6 {

background-color: navy;

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}

.spinner .rect7 {

background-color: black;

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}


@-webkit-keyframes sk-stretchdelay {

  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  

  20% { -webkit-transform: scaleY(1.0) }

}


@keyframes sk-stretchdelay {

  0%, 40%, 100% { 

    transform: scaleY(0.4);

    -webkit-transform: scaleY(0.4);

  }  20% { 

    transform: scaleY(1.0);

    -webkit-transform: scaleY(1.0);

  }

}


</style>

</head>

<body oncopy="return false" oncut="return false" onpaste="return false" onload="replaceSentence()">


<div class="spinner">

      <div class="rect1"></div>

  <div class="rect2"></div>

  <div class="rect3"></div>

      <div class="rect4"></div>

    <div class="rect5"></div>

    <div class="rect6"></div>

    <div class="rect7"></div>

</div>

<div class="main">

<label class="site-name">JAVA TAJA</label>

<span><label class="s1" id="s1"></label><label class="s2" id="s2"></label></span>

<input type="text" id="typed" placeholder="Type the method above to enter" onkeyup="redirection(event)"/>

<div class="refresh-enter">

<div id="refresh" onclick="refresh()"></div>

<button>Enter</button>

</div>

</div>

<input type="hidden" class="sentence" id="sentence"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

//입력값 확인

function redirection(event) {

console.log($('#typed').prop("selectionStart")); //커서 포지션

    var x = event.key; //입력값 저장

    console.log("x=" + x);

    var input_textfield = document.getElementById('typed');

    var input = input_textfield.value;

    var sentence = document.getElementById('sentence').value;

    var sentence_obj = document.getElementById('sentence');

   var cursorPosition = $('#typed').prop("selectionStart");

   var input_color = $("input").css('color');

    console.log("input=" + input); //입력값

    console.log("input.legnth=" + input.length);

    console.log("sentence=" + sentence); //입력해야 할 문장

console.log("===============================");

    if(x === 'Enter'){ //엔터 키 입력 시

    if(input === sentence){

    showLoading(); //로딩 화면

    setTimeout(function(){ window.location="main.jsp"; }, 2200); //2.2초 대기 후 메인화면으로 이동

    }else{ // 입력값이 틀릴 때

    console.log("input color="+input_color);

    $(input_textfield).addClass('shakeIt');

     setTimeout(function() {

    $(input_textfield).css({"color":"red"});

    setTimeout(function() {

    $(input_textfield).removeClass('shakeIt');

    $(input_textfield).css({"color":input_color});

}, 500);

}, 1);

    }

    }

  if(sentence.substring(0,input.length) == input.substring(0,input.length)){

    console.log("input.legnth=" + input.length);

    $(input_textfield).css({"color":"green"});

    var s1 = sentence.substring(0, input.length);

    var s2 = sentence.substring(input.length, sentence.length);

    $('#s1').text(s1);

    $('#s1').css({"color":"green"});

    $('#s2').text(s2);

    }else{

    console.log("input.legnth=" + input.length);

    $(input_textfield).css({"color":"red"});

    var s1 = sentence.substring(0, input.length);

    var s2 = sentence.substring(input.length, sentence.length);

    $('#s1').text(s1);

    $('#s2').text(s2);

    $('#s1').css({"color":"red"});

    }

}


//버튼 클릭

$("button").click(function(){

    var input_textfield = document.getElementById('typed');

    var input = input_textfield.value;

    var sentence = document.getElementById('sentence').value;

    var input_color = $("input").css('color');

    if(input === sentence){

    showLoading();

    setTimeout(function(){ window.location="main.jsp"; }, 2200);

    }else{

    console.log("input color="+input_color);

$(input_textfield).addClass('shakeIt');

setTimeout(function() {

    $(input_textfield).css({"color":"red"});

     setTimeout(function() {

    $(input_textfield).removeClass('shakeIt');

    $(input_textfield).css({"color":input_color});

}, 500);

}, 1);

    }

    }); 

//로딩 화면

function showLoading() {

  $(".main").css({"display": "none"});

  $(".spinner").css({"display": "block"});

}

var sentences = ['System.out.println("Hello Java");',

'Connection conn = null;',

'int[] arr = new int[6];',

'int k = Integer.parseInt(str);',

'BigInteger a = BigInteger.ZERO;',

'Collections.sort(array);',

'if(p^q >= q);',

'double k = Math.sqrt(n);',

'thread.setPriority(10);',

'char c = string.charAt(14);',

'Welcome to JAVA TAJA',

'private long cyphertext;',

'public class Student(){}'];

//문장 랜덤으로 뿌려주기

var current = 0;

function replaceSentence() {

while(true){

var a = Math.ceil(Math.random()*12);

if(a != current){

current = a;

break;

}

}

var currentSentence = sentences[current];

$('#sentence').val(currentSentence);

$('#s1').text(currentSentence);

}

function refresh(){

$('#refresh').addClass('refresh-spin');

setTimeout(function() {

location.reload();

}, 100);

}

</script>

</body>

</html>