گوناگون

آموزش ساخت ساعت با جاوااسکریپت

چطور با جاوااسکریپت ساعت بسازم؟

0 1,216 1 دقیقه قبل خوانده شده

جاوااسکریپت زبان جادوگران وب ؟؟؟ حتما روزی که این زبان جذاب و دوست داشتنی بوجود اومد پیش بینی نمیشد که این قدر توسعه پیدا کنه و طرفدار های دو اتیشه بدست بیاره . هر لحظه ای که در فضا مجازی گشت و گذار کنید یه نشانه ای از زبان جاوااسکریپت خواهید دید که یه جوراییی قدرت نمایی این زبان محسوب میشه . تو سایت های دیگه اموزش های مشابه یا تکراری موجود هست ولی بچه های تیچ وب که دغدغه ای متفاوت از بقیه رو دارن تلاش می کنن که با مثال های کاربردی با بیان ساده جاوااسکریپت رو برای دوستداران این زبان شیرین با نگاهی راحتر معرفی کنن . البته عزیزانی که مبتدی نیستن نگران نباشن به مثال های بزرگتر و پیچیده تر هم میرسیم . در این پست به شما میگم که چطور میتونید با جاوااسکریپت ساده یه سایت درست کنید و اون رو در سایت خودتون قرار بدین

برای کسایی هم که از سیستم های مدیریت محتوا استفاده می کنن اگر درخواست رو در زیر همین پست بدن , همین کد ساده رو به افزونه اون Cms تبدیل می کنیم و آموزش و فایل نصبیشو قرار میدیم .

برای شروع یک سند Html رو میسازیم و کدنویسی خودمون رو اغاز می کنیم :

<html><head lang="en">
    <meta charset="UTF-8">
    <title>7Learn JS</title>
    <link rel="stylesheet" href="../common/pure.css" type="text/css">
    <script src="../common/common.js"></script>
    <style>
        body {
            padding: 50px;
            text-align: center;
            font: normal 12px tahoma;
            line-height: 200%;
        }

        #btn1 {
            font-size: 30px;
        }
    </style>
</head>
<body>
ساعت به وقت محلی شما<br>
<button id="btn1" onclick="toggleClock()" class="pure-button button-secondary">22:57:54</button>
<br>
با کلیک روی ساعت می توانید آن را متوقف و مجددا شروع نمایید
<script>
کد جاوااسکریپت شما که در مرحله بعد اضافه می کنیم

</script>

</body></html>

<title>7Learn JS</title>

<style>

body {

padding: 50px;

text-align: center;

font: normal 12px tahoma;

line-height: 200%;

}

#btn1 {

font-size: 30px;

}

</style>

</head>

<body>

ساعت به وقت محلی شما<br>

<br>

با کلیک روی ساعت می توانید آن را متوقف و مجددا شروع نمایید

کد جاوااسکریپت شما که در مرحله بعد اضافه می کنیم

</script>

</body></html>

در بالا سند html رو مشاهده می کنید که به دو فایل css و js خارجی وصل شده که خیلی برای پروژه ما مهم نیستن . ساعتی که در حال ساختنش هستیم قابلیت کلیک کردن داره , به این صورت که وقتی روش کلیک می کنید اگر ساعت متوقف هست فعال می شود و برعکس . خوب حاضرید برای کدونویسی جاوااسکریپت؟؟؟

<html><head lang="en">
    <meta charset="UTF-8">
    <title>Teachweb JS</title>
    <link rel="stylesheet" href="pure.css" type="text/css">
    <script src="common.js"></script>
    <style>
        body {
            padding: 50px;
            text-align: center;
            font: normal 12px tahoma;
            line-height: 200%;
        }

        #btn1 {
            font-size: 30px;
        }
    </style>
</head>
<body>
ساعت به وقت محلی شما<br>
<button id="btn1" onclick="toggleClock()" class="pure-button button-secondary">22:57:54</button>
<br>
با کلیک روی ساعت می توانید آن را متوقف و مجددا شروع نمایید
<script>
    var iv1 = setInterval(function () {
        addTimeToBtn()
    }, ۱۰۰۰);

    function toggleClock() {
        if (iv1 > 0) {
            clearInterval(iv1);
            iv1 = 0;
        } else {
            iv1 = setInterval(function () {
                addTimeToBtn()
            }, ۱۰۰۰);
        }
    }

    function addTimeToBtn() {
        var btn1 = document.getElementById('btn1');
        var dt = new Date();
        btn1.innerHTML = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
    }
</script>

</body></html>