کنترل چراغ با جاوااسکریپت
در این نوشته برای شما یک مثال ساده از جاوااسکریپت را به اشتراک خواهیم گذاشت.
با ما در ادامه همراه باشید.
کنترل چراغ با جاوااسکریپت
ابتدا فایلی با نام index.html بسازید و کدهای زیر را در آن قرار دهید:
<!DOCTYPE html>
<html>
<head>
<title>off/on Bulb - CamelCase</title>
<style type="text/css">
.main
{
margin: 100px auto;
width: 512px;
}
</style>
</head>
<body>
<div class="main">
<a onclick="lightChange()" title="تغییر وضعیت لامپ">
<div class="bulb">
<img id="myBulb" src="offbulb.png" alt="چراغ" title="جراغ" >
</div>
</a>
</div>
<script src="bulb.js"></script>
</body>
</html>
سپس فایلی با نام bulb.js ساخته و محتوای آنرا با کدهای زیر پر می کنید.
var myBulb = document.getElementById("myBulb");
myBulb.src = "offbulb.png";
function lightChange() {
var currentUrl = window.location.href;
currentUrl = currentUrl.replace("index.html", "");
if (myBulb.src === currentUrl + "offbulb.png") {
myBulb.src = currentUrl + "onbulb.png";
} else {
myBulb.src = currentUrl + "offbulb.png";
}
}
توضیح :
در تمرین بالا ابتدا یک عکس لامپ خاموش لود کردیم و با کلیک روی عکس تصویر لامپ روشن لامپ مورد نظر روشن می شود؛
نتیجه به شکل زیر می باشد:
وقتی چراغ روشن است چراغ به شکل زیر می شود:
و وقتی چراغ خاموش است به شکل زیر می شود:
برای دانلود این تمرین روی لینک دانلود کلیک کنید.
لطفا نظرات خود را با ما به اشتراک بگذارید.
پایدار باشید.
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 1]