我的jquery日歷沒有正確對齊

Question

下面是我的網站上的時鍾的javascript，它設置為未來2周但是由於某種原因我現在得到警報並且字母間距（使日歷看起來更方正）也不起作用。 有人可以告訴我為什么會這樣嗎？ 什么都沒有改變，它完美地工作grrrrrrrrrrrrr。

我重復它完美的工作，字母間隔很好，使整個時間和日期塊看起來像一個極簡主義的方塊。 這顯然與這條線有關

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

但我不知道如何解決它。

我這里也有一個livelink 。 這將被刪除為該職位的未來后代。

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>

我在js中添加了letterText，並在html中添加了一個id和一個換行符，並顯示了.text inline-block

我的jquery日歷沒有正確對齊

問題描述

1 個解決方案

解決方案1
0 已采納 2015-03-03 16:09:10

我的jquery日歷沒有正確對齊

問題描述

1 個解決方案

解決方案1 0 已采納 2015-03-03 16:09:10

解決方案1
0 已采納 2015-03-03 16:09:10