JS-5-3

by jiaxin520

HTML

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title> JavaScript Example 5-3</title>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
 <link rel="stylesheet" href="">
 </head>
 <body>
 <div class="counter">
simple counter:
<button class="btn1">-</button>
<button class="btn2">+</button>
</div>

<hr>
<div class="calculator">
simple calculator:
<input id="one" type="text" />
<input id="two" type="text" />
<button onclick="action3()">加/減/乘/除</button>
</div>
</body>
 <!--引用JS -->
    <script src=""></script>
    <script type="text/javascript" src=""></script>
    </html>

CSS

*{
    box-sizing: border-box;

    font-weight:bold;
    
}
.counter{
  width:700px;
  display:flex;
  justify-content:space-around;
  background-color:rgba(48, 213, 200	,0.3);
  margin:0 20%;
  margin-top:5%;
  margin-bottom:3%;
 padding:2% 3%;
 border-radius:20px;
    font-size:36px;
}
.btn1{
  width:30%;
  font-size:30px;
}
.btn2{
  width:30%;
  font-size:30px;
}
.calculator{
width:800px;
    display:flex;
   justify-content:space-around;
   background-color:rgba(139, 0, 255,0.3);
   margin-left:15%;
    margin-top:3%;
   padding:2%;
   font-size:36px;
 border-radius:20px;
}
button:hover{
     background-color:rgba(	227, 38, 54,0.9);
}
button:active{
    transform: scale(0.7);
}

JavaScript

//  計數

let plus = document.querySelector('.btn1');
let minus = document.querySelector('.btn2');
 let j = 0 ; 
 
 plus.onclick = 
 function action1(){
 j--;
 alert(j);
 }
function action2() {
j++;
alert(j);
}
minus.onclick = action2;

// 計算 



let action3 =() =>{
let onenumber = document.querySelector('#one');
let twonumber = document.querySelector('#two');
let onevalue = parseInt(onenumber.value);
let twovalue = parseInt(twonumber.value);
	alert(onevalue + twovalue);
		alert(onevalue - twovalue);
			alert(onevalue * twovalue);
				alert(onevalue / twovalue);
}