Question

我正在修改现有的html / javascript包以用作iPhone锁屏。我希望它看起来像这样：

alt text

我决定在HTML中添加CSS和Javascript，以便您可以立即测试它：

<html>
<head>

<script language="Javascript">
var now             = new Date ( );

function getClock ( )
{
  var hours     = now.getHours ( );
  var minutes   = now.getMinutes ( );
  minutes       = ( minutes < 10 ? "0" : "" ) + minutes;

  var daypart   = ( hours < 12 ) ? "AM" : "PM";
  hours         =  ( hours > 12 ) ? hours - 12 : hours;
  hours         = ( hours == 0 ) ? 12 : hours;

  var clock     = hours + ":" + minutes + " " + daypart;

  document.getElementById("clock").firstChild.nodeValue     = clock;
}

function getCalendar ( )
{
  var days      = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
  var months    = new Array("January","February","March","April","May","June","July","August","September","October","November","December")

  var date      = now.getDate()
  var month     = now.getMonth()
  var day       = now.getDay()

  document.getElementById("date").firstChild.nodeValue  = date;
  document.getElementById("month").firstChild.nodeValue     = months[month].substring(0, 3);
  document.getElementById("day").firstChild.nodeValue       = days[day];
}

</script>

<style type="text/css">
body  { font-family: Calibri; color: #fff; background-color: #000; position: absolute; }
#clock { width: 300px; position: absolute; top: 50%; margin: -.7em 0 0 20px; font-size: 53px; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;}
#day { font-size: 0.9em; line-height: 35px; }
#month { position: absolute; right: 0px; font-size: 1.91em; line-height: 99px; }    
#date { position: absolute; left: -125px; top: 0px; width: 102px; text-align: right; }
</style>   
</head>

<body onload="getClock(); setInterval('getClock()', 1000 ); getCalendar(); setInterval('getCalendar()', 1000 )">

<div id="background">
<img src="http://dc463.4shared.com/img/32MahG4Y/s7/0.15818551454745688/Background.jpg" width="320" height="480">
</div>

<div id="clock">
    <div id="day">
    </div>
    <div id="month">
        <div id="date">
        </div>
    </div>
</div>      
</div>

</body>
</html>

截至目前，我有两个未解决的问题：

与样本图像一样，我希望月份几乎触及屏幕的右边缘，同时保持相同数量的左边距。这只能意味着一件事：调整字体大小以使其适合。这必须在Javascript中完成。
我现在使用的文本边框（使用text-shadow）非常难看，如果您将我的图像与示例图像进行比较，您会看到边框会有所不同！有没有办法让它们更流畅？

我希望任何人都能就如何解决这些问题提出一些想法。提前谢谢！

Answer 1

首先，将所有元素包含在div中并相对定位。这将有助于保持其他内部div相应的位置。

<body onload="getClock(); setInterval('getClock()', 1000 )">
    <div id="clock">
        11:06 AM
        <div id="date">
            Sunday
        </div>
        <div id="month">
          <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000 )</script>  
          <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script>
        </div>
    </div>
</body>

注意我已经删除了#day div，它不需要我也将#clock div中的所有内容都包含在内，以便根据#clock位置定位所有元素。如果您需要#day div返回脚本，只需将其添加到脚本周围的html中，不要在CSS中设置样式。

CSS（字体大小是基于您链接的样本图像的猜测）.....

#clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; }
#date { position: relative; text-align: left; margin: 0 0 0 40px; }
#month { float: right; font-size: 80px; margin: 0 20px 0 0;}

如果有帮助，这里是一个复制/粘贴HTML文件，以便您可以使用它。注意我添加了主体CSS和#myscreen div来模仿手机屏幕的大小。手机上的实际部署不需要它们。

<html>
</head>
    <style  type="text/css">
        body { text-align: center; font-family: verdana; background: #fff; color: #fff;}
        #myscreen { position: relative; width: 320px; background: #333; height: 480px; }

        #clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; }
        #date { position: relative; text-align: left; margin: 0 0 0 40px; }
        #month { float: right; font-size: 80px; margin: 0 20px 0 0;}
    </style>
</head>



<body onload="getClock(); setInterval('getClock()', 1000 )">
    <div id="myscreen">
        <div id="clock">
            11:06 AM
        <div id="date">
            Sunday
        </div>
        <div id="month">
          29 <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000 )</script>  
          Aug <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script>
        </div>
        </div>
    </div>
</body>
</html>

减少或增加#clock div的-.05em余量将向上或向下移动整个元素块。

CSS - 在正文中定位带有文本的DIV元素

1 个答案: