<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">
function lalala(){
return "lalala";
}
/*
팁 계산기
이 프로그램이 받는것은 가격 price 팁비율 tip_ratio
주 기능은
팁을 계산하여 팁과 전체 가격을 표시해 주는것이다.
*/
//출력
window.onload = function(){
var inputvalues
var inputArr
var price
var ratio
function promptVal(){
inputvalues = prompt('가격과 할인률을 ,로 구분하여 입력하여 주세요','ex) 15,11');
inputArr = inputvalues.split(',');
//음수값일경우 절대값으로 변환
if(inputArr[0]< 0) {
console.log(inputArr[0]);
inputArr[0] = Math.abs(inputArr[0]);
}
price = parseInt(inputArr[0]);
price.toFixed(2);
console.log(isNaN(price), typeof(ratio));
ratio = parseInt(inputArr[1]);
}
while(isNaN(price)){
promptVal();
}
var tip,total;
function calcTip(price, ratio){
tip = price * (ratio/100);
tip = parseFloat(tip.toFixed(2));
total = parseFloat(parseFloat(price) + tip);
}
calcTip(price, ratio);
refreshView();
$('#price').focusout(function(){
price = $('#price').val();
calcTip(price, ratio);
refreshView();
});
$('#ratio').change(function(){
ratio = $('#ratio').val();
calcTip(price, ratio);
refreshView();
});
$('#tip').focusout(function(){
tip = $('#tip').val();
calcTip(price, ratio);
refreshView();
});
$('#total').focusout(function(){
total = $('#total').val();
calcTip(price, ratio);
refreshView();
});
function refreshView(){
//가격
$('#table1 tr:nth-child(1) td:nth-child(2) input').val(price);
//비율
$('#table1 tr:nth-child(2) td:nth-child(2) input').val(ratio);
//팁
$('#table1 tr:nth-child(3) td:nth-child(2) input').val(tip);
//토탈
$('#table1 tr:nth-child(4) td:nth-child(2) input').val(total);
}
}
</script>
<title></title>
</head>
<body>
<table border=1 id="table1">
<tr>
<td>가격</td>
<td ><input type="text" id="price"></td>
</tr>
<tr>
<td>팁 비율</td>
<td ><input type="range" min="0" max="20" id="ratio" /></td>
</tr>
<tr>
<td>팁 </td>
<td ><input type="text" id="tip"></td>
</tr>
<tr>
<td>합산가격</td>
<td ><input type="text" id="total"></td>
</tr>
</table>
</body>
</html>
-- index.html
자바스크립트로 연습해 보았습니다 ^^
댓글 없음:
댓글 쓰기