شنبه, ۲۱ آذر ۱۳۹۴، ۱۰:۲۲ ق.ظ
مثال های مفید javascript
در پایان آموزش جاوااسکریپت با دو مثال کاربردی در خدمت شما هستیم که کلیت مطالب گفته شده در دروس قبلی را مرور میکنند.
1- شمارش معکوس یا countdown
HTML
!doctype html>
<head>
<title>Countdown</title>
<style type="text/css">
body {
font-family: sans-serif;
color: #333;
}
#container {
width: 400px;
margin: auto;
}
h1 { font-size: 5em; }
</style>
</head>
<body>
<div id="container">
<div id="inputArea">
</div>
<h1 id="time">0:00</h1>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
// two global variables
var secondsRemaining;
var intervalHandle;
function resetPage() {
document.getElementById("inputArea").style.display = "block";
}
function tick() {
// grab the h1
var timeDisplay = document.getElementById("time");
// turn seconds into mm:ss
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10
if (sec < 10) {
sec = "0" + sec;
}
// concatenate with colon
var message = min + ":" + sec;
// now change the display
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0) {
alert("Done!");
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
// get contents of the "minutes" text box
var minutes = document.getElementById("minutes").value;
// check if not a number
if (isNaN(minutes)) {
alert("Please enter a number!");
return;
}
// how many seconds?
secondsRemaining = minutes * 60;
// every second, call the "tick" function
intervalHandle = setInterval(tick, 1000);
// hide the form
document.getElementById("inputArea").style.display = "none";
}
// as soon as the page is loaded...
window.onload = function () {
// create input text box and give it an id of "minutes"
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute("id", "minutes");
inputMinutes.setAttribute("type", "text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type", "button");
startButton.setAttribute("value", "Start Countdown");
startButton.onclick = function () {
startCountdown();
};
// add to the DOM, to the div called "inputArea"
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
2- صفحه با قابلیت تغییر سایز. صفحه وبی که کد زیر را در آن اعمالی می کنیم، پس از تغییر سایز به اندازه ای مشخص، فایل استایل متفاوتی را فرا می‌خواند و در نتیجه استایل صفحه با تغییر اندازه تغییر می کند. در این مثال، اعمال تغییرات بر المان‌های غیر بصری مانند <link> بررسی می‌شود.
function adjustStyle() {
var width = 0;
// get the width.. more cross-browser issues
if (window.innerHeight) {
width = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientHeight) {
width = document.documentElement.clientWidth;
} else if (document.body) {
width = document.body.clientWidth;
}
// now we should have it
if (width < 600) {
document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
} else {
document.getElementById("myCSS").setAttribute("href", "_css/main.css");
}
}
// now call it when the window is resized.
window.onresize = function () {
adjustStyle();
};
window.onload = function () {
adjustStyle();
};
