我的jquery日历没有正确对齐
my jquery calender is not aligning correctly
下面是我网站上时钟的javascript,它设置在未来两周后,但由于某种原因,我现在收到了警报,字母间距(使日历看起来更方正)也不起作用。有人能告诉我为什么会这样吗?一切都没有改变,一切都很顺利。
我重复一遍,它非常完美,字母间隔很好,使整个时间和日期块看起来像一个极简主义的正方形。这显然与这条线路有关
if(date > day && date > time){
但我不知道如何修复它。
我在这里也有一个活墨水。这将被删除,以备日后之用。
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;
}
为了理智起见,我在一个跨度中扭曲了时间。我尝试删除if语句。所以修改后的加载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内联块
相关文章:
- jquery移动对齐按钮取决于内容大小
- 以Jquery为中心的Div中的图像对齐
- 使用jquery垂直对齐动态加载的图像
- Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐
- jquery对话框内容仅针对第一个请求进行对齐
- 我的jquery日历没有正确对齐
- jquery可丢弃元素与网格对齐
- 如何在Jquery Mobile中将两张图片居中对齐
- 将jquery中的标题与滑块对齐
- JQuery 摇晃破坏脚本和垂直对齐不起作用
- jquery揭示了模态弹出窗口对齐
- Jquery Draggable - 如何使拖动的元素以像素增量对齐
- 如何使用 JQuery 移动更改移动方向时使网格元素水平对齐到垂直对齐
- jquery切换显示/隐藏对齐方式
- 如何在 jquery Mobile 中水平对齐标签和文本字段
- JQuery 手风琴在添加内容和对齐时遇到问题
- jQuery 面板内的手风琴对齐方式
- 在给定条件下使用 jquery 删除类,以便对子菜单进行专有对齐
- 带有滚动条和列对齐方式的 Jquery 弹出窗口
- jQuery同位素没有在fitColumns布局模式中对齐大宽度项目