0

プロジェクトの div に挿入された時計があり、それが「インライン」で表示されることが非常に重要です。実際、AM/PM セルはすぐ隣にあり、クロックが短くなるにつれて移動したいと思います (つまり、22:22 ではなく 11:11)。

だから私はそのプロパティを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/FEZAceme/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

わかりました、このコードは私のために働きます: 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 に答える