мой jquery calender правильно не соответствует

Question

Ниже приведен javascript для моих часов на моем веб-сайте, он установлен на 2 недели в будущем, но по какой-то причине я теперь получаю предупреждение и ширину букв (чтобы сделать календарь более квадратным) тоже не работает. Может кто-нибудь, пожалуйста, скажите мне, почему это было бы? Ничего не изменилось, и он отлично работал grrrrrrrrrrrrrr.

Я повторяю, что он работал отлично, и буквы были хорошо расположены, чтобы весь блок времени и даты выглядел как минималистский квадрат. Это, очевидно, что-то делать с этой линией

if(date > day && date > time){ 

но я не знаю, как это исправить.

У меня также есть livelink here. это будет удалено для будущего потомства почты.

JAVASCRIPT ниже

tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 

function GetClock() { 
var d = new Date(+new Date + 12096e5); 
var dx = d.toGMTString(); 
dx = dx.substr(0, dx.length - 3); 
d.setTime(Date.parse(dx)) 
d.setSeconds(d.getSeconds() + 0); 
var nday = d.getDay(), 
    nmonth = d.getMonth(), 
    ndate = d.getDate(), 
    nyear = d.getYear(), 
    nhour = d.getHours(), 
    nmin = d.getMinutes(), 
    nsec = d.getSeconds(), 
    ap; 

if (nhour == 0) { 
    ap = " AM"; 
    nhour = 12; 
} else if (nhour < 12) { 
    ap = " AM"; 
} else if (nhour == 12) { 
    ap = " PM"; 
} else if (nhour > 12) { 
    ap = " PM"; 
    nhour -= 12; 
} 

if (nyear < 1000) nyear += 1900; 
if (nmin <= 9) nmin = "0" + nmin; 
if (nsec <= 9) nsec = "0" + nsec; 

document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + ""; 
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + ""; 
document.getElementById('hour').innerHTML = "" + ap + ""; 
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + ""; 
} 

window.onload = function() { 
GetClock(); 
setInterval(GetClock, 1000); 

var day = $('#day').width(); 
var time = $('#time').width() + $('#hour').width() + 10; 
var date = $('#date').width(); 

if(date > day && date > time){ 
***alert('why does this damn alert keep appearing!! Also my letter spacing isnt working anymore yet the code is untouched!');*** 

}else if (time > day && time > date){ 
    var lengthDay = $('#day').html().length-1; 
    var differenceDay = time-day; 
    var letterDay = differenceDay/lengthDay; 

    var lengthDate = $('#date').html().length-1; 
    var differenceDate = time-date; 
    var letterDate = differenceDate/lengthDate; 

    $('#day').css({'letter-spacing':letterDay}); 
    $('#date').css({'letter-spacing':letterDate}); 

}else{ 
alert('day'); 
} 

} 

CSS

.clock { 
color:#bbb; 
font-size: 44px; 
} 
#day{ 
display:inline-block; 
} 
#time { 
display:inline-block; 
letter-spacing:3px; 
} 
#hour { 
margin-left:10px; 
display:inline-block; 
font-size:28px; 
} 
#date { 
font-size:30px; 
display:inline-block; 
} 
.text { 
color:#bbb; 
font-size: 24px; 
} 

Answer 1

ради вменяемость я деформированные время в промежутке. Я попытался удалить инструкцию if. Таким образом, измененная OnLoad JS теперь выглядит как этот

HTML

<div class="text">GET YOUR CAR BY</div> 
<div class="clock" id="day"></div><br> 
<span id="timeHour"> 
    <div class="clock" id="time"></div> 
    <div class="clock" id="hour"></div> 
</span> <br> 
<div class="clock" id="date"></div> 

JS

window.onload = function() { 
    GetClock(); 
    setInterval(GetClock, 1000); 

    var day = $('#day').width(); 
    var time = $('#timeHour').outerWidth(); 
    var date = $('#date').width(); 


    var lengthDay = $('#day').html().length-1; 
    var differenceDay = time-day; 
    var letterDay = differenceDay/lengthDay; 

    var lengthDate = $('#date').html().length-1; 
    var differenceDate = time-date; 
    var letterDate = differenceDate/lengthDate; 


    $('#day').css({'letter-spacing':letterDay}); 
    $('#date').css({'letter-spacing':letterDate}); 



} 

это, кажется, работает для меня. день и дата теперь соответствуют размеру часа. Это то, что вы ищете?

Весь файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> 
<style> 

    * { 
    font-family: 'Open Sans', sans-serif; 
} 

.clock { 
    color:#bbb; 
    font-size: 44px; 
} 
#day{ 
    display:inline-block; 
} 
#time { 
    display:inline-block; 
    letter-spacing:3px; 
} 
#hour { 
    margin-left:10px; 
    display:inline-block; 
    font-size:28px; 
} 
#date { 
    font-size:30px; 
    display:inline-block; 
} 
.text { 
    display: inline-block; 
    color:#bbb; 
    font-size: 24px; 
} 

</style> 
</head> 

<body> 
<script type="text/javascript"> 
tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); 
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); 

function GetClock() { 
    var d = new Date(+new Date); 
    var dx = d.toGMTString(); 
    dx = dx.substr(0, dx.length - 3); 
    d.setTime(Date.parse(dx)) 
    d.setSeconds(d.getSeconds() + 0); 
    var nday = d.getDay(), 
     nmonth = d.getMonth(), 
     ndate = d.getDate(), 
     nyear = d.getYear(), 
     nhour = d.getHours(), 
     nmin = d.getMinutes(), 
     nsec = d.getSeconds(), 
     ap; 

    if (nhour == 0) { 
     ap = " AM"; 
     nhour = 12; 
    } else if (nhour < 12) { 
     ap = " AM"; 
    } else if (nhour == 12) { 
     ap = " PM"; 
    } else if (nhour > 12) { 
     ap = " PM"; 
     nhour -= 12; 
    } 

    if (nyear < 1000) nyear += 1900; 
    if (nmin <= 9) nmin = "0" + nmin; 
    if (nsec <= 9) nsec = "0" + nsec; 

    document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + ""; 
    document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + ""; 
    document.getElementById('hour').innerHTML = "" + ap + ""; 
    document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + ""; 
} 

window.onload = function() { 
    GetClock(); 
    setInterval(GetClock, 1000); 

    var text = $('#text').width(); 
    var day = $('#day').width(); 
    var time = $('#timeHour').width(); 
    var date = $('#date').width(); 


    var lengthDay = $('#day').html().length-1; 
    var differenceDay = time-day; 
    var letterDay = differenceDay/lengthDay; 

    var lengthDate = $('#date').html().length-1; 
    var differenceDate = time-date; 
    var letterDate = differenceDate/lengthDate; 

    var lengthText = $('#text').html().length-1; 
    var differenceText = time-text; 
    var letterText = differenceText/lengthText; 


    $('#day').css({'letter-spacing':letterDay}); 
    $('#date').css({'letter-spacing':letterDate}); 
    $('#text').css({'letter-spacing':letterText}); 



} 
</script> 

<div class="text" id="text">GET YOUR CAR BY</div><br> 
<div class="clock" id="day"></div><br> 
<span id="timeHour"> 
    <div class="clock" id="time"></div> 
    <div class="clock" id="hour"></div> 
</span> <br> 
<div class="clock" id="date"></div> 

</body> 
</html> 

Я добавил letterText к JS и идентификатором и разрыв строки в HTML и отображается .text встроенный блок