简易万维网闹钟

Question

我决定加强我的“普通JavaScript”技能，因为我最近对jQuery有了更多的了解，并且刚刚发现了node.js的潜力。

因此，我决定用javascript和html制作一个基本的闹钟。(另外，我需要一个闹钟)。

这是填充器

// Load an alarm sound
    var sound = new Audio("http://www.freespecialeffects.co.uk/soundfx/sirens/alarm_01.wav");
    sound.loop = true;

// I just made this because It's easier to read.
getID = function(value){ return document.getElementById( value ); };

// List of all my objects im working with, and variables
var hour = getID("hour"),
    minute = getID("minute"),
    second = getID("second"),
    aHour = getID("aHour"),
    aMinute = getID("aMinute"),
    aSecond = getID("aSecond"),
    aSwitch = getID("aSwitch"),
    aOff = getID("turnOff"),
    refreshTime = 500,
    alarmTimer = null;

aSwitch.On = false;
aSwitch.value = "OFF";

// Turns the alarm off or on
function alarmSwitch(){
    switch( aSwitch.On )
    {
        case false:
            aSwitch.On = true;
            aSwitch.value = "ON";

            alarmSet();
        break;
        case true:
            aSwitch.On = false;
            aSwitch.value = "OFF";

            // CLEARS THE BEEPER 
            clearTimeout( alarmTimer );
        break;
    }
}

// Stops the alarm and closes the "stop button"
function disableAlarm(){
    sound.pause();
    aOff.style.display = "none";
}

//Fires the BEEPER noise, -- this is called from the alarmTimer timeout
function alarmFire(){
    if( aSwitch.On )
    {
        aOff.style.display = "block";
        sound.play();
    }
    else
        alert("error..");
}

/*This is how the beeper goes off:
 * It first checks the set time so the alarm can go to the 
 * next day without the user putting the date in.
 * The beeper goes off over the span of milliseconds difference.
 */
function alarmSet(){
    clearTimeout( alarmTimer );

    var tomo = false;// tomorrow.
    if( aHour.value < hour.value )
        {tomo = true;}
    else if( aHour.value == hour.value && aMinute.value < minute.value )
        {tomo = true;}
    else if( aHour.value == hour.value && aMinute.value == minute.value 
            && aSecond.value < second.value )
        {tomo = true;}

    var date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = parseInt( date.getDate() );

    if( tomo ){day += 1;}

    time = new Date( year, month, day, aHour.value, aMinute.value, aSecond.value, date.getMilliseconds() );
    time = ( time - (new Date()) );

    // This turns the alarm back on if it's off when this function is called.
    if( aSwitch.On == false)
        alarmSwitch();

    alarmTimer = setTimeout( function(){alarmFire();} ,parseInt(time) );
}

// This is how the clock works
timeRefresh = function(){
    date = new Date();
    hour.innerHTML = date.getHours();
    hour.value = hour.innerHTML;
    minute.innerHTML = date.getMinutes();
    minute.value = minute.innerHTML;
    second.innerHTML = date.getSeconds();
    second.value = second.innerHTML;

    setTimeout("timeRefresh()", refreshTime);
};

// This is called whenever the inputs are changed to stop invalid forms.
numCap = function( obj, min, max){
    obj.value = Math.max(obj.min, Math.min(obj.max, obj.value) );

    alarmSet();// Starts up the alarm automatically when a value is changed.
};

window.onload=function(){
    timeRefresh();

    var a = getID("aHour");
    a.value = hour.innerHTML;
    a = getID("aMinute");
    a.value = minute.innerHTML;
    a = getID("aSecond");
    a.value = second.innerHTML;
};

我很想得到一些关于我的代码的反馈！我能做些什么来改进/简化代码？

另外，如果您希望看到HTML页面，只需询问！

Answer 1

首先，连贯一致地缩进和使用空格。我发现使用牙套也是一种很好的风格。

不要污染全局命名空间:将所有内容封装在一个将变量保持在较小范围内的函数中。还可以在火狐中使用"use strict";并进行测试，因为它是严格模式下最不宽松的浏览器之一：

(function ourAlarmCode () {
    "use strict";
    var sound = ...
    // all your code goes here
}());

使用一致的变量命名--通常CamelCase表示构造函数，因此是on而不是On，因为它不是构造函数。

命名所有函数，即使您将它们存储在变量中--这使得调试更容易。

var numCap = function numCap (obj, min, max) {

不要对DOM对象使用随机属性--而是将它们存储为变量--从而将aSwitch.On替换为var alarmOn = false;。

可以用一个switch替换if

// toggle
alarmOn = !alarmOn;
if (alarmOn) {
    aSwitch.value = "ON";
    alarmSet();
}
else {
    aSwitch.value = "OFF";
    clearTimeout(alarmTimer);
}

而且，setTimeout也不能保证在精确的N毫秒之后触发--在这种情况下并不重要，但通常应该记住，这是一种超时功能，以确保自调用回调以来至少已经过了N毫秒。

Answer 2

这并不是一个完整的回顾，只是我突然想到的几件事：

getID()

看起来更像是“更容易写”而不是“更容易读”。从当前函数名"getID“开始，大多数读取代码的人都会假设函数将返回一个ID。

如果您想使用jQuery，因为您可以简单地编写$("#hour")而不是getID("hour")。jQuery的核心思想是让您选择(或查询) DOM元素。

alarmSwitch()

如果您使用的是简单的If / much，而不是开关/case，那么代码就会简单得多。

if(aSwitch.On){
...
} else {
...
}

变量命名

简单地将变量命名为明日而不是tomo会更好地用于阅读。

var tomo = false;// tomorrow.

用于单行

的If/else块

始终使用if/ even块，即使对于单行语句，也有助于避免很难找到bug

if( aSwitch.On )
{
    aOff.style.display = "block";
    sound.play();
}
else
    alert("error..");

Answer 3

为了便于阅读，所有的东西都应该包装在一个函数中。

警报器看上去不错！