html - How to correctly style linebreaks in this javascript -
https://jsfiddle.net/mrnf4q7g/
i've been trying set fiddle onto 2 lines such as:
123 20 13 03 days hours min sec i've tried using br , \n tends staircase down page.
create 4 separate elements within #countdown element
<div id="countdown"> <span class="sect" id="days"></span> <span class="sect" id="hrs"></span> <span class="sect" id="mins"></span> <span class="sect" id="secs"></span> </div> then set elements display: inline-block
.sect { display: inline-block; } then set each element's innerhtml separately , include line-break
days.innerhtml = math.floor(distance / _day) + '<br> days '; hrs.innerhtml = math.floor((distance % _day) / _hour) + '<br> hours '; mins.innerhtml = math.floor((distance % _hour) / _minute) + '<br> mins '; secs.innerhtml = math.floor((distance % _minute) / _second) + '<br> secs'; countdowntimer('october 21, 2015 19:00:00', 'countdown'); var days = document.getelementbyid('days'); var hrs = document.getelementbyid('hrs'); var mins = document.getelementbyid('mins'); var secs = document.getelementbyid('secs'); function countdowntimer(date, id) { var end = new date(date); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; var showremaining = function() { var = new date(); var distance = end - now; if (distance < 0) { clearinterval(timer); document.getelementbyid(id).innerhtml = 'expired!'; return; } days.innerhtml = math.floor(distance / _day) + '<br> days '; hrs.innerhtml = math.floor((distance % _day) / _hour) + '<br> hours '; mins.innerhtml = math.floor((distance % _hour) / _minute) + '<br> mins '; secs.innerhtml = math.floor((distance % _minute) / _second) + '<br> secs'; }; timer = setinterval(showremaining, 1000); }body { padding: 50px; font: 14px "lucida grande", helvetica, arial, sans-serif; } { color: #00b7ff; } .sect { display: inline-block; }<div id="countdown"> <span class="sect" id="days"></span> <span class="sect" id="hrs"></span> <span class="sect" id="mins"></span> <span class="sect" id="secs"></span> </div>
Comments
Post a Comment