Question

我创建了一个javascript＆amp; php时钟，这个代码如下。然而，我想要做的是使用CSS创建我创建的模拟的外观，也在下面。有人可以告诉我他们将使用的CSS，以及他们将应用CSS的地方，因为我完全迷失了。

代码也在

之下

<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 + 12096e5);
        var dx=d.toGMTString();
        dx=dx.substr(0,dx.length -3);
        d.setTime(Date.parse(dx))
        d.setSeconds(d.getSeconds() + <?php     date_default_timezone_set('Europe/London'); echo date('Z'); ?>);
        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('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
    }

    window.onload=function(){
        GetClock();
        setInterval(GetClock,1000);
    }
</script>
<div id="clockbox"></div>

我自己尝试了几次以及尝试研究。我打算用一些CSS来展示我之前所做的事情然而它是如此糟糕和脱节，这会混淆这个问题所以请原谅我不包括这个。如果有人可以告诉我在哪里实施CSS等会很棒。

STYLE THAT I WOULD LIKE

HERE IS A LIVELINK FOR THE CURRENT CLOCK WITHOUT CSS STYLING I SHALL REMOVE THIS WHEN THE QUESTION IS ANSWERED FOR FUTURE POSTERITY OF THE POST.

Answer 1

我会把它分成div，用这条线扔掉时钟：

document.getElementById('clockbox').innerHTML="<div class='clock-day'>" + tday[nday] + "</div><div class='clock-time'>" + nhour + ":" + nmin + ":" + nsec + "</div><div class='clock-ampm'>" + ap + "</div><div class='clock-date'>" + tmonth[nmonth] + " " + ndate + ", " + nyear + "</div>";

立即处理CSS ...

Answer 2

这里你是个好先生;）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0047)http://www.cambridgedesigncompany.com/clock.php -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>
<style type="text/css">

#clockbox{ color:#A9A9A9; font-family:sans-serif; text-transform:uppercase; font-size:20px}
.day{display:block;
}
.month{
    display:block;
    font-size:15px;
}
.time{font-size:25px;
}
.ampm{font-size:15px;}

</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 + 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('clockbox').innerHTML="<span class='day'>"+tday[nday]+"</span>"+"<span class='time'> "+nhour+":"+nmin+":"+nsec+"</span><span class='ampm'>"+ap+"</span><span class='month'>"+tmonth[nmonth]+" "+ndate+", "+nyear+"</span>";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox">Thursday, March 12, 2015 5:49:30 PM</div>


</body>
</html>

Answer 3

经过一些工作后，我意识到你不能在CSS中为不同的行添加一些font-size。如果这样做，当日期发生变化时，它将破坏已经给定的font-size元素。例如 Thursday 的大小为24pt。 JavaScript将日期更改为 Friday 后，其大小也将为24pt。

在这种情况下，它会破坏设计，星期五不会与下面的其他两行具有相同的宽度。为此，有一个名为BigText的jQuery插件。您可以对其进行测试here。

还有另一个名为FitText的插件，如果它对你更好。

注意：请记住，Stack Overflow不是社区为你编写代码。至少，下次向我们展示你尝试过的东西（以及出了什么问题）。

现在我实现了下面的插件，希望它能满足您的需求。

＆＃13;

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('1').innerHTML = "" + tday[nday].toUpperCase() + "";
    
        document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "<span style=\"font-size: 22px;\">" + ap + "</span>";
    
        document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}

window.onload=function(){
    GetClock();
    setInterval(GetClock,1000);
    $('#bigtext').bigtext();
}

＆＃13;

body { font-family: Helvetica, sans-serif; }
#bigtext {
    border: 1px solid rgba(255,0,0,0.5);
    color: #ccc;
    padding: 40px 15px;
}

＆＃13;

<div id="bigtext" style="width: 200px">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/modernizr-1.6.min.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://www.zachleat.com/bigtext/bigtext.js"></script>

＆＃13;

Fiddle

Answer 4

新css：

#clockbox {
  border-width:1px;
  border-style:solid;
  border-color:red;
  padding:5px;
  width:210px;
  height:220px;
}

#clockboxtext {
     margin-top:50px;   
    font-family:'Calibri';
        color:#CCCCCC;
    margin-left:5px;
}

#nday {
     font-size:40px;
}

#time {
 font-size:50px;
}
.ap {
    font-size:20px;
}

#date {
    font-size:30px;
}

查看我的jsfiddle以获取整个代码

https://jsfiddle.net/wb7168dr/

看看它。它几乎相同：）

修改如果有人需要德语版本....那里有一个： German version

Answer 5

您想要将日期条目拆分为不同的div，以便您可以单独设置每个样式（也可以使用跨度）：

<div class="clock" id="day"></div>
<div class="clock" id="time"></div><div class="clock" id="hour"></div>
<div class="clock" id="date"></div>

然后调整脚本以将正确的值放入每个div：

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 + "";

然后，您可以编写CSS来分别设置每个元素的样式：

.clock {
  font-family:Arial,sans-serif;
  color:#bbb;
  font-size: 44px;
}
#time {
  display:inline-block;
  letter-spacing:3px;
}
#hour {
  margin-left:10px;
  display:inline-block;
  font-size:28px;
}
#date {
  font-size:30px;
}

参见以下工作示例：

http://jsfiddle.net/yLga4c37/5/

用于javascript时钟的CSS样式

5 个答案: