0

我的项目中有一个时钟插入到一个 div 中，对我来说，它被呈现为“内联”非常重要。事实上，AM/PM 单元就在它旁边，我希望它随着时钟变短而移动（即 11:11 而不是 22:22）。

所以我将它的属性设置为 display: inline; 像这样 ：

.time{
    display: inline;
    position: relative;
    cursor: pointer;
    z-index: 1;
    font-size: 50pt;    
}

am/pm 元素也是如此：

.ampm{
    display: inline;
    cursor: pointer;
    position: relative;
    z-index: 1;
    font-size: 18pt;
    top: -40px;
}

这是 HTML 文件：

<div class="timeDate">
    <div class="hour"><div id="time" class="time"></div><div id="ampm" class="ampm"></div></div>
    <div id="date" class="date"></div>
</div>

至少，不断更新它的Javascript代码：

setInterval('checkTime()', 1000);

function checkTime(){
    currentTime = new Date();
    _minutes = currentTime.getMinutes();
    _hours = currentTime.getHours();
    _day = currentTime.getDay();
    _date = currentTime.getDate();
    _month = currentTime.getMonth();
    time.innerHTML = _hours + ":" + _minutes;
    ampm.innerHTML = ampmValue;
}

它适用于 display: block; 另外，当我添加秒数时，我可以看到它更新，但只有 10 次中有 2 次。你知道为什么，我该如何解决？提前致谢 ！

这是我的项目的链接（仅限 Chrome）：http : //acemond.free.fr/FEZAcetheme/BETA/FEZ_Lockscreen_1.2-3.theme/LockBackground.html 它是为了在本地工作，所以完全加载页面，然后重新加载（你会保留缓存）

嗯，好吧……有点找到出路了……

if(mode12h) time.innerHTML = _hours + ":" + _minutes + "<sup><font size='5'>" + ampmValue + "</font></sup>";
else time.innerHTML = _hours + ":" + _minutes;

看起来很简单，但那段代码的问题是分配给时钟的 .click 函数将不再正常工作。所以我添加了一个空控件，最重要的是为了接收点击。它有效，不知道为什么。

编辑：找到了一个更好的方法来做到这一点：

hours.innerHTML = _hours + ":" + _minutes + "<span class='ampm'>" + ampmValue + "</span>";

与相关的 CSS：

.ampm{
    position: absolute;
    z-index: 1;
    height: 75px;
    text-align: center;
    width: 40spx;
    font-size: 20pt;    
}

我以前这样做过，但正如我所说的那样，它阻止了 .click 函数正常工作。但现在它与我在上面添加的管理点击的面板配合得很好。

4

3 回答 3

0

是否可以像添加一样简单：

var time = document.getElementById('time');

var ampm = document.getElementById('ampm')`

在做之前

time.innerHTML = _hours + ":" + _minutes;
ampm.innerHTML = ampmValue;
于 2013-03-23T00:16:33.947 回答
0

好的，这段代码对我有用：http: //jsfiddle.net/3xyYh/1/ 

setInterval(checkTime, 1000);

删除了 checkTime 调用周围的引号，但也许这也不是问题？然而，这对我来说很好用 display: inline。

于 2013-03-23T00:37:34.677 回答
0

您应该将 应用于display: inline;您的父元素.timeDate

编辑： 好的！我看过你的时钟，我发现了一些东西：你应该给你的元素浮动。见下文：

.ampm {
    cursor: pointer;
    display: inline;
    float: right;
    font-size: 18pt;
    margin-top: 0;
    position: relative;
    z-index: 1;
    top: 20px;
    right: 2px;
}

.time {
    cursor: pointer;
    display: inline;
    float: left;
    font-size: 45pt;
    position: relative;
    z-index: 1;
}
于 2013-03-23T01:01:16.560 回答