ساعت دیجیتالی

ساعت دیجیتالی

 ما در این آموزش به شما نحوه ساخت یک ساعت با قابلیت تنظیم زنگ هشدار را به شما آموزش می دهیم.

برای مشاهده لینک وارد شود

مراحل

  • ما نیاز به محیطی داریم تا در آن کاربران بتوانند ساعت و زنگ هشدار را تنظیم کنند.
  • باید در هرثانیه بررسی کنیم که آیا وقت زنگ هشداردهنده شده است یا نه؟ تا متناسب با آن زنگ  به صدا در آید.

کد اچ تی ام ال

ما نیاز به دو صفحه خواهیم داشت که یکی برای تنظیم زنگ و دیگری برای اینکه زمان  زنگ هشدار به پایان رسیده است.

index.html

<div class="overlay">

    <div id="alarm-dialog">

        <h2>Set alarm after</h2>

        <label class="hours">
            Hours
            <input type="number" value="0" min="0" />
        </label>

        <label class="minutes">
            Minutes
            <input type="number" value="0" min="0" />
        </label>

        <label class="seconds">
            Seconds
            <input type="number" value="0" min="0" />
        </label>

        <div class="button-holder">
            <a id="alarm-set" class="button blue">Set</a>
            <a id="alarm-clear" class="button red">Clear</a>
        </div>

        <a class="close"></a>

    </div>

</div>

<div class="overlay">

    <div id="time-is-up">

        <h2>Time's up!</h2>

        <div class="button-holder">
            <a class="button blue">Close</a>
        </div>

    </div>

</div>

این دو صفحه توسط CSSناپدید شده و توسط تابعfadeIn() در jQuery  در موقع لزوم نمایش داده میشوند.

چیزی که شایان ذکر است در صفحه زنگ هشدار با استفاده از HTML5 مقدار اولیه دقیقه با ۰مقدار دهی اولیه میشود.

وارد کردن اعداد با استفاده از javascript بسیار آسان بوده و باعث میشود که در تلفن های همراه نیز به آسانی قابل استفاده با شد.

کار بعدی در HTML5  وارد کردن  المان Audio است.این شامل سورس تگ هایی با دو نوع فرمت صوتی است.که اولی آن MP3 و دومین نوع آن ogg می باشد.oggفقط در فایرفاکس پشتیبانی می شود چون فایفاکس هنوز از MP3 پشتیبانی نمی کند.تقریبا تمامی مرورگر هایی که از HTML5 پشتیبانی می کنند از MP3 نیز پشتیبانی می کنند.

index.html

<audio id="alarm-ring" preload>
    <source src="assets/audio/ticktac.mp3" type="audio/mpeg" />
    <source src="assets/audio/ticktac.ogg" type="audio/ogg" />
</audio>

ویژگی پیش بارگذاری مرورگر می گوید که این فایل های صوتی را باید زودتر از بقیه دانلود کندتا وقتی ما تصمیم گرفتیم از آنها استفاده کنیم در دسترس باشند.

جی کوئری

ما در این  بخش از آموزش  از کد های جی کوئری برای پشتیبانی و پخش صدای زنگ ها استفاده می کنیم.

اولین کاری که ما انجام می دهیم تعریف تعدادی متغییر برای تابع زنگ هشدار دهنده است.

assets/js/script.js

 

var dialog = $('#alarm-dialog').parent(),
    alarm_set = $('#alarm-set'),
    alarm_clear = $('#alarm-clear'),
    time_is_up = $('#time-is-up').parent();

// This will hold the number of seconds left
// until the alarm should go off
var alarm_counter = -1;
Next, we have to check whether there is an alarm pending on every tick of the update_time() function.

// Is there an alarm set?

if(alarm_counter > 0){

    // Decrement the counter with one second
    alarm_counter--;

    // Activate the alarm icon
    alarm.addClass('active');
}
else if(alarm_counter == 0){

    time_is_up.fadeIn();

    // Play the alarm sound. This will fail
    // in browsers which don't support HTML5 audio

    try{
        $('#alarm-ring')[0].play();
    }
    catch(e){}

    alarm_counter--;
    alarm.removeClass('active');
}
else{
    // The alarm has been cleared
    alarm.removeClass('active');
}

وقتی که شمارنده به ۰ می رسد به معنی این است که صدای زگ باید پخش شود و پیغام وقت بیدار شدن است نمایش داده شود.

آخرین چیزی که باقی مانده انجام دهید سروسامان دادن به صفحه تنظیم زنگ و دکمه های مختلف است.

 // Handle setting and clearing alamrs

$('.alarm-button').click(function(){

    // Show the dialog
    dialog.trigger('show');

});

dialog.find('.close').click(function(){
    dialog.trigger('hide')
});

dialog.click(function(e){

    // When the overlay is clicked, 
    // hide the dialog.

    if($(e.target).is('.overlay')){
        // This check is need to prevent
        // bubbled up events from hiding the dialog
        dialog.trigger('hide');
    }
});

alarm_set.click(function(){

    var valid = true, after = 0,
        to_seconds = [3600, 60, 1];

    dialog.find('input').each(function(i){

        // Using the validity property in HTML5-enabled browsers:

        if(this.validity && !this.validity.valid){

            // The input field contains something other than a digit,
            // or a number less than the min value

            valid = false;
            this.focus();

            return false;
        }

        after += to_seconds[i] * parseInt(parseInt(this.value));
    });

    if(!valid){
        alert('Please enter a valid number!');
        return;
    }

    if(after < 1){
        alert('Please choose a time in the future!');
        return;	
    }

    alarm_counter = after;
    dialog.trigger('hide');
});

alarm_clear.click(function(){
    alarm_counter = -1;

    dialog.trigger('hide');
});

// Custom events to keep the code clean
dialog.on('hide',function(){

    dialog.fadeOut();

}).on('show',function(){

    // Calculate how much time is left for the alarm to go off.

    var hours = 0, minutes = 0, seconds = 0, tmp = 0;

    if(alarm_counter > 0){

        // There is an alarm set, calculate the remaining time

        tmp = alarm_counter;

        hours = Math.floor(tmp/3600);
        tmp = tmp%3600;

        minutes = Math.floor(tmp/60);
        tmp = tmp%60;

        seconds = tmp;
    }

    // Update the input fields
    dialog.find('input').eq(0).val(hours).end().eq(1).val(minutes).end().eq(2).val(seconds);

    dialog.fadeIn();

});

time_is_up.click(function(){
    time_is_up.fadeOut();
});
+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× هفت = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>