Question

How can I modify this script to encase the AM/PM text in a div?

I already tried modifying the areas where it outputs the ampm with a div, but it didnt put the element in a div, instead displaying the and tags as plaintext.

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

Your code is way over complex. I’d suggest replacing the myTime() function with this that just builds HTML rather than create all the various text nodes. This also puts the AM or PM designation in a <span class="ampm"> so it can be styled appropriately:

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);
}

And here’s a working version: http://jsfiddle.net/jfriend00/jTbf2/