Javascript时钟上的奇怪行为

Question

我通过回答另一个问题来解决这个问题。我有一个有效的JavaScript时钟，包含三行，包含当天，当前时间和日期。这些行应该具有相同的宽度，所以我使用了BigText插件，除了一件事情以外它工作正常。

＆＃13;

＆＃13;

tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
    var d=new Date(+new Date + 12096e5);
    var dx=d.toGMTString();
	dx=dx.substr(0,dx.length -3);
	d.setTime(Date.parse(dx))
	d.setSeconds(d.getSeconds() + 0);
    var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

        if(nhour==0){ap=" AM";nhour=12;}
   else if(nhour<12){ap=" AM";}
   else if(nhour==12){ap=" PM";}
   else if(nhour>12){ap=" PM";nhour-=12;}

	if(nyear<1000) nyear+=1900;
	if(nmin<=9) nmin="0"+nmin;
	if(nsec<=9) nsec="0"+nsec;

    document.getElementById('1').innerHTML = "" + tday[nday].toUpperCase() + "";
    document.getElementById('1').setAttribute("contenteditable", "true");
    
    document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "" + ap + "";
    document.getElementById('2').setAttribute("contenteditable", "true");
    
    document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
    document.getElementById('3').setAttribute("contenteditable", "true");
}

window.onload=function(){
    GetClock();
    setInterval(GetClock,1);
}

＆＃13;

body { font-family: Helvetica, Arial; }
#bigtext {
    border: 1px solid rgba(255,0,0,0.5);
    color: #bcbcbc;
    padding: 40px 15px;
}
.bigtext-line1 {
    line-height: 45px;
    margin-top: -5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 260px;" id="bigtext">
    <div id="1" class="bigtext-line0"><br/></div>
    <div id="2" class="bigtext-line1"><br/></div>
    <div id="3" class="bigtext-line2"><br/></div>
</div>

<select id="font" style="display: none;">
    <option selected="selected" value=""></option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/modernizr-1.6.min.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://www.zachleat.com/bigtext/bigtext.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/bigtextWizard.js"></script>

＆＃13;

＆＃13;

＆＃13;

有一种奇怪的行为我无法弄明白。当您编辑时钟上的其中一条线时，您可以看到时钟右侧的填充消失。 （contenteditable = true）但是，我不希望用户编辑时钟，因此我想使用contenteditable = false，但如果我使用它，我就无法摆脱右侧的填充。

到目前为止我尝试了什么

正在设置document.getElementById('1').focus()，之后用jQuerys触发事件模拟按键（当我尝试编辑其中一行时，按任何按钮，填充消失）：

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 20; //Caps Lock
$("whatever").trigger(press);

但遗憾的是我无法完成它。我也在寻找解决方案几个小时，可能是一个新的外观将帮助我。

它应该是什么样的？

任何建议都将不胜感激。

Answer 1

问题是BigText向导，它似乎适用于BigText演示。从资源中删除javascript是解决方案的一部分。

第二部分是按照它的使用方式使用插件。与调用$("#myBigTextElement").bigtext()一样，应该是它。

小提琴：http://jsfiddle.net/mdgy4tfb/5/