728x90
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin : 0 0 0 20px; padding : 0;}
li {list-style-type:square; margin-left:20px;}
#bluebox {border : solid 3px skyblue; line-height : 170%; padding:20px 0; margin:10px; };
</style>
</head>
<body>
<div id = "bluebox">
<p> - 책값 : <span id="priceid">- </span> 원 </p>
<p> - 할인율 : <span id="saleid">- </span> % </p>
<p> - 배송비 : <span id="taxid">- </span> 원 </p>
<p> ------------------------------------</p>
<ul>
<li>지불금액: <span id="payid">- </span> 원 </li>
</ul>
<script>
function cal() {
var price = Number(prompt("책값을 입력하세요"));
var sale = Number(prompt("할인율%을 입력하세요 "));
var tax = Number(prompt("배송료를 입력하세요"));
var pay = price - (price*sale/100)+tax;
document.getElementById("priceid").innerHTML = price;
document.getElementById("saleid").innerHTML = sale;
document.getElementById("taxid").innerHTML = tax;
document.getElementById("payid").innerHTML = pay;
}
</script>
</div>
<button onclick="cal()">거스름돈 계산하기</button>
</body>
</html>
더보기
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
button { background-color: yellow; padding: 10px; text-align: center; }
</style>
<script>
function changeText(obj) {
obj.style.color=" red";
}
function changeBg(obj){
obj.style.backgroundColor="pink";
}
</script>
</head>
<body>
<button onclick="changeText(this)">글씨 색상 변경하기</button>
<button onclick="changeBg(this)">배경색 바꾸기</button>
</body>
</html>
'일단 해보는 코딩 > Java Script' 카테고리의 다른 글
| Google Sheets 이용해서 Blog 만들기 (0) | 2022.12.28 |
|---|---|
| [Java Script] 자바스크립트 객체 총 정리 (0) | 2022.07.04 |
| [Java Script] 변수 스코프 (지역변수와 전역변수), 익명 함수, Lamda함수 (0) | 2022.07.01 |
| [Java Script] 함수 값 반환 (0) | 2022.07.01 |
| [Java Script] 내장 함수, 사용자 정의 함수 (0) | 2022.07.01 |