1774
No
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
<h2>제한 시간내에 문자 입력하기</h2>
<div id="app">
<p>
금지문자(,로 나누어 복수입력가능)
<input type="" v-model="proHibit" @keyup.enter="inputProHibit">
</p>
<p>
제한시간을 입력하세요(초)
<input v-model.number="timerProhibit" id="timerProhibit" type="number">
<button @click="startBtn">시작</button>
</p>
<p>
남은시간 ({{restSec}}초) <br>
<textarea cols="10" rows="10" style="width: 500px;"
v-model="inputText"
:disabled="isText"
>
</textarea>
</p>
<div v-if="isResult">
<p>{{resultTextCount}} 개의 문자를 입력하였습니다.</p>
<p>별점: {{resultScore}} (금지문자 1개당 12점)</p>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
restSec:0,
timerObject:null,
resultTextCount:0,
proHibit:"",
timerProhibit:0,
isText:true,
isResult : false,
inputText:'',
prohibitCount:0
},
methods: {
startBtn(){
if(this.timerProhibit <=0){
alert("제한 시간을 입력하세요!");
document.getElementById("timerProhibit").focus();
}else{
this.isText=false;
this.startTimer();
}
},
startTimer(){
this.restSec=this.timerProhibit;
this.timerObject=setInterval(()=>{
console.log(this.restSec + "초");
this.restSec--;
}, 1000);
}
},
computed:{
resultScore(){
return this.prohibitCount * 12;
}
},
watch :{
// 입력한 문자열을 감시한다.
inputText(){
const arrayData =this.proHibit.split(",");
for(let i=0; i<arrayData.length; i++){
let pos=this.inputText.indexOf(arrayData[i]);
if(pos >-1){
alert(arrayData[i] +" 는 입력할 수 없습니다.");
this.inputText=this.inputText.substr(0,pos);
this.restSec +=10;
this.prohibitCount++;
}
}
},
// 남은 초를 감시한다.
restSec(){
if(this.restSec<=0){
alert("제한시간 입니다.");
clearInterval(this.timerObject);
this.resultTextCount=this.inputText.length;
this.isText=true;
this.isResult=true;
}
}
},
});
</script>
</body>
</html>
댓글 ( 4)
댓글 남기기