Question

如何修改此脚本以包含div中的AM / PM文本？

我已经尝试用div修改输出ampm的区域，但它没有将元素放在div中，而是将和标签显示为明文。

function myTime() {
var dst = 0;       // set to 1 for daylight savings time
                   // update this as you go on and off daylight saving time
var loc = ''; // set to your location
var mtz = -5;      // set to your local timezone (hours ahead of UTC, negative if behind)
var stdz = ''; // standard time indicator
var dayz = ''; // daylight saving time indicator (blank if you dont have daylight saving)
var showDate = 0; // 0 = don't show, 1 = international format, 2 = US format

// do not alter anything below this line
var newP = document.createElement("div"); var txt = '' + loc + ' '; var newT = document.createTextNode(txt); newP.appendChild(newT); var newP2 = document.createElement("div"); newP2.id = 'time'; var txt2 = setDsp(mtz,dst,stdz,dayz,showDate); var newT2 = document.createTextNode(txt2); newP2.appendChild(newT2); var frag = document.createDocumentFragment(); frag.appendChild(newP); frag.appendChild(newP2); var d2 = document.getElementById('datetime'); d2.parentNode.replaceChild(frag,d2);
setTimeout('updDsp('+mtz+',' +dst+',"' +stdz+'","' +dayz+'","'+showDate+'")', 5000);}
var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
function updDsp(mtz,dst,stdz,dayz,showDate) {var obj = document.getElementById('time'); obj.firstChild.data = setDsp(mtz,dst,stdz,dayz,showDate); setTimeout('updDsp('+mtz+ ','+dst+ ',"'+stdz+ '","'+dayz+ '","'+showDate+'")', 5000);}
function setDsp(mtz,dst,stdz,dayz,showDate) {var dayname = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']; var month = ['January','February','March','April','May','June','July','August','September','October','November','December']; var now = new Date; now.setUTCMinutes(now.getUTCMinutes() + (mtz + dst)*60); var dow = now.getUTCDay(); var minute = now.getUTCMinutes();
var hour = now.getUTCHours(); if (hour > 11) {ampm = 'PM'; hour -= 12;} else {ampm = 'AM'} if (hour == 0) {hour = 12;} if (minute < 10) {pad = ':0';} else {pad = ':';} var txt = hour + pad + minute + ' ' + '' + ampm + ''; if (dst) txt += dayz; else txt += stdz; txt += ' '
if (showDate == 1) txt += ' ' + now.getUTCDate() + ' '  + month[now.getUTCMonth()]  + ', ' + now.getUTCFullYear();
if (showDate == 2) txt += ' ' + month[now.getUTCMonth()] +' '  + now.getUTCDate() + ', ' + now.getUTCFullYear();
return (txt);
}
loaded('datetime',myTime);

Answer 1

你的代码过于复杂。我建议用这个替换myTime()函数来构建HTML，而不是创建所有各种文本节点。这也将AM或PM指定放在<span class="ampm">中，因此可以适当地设置样式：

function myTime() {
    var dst = 0; // set to 1 for daylight savings time
    // update this as you go on and off daylight saving time
    var loc = ''; // set to your location
    var mtz = -5; // set to your local timezone (hours ahead of UTC, negative if behind)
    var stdz = ''; // standard time indicator
    var dayz = ''; // daylight saving time indicator (blank if you dont have daylight saving)
    var showDate = 0; // 0 = don't show, 1 = international format, 2 = US format

    var timeStr = setDsp(mtz, dst, stdz, dayz, showDate);
    timeStr = timeStr.replace(/AM|PM/i, '<span class="ampm">$&</span>');
    var d = document.getElementById('datetime');
    d.innerHTML = '<div id="time">' + loc + " " + timeStr + '</div>';
    setTimeout(myTime, 500);
}

这是一个有效的版本：http://jsfiddle.net/jfriend00/jTbf2/

修改脚本以在AM / PM周围包含DIV

1 个答案: