JS နဲ့ မီးအဖွင့်အပိတ်လေးရေးကြည့်ကြရအောင်
ကဲ အားလုံးပဲ မဂ်လာ ပါ ။ ဒီတစ်ခါမှာတော့ ကျနော်တို့ javascript နဲ့ မီးအပိတ်အဖွင့်လေး ရေးကြည့်ကြရအောင်
အရင်ဆုံးကတော့ Html ရေးတာပေါ့ ကျနော်က CSS ကော JS မှာ HTML ထဲမှာပဲရေးလိုက်ပါတော့မယ်၊
Video ကြည့်ချင်တယ်ဆိုရင်တော့ အောက်က link လေးကို နှိပ်ပြီးကြည့်နိုင်ပါတယ်
link => https://fb.watch/1xYS1g9nrs/
ကဲစကြရအောင်.............................
<html>
<head>
<title>Light</title>
<style>
body{
background-color: darkslategrey;
color: #fff;
}
h1{
text-align: center;
}
p{
text-align: center;
}
img{
width: 200px;
height: 400px;
padding-left: 42%;
}
.on{
position: absolute;
left: 44%;
top: 80%;
width: 60px;
height: 40px;
}
.off{
position: absolute;
left: 50%;
top: 80%;
width: 60px;
height: 40px;
}
</style>
</head>
<body>
<h1>Light Tutorial</h1>
<p>မီးအဖွင့်အပိတ်ကိုJavascritp နဲ့ ရေးမဲ့ Tutorial ဖြစ်ပါတယ်</p>
<img src=off.png id='light'>
<button type="button" onClick="light(1)" class="on">On</button>
<button type="button" onClick="light(0)" class="off">Off</button>
<scritp>
function light(sw){
var picture;
if(sw == 0){
picture = "off.png"
}
else{
picture = "on.png"
}
document.getElementById('light').src = picture;
}
</script>
</body>
</html>
ကဲဒါပါပဲ ကျနော် JS ပဲရှင်းပြပေးပါမယ်. ပထမဆုံး လုပ်ဆောင်ဖို့ light(sw) ဆိုတဲ့ function စောက်လိုက်ပါမယ် အဲ့ဒီ function ထဲမှာ ပုံတွေအတွက် variable လေးပေးပါမယ် ဘာလို့လဲဆိုတော့ ကျနော်တို့ ပုံနှစ်ခုကိုပဲ အပြောင်းအလဲ လုပ်မှာဖြစ်ပါတယ် ပြီးရင် if နဲ့ condection စစ်ပါမယ် sw == 0 က button က onClick ပေးထားတဲ့ ဟာဖြစ်ပါတယ် 0 မဟုတ်ပဲ တခြားဟာပေးထားရင် အဲ့ဒီပေးထားတဲ့ ဟာနဲ့ ညီရမှာပါ တကယ်လို့ sw က 0 နဲ ညီရင် မီပိတ်နေတဲ့ ပုံလေးပြနေပါမယ် ဒါမှမဟုတ် ရင် မီးလင်းတဲ့ပုံပြမယ်လို့ရေးထားတာပါ document.get ဟာကတော့ ဒီ (light) Id ရှိတဲ့နေရာမှာ ပြမယ်ဆိုပြီးရေးထားတာပါ။
အခုလိုလာရောက်ဖတ်ပေးတဲ့အတွက်ကျေးဇူးတင်ပါတယ်၊
Comments
Post a Comment