ส่งงานสัปดาห์ที่ 11

#1 · 07/10/2020, 09:53:48

<html>
<head>
<title> week 11 java script ตอนที่ 2 </title>
<meta charset ="utf-8">
<style>
.box1
{
border: 0.05px solid #000000;
width: 500px;
height: 500px;
}
.box2
{
position: relative;
border: 0.05px solid #00FF00;
width : 200px;
height :200px;
}
.box3
{
position: relative;
left : 202px;
top: -202px;
border: 0.05px solid #0000ff;
width : 200px;
height :200px;
}
#bt1
{
width:100px;
height:50px;
}
.box4
{
position: relative;
left : 50px;
top: -150px;
border: 2px solid #0000ff;
border-radius: 25px;
width : 50px;
height :50px;
}
</style>

</head>
<body>
<h3> การจัดการรูปแบบของหน้าต่างเว็บ </h3>
<div class = "box1" >
<div class ="box2">
<p> Volt =</p>
<p> Current =</p>
<p> Power =</p>
</div>
<div class = "box3">
<p id ="V1">220</p>
<p id ="I1">10</p>
<p id = "P1">----</p>
<button onclick = "calculate()" id="bt1" > คำนวณ </button>
</div>

<div class = "box4" id="box4">
</div>
<button onclick = "mov_L()"> เคลื่อนที่ไปทางซ้าย </button>
<button onclick = "mov_R()"> เคลื่อนที่ไปทางขวา </button>

</div>
<script>
var n=50;
function mov_L()
{
var box4 = document.getElementById("box4");
n = n-10;
box4.style.left = n;
}
function mov_R()
{
var box4 = document.getElementById("box4");
n = n+10;
box4.style.left = n;
}
function calculate()
{
var v1 = parseInt(document.getElementById("V1").innerHTML);
var i1 = parseInt(document.getElementById("I1").innerHTML);
var p1 = document.getElementById("P1");
p1.innerHTML = v1*i1;
p1.style.color = '#ff0000';
p1.style.fontSize='15px';