Question

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

所以我将其属性设置为显示：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功能正常工作。但现在它适用于上面添加的用于管理点击的面板。

Answer 1

可能就像添加：

一样简单

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

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

之前

time.innerHTML = _hours + ":" + _minutes;
ampm.innerHTML = ampmValue;

Answer 2

好的，此代码适用于我：http://jsfiddle.net/3xyYh/1/

setInterval(checkTime, 1000);

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

Answer 3

您应该将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; }

CSS显示：内联可防止元素刷新

3 个答案: