CSS стиль для javascript clock

-2

Я создал javascript & php clock, код для этого ниже. Однако то, что я пытаюсь сделать, это использовать CSS, создающий внешний вид макета, который я создал, также ниже. Может кто-нибудь, пожалуйста, покажите мне CSS, который они будут использовать, а также где они будут применять CSS, поскольку я полностью потерян.CSS стиль для javascript clock

Код также ниже

<script type="text/javascript"> 
    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() + <?php  date_default_timezone_set('Europe/London'); echo date('Z'); ?>); 
     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('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; 
    } 

    window.onload=function(){ 
     GetClock(); 
     setInterval(GetClock,1000); 
    } 
</script> 
<div id="clockbox"></div>

Я несколько раз пытался себя так же, как и попытка исследования. Я собирался включить некоторый CSS, чтобы показать, что я сделал, прежде чем он был настолько плохим и разрозненным, что это смущает вопрос, поэтому, пожалуйста, простите меня за то, что я не включил это. Если бы кто-нибудь мог просто показать мне, где реализовать CSS и т. Д., Это было бы потрясающе.

STYLE THAT I WOULD LIKE

HERE IS A LIVELINK FOR THE CURRENT CLOCK WITHOUT CSS STYLING I SHALL REMOVE THIS WHEN THE QUESTION IS ANSWERED FOR FUTURE POSTERITY OF THE POST.

источник

2015-02-26 gregg legg

Вы будете хотеть, чтобы посмотреть в использовании [СМЧ шрифта свойство.] (https://developer.mozilla.org/en-US/docs/Web/CSS/font) –

Я бы разделить на это в дивы, используя эту строку, чтобы выбросить часы:

document.getElementById('clockbox').innerHTML="<div class='clock-day'>" + tday[nday] + "</div><div class='clock-time'>" + nhour + ":" + nmin + ":" + nsec + "</div><div class='clock-ampm'>" + ap + "</div><div class='clock-date'>" + tmonth[nmonth] + " " + ndate + ", " + nyear + "</div>";

Работа на CSS теперь ...

источник

2015-02-26 17:54:30

Здесь вы являетесь хорошим сэром;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- saved from url=(0047)http://www.cambridgedesigncompany.com/clock.php --> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title>Untitled Document</title> 
<style type="text/css"> 

#clockbox{ color:#A9A9A9; font-family:sans-serif; text-transform:uppercase; font-size:20px} 
.day{display:block; 
} 
.month{ 
    display:block; 
    font-size:15px; 
} 
.time{font-size:25px; 
} 
.ampm{font-size:15px;} 

</style> 
</head> 

<body> 
<script type="text/javascript"> 
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('clockbox').innerHTML="<span class='day'>"+tday[nday]+"</span>"+"<span class='time'> "+nhour+":"+nmin+":"+nsec+"</span><span class='ampm'>"+ap+"</span><span class='month'>"+tmonth[nmonth]+" "+ndate+", "+nyear+"</span>"; 
} 

window.onload=function(){ 
GetClock(); 
setInterval(GetClock,1000); 
} 
</script> 
<div id="clockbox">Thursday, March 12, 2015 5:49:30 PM</div> 


</body> 
</html>

источник

2015-02-26 18:00:32 Mat

Помните, что дни меняются, поэтому один и тот же «font-size» будет применяться к различным дням, различной ширины для каждого дня. Я тоже ошибся. – balintpekker

После небольшой работы я понял, что вы не можете просто добавить font-size в CSS для разных строк. Если вы это сделаете, когда день изменится, он испортит уже заданный font-size элемента. Например Четверг имеет размер 24pt. После того, как JavaScript изменит день на В пятницу он также будет иметь размер 24pt.

В этом случае это разрушит дизайн, и В пятницу не будет иметь такую же ширину, как две другие строки ниже. Для этого существует плагин jQuery под названием BigText. Вы можете проверить его here.

Существует еще один плагин под названием FitText, если это вам лучше.

Примечание: Пожалуйста, имейте в виду, переполнение стека не является сообщество написания кодов для вас. По крайней мере, в следующий раз покажите нам, что вы пробовали (и что пошло не так).

На данный момент я внедрил плагин внизу, надеясь, что он подойдет вашим потребностям.

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(); 
 
\t dx=dx.substr(0,dx.length -3); 
 
\t d.setTime(Date.parse(dx)) 
 
\t 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;} 
 

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

 
\t document.getElementById('1').innerHTML = "" + tday[nday].toUpperCase() + ""; 
 
    
 
     document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "<span style=\"font-size: 22px;\">" + ap + "</span>"; 
 
    
 
     document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + ""; 
 
} 
 

 
window.onload=function(){ 
 
    GetClock(); 
 
    setInterval(GetClock,1000); 
 
    $('#bigtext').bigtext(); 
 
}

body { font-family: Helvetica, sans-serif; } 
 
#bigtext { 
 
    border: 1px solid rgba(255,0,0,0.5); 
 
    color: #ccc; 
 
    padding: 40px 15px; 
 
}

<div id="bigtext" style="width: 200px"> 
 
    <div id="1"></div> 
 
    <div id="2"></div> 
 
    <div id="3"></div> 
 
</div> 
 

 
<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>

Fiddle

источник

2015-02-26 18:07:16 balintpekker

Новый CSS:

#clockbox { 
    border-width:1px; 
    border-style:solid; 
    border-color:red; 
    padding:5px; 
    width:210px; 
    height:220px; 
} 

#clockboxtext { 
    margin-top:50px; 
    font-family:'Calibri'; 
     color:#CCCCCC; 
    margin-left:5px; 
} 

#nday { 
    font-size:40px; 
} 

#time { 
font-size:50px; 
} 
.ap { 
    font-size:20px; 
} 

#date { 
    font-size:30px; 
}

Посмотрите на мою jsfiddle для всего кода

https://jsfiddle.net/wb7168dr/

Посмотрите на него. Это почти то же самое :)

Редактировать Если кому-то нужен немецкий вариант .... есть один: German version

источник

2015-02-26 18:08:16

[Пиксель - это наименьшее значение единицы для рендеринга с.] (Http://stackoverflow.com/questions/13891177/css-border-less-than-1px/13891295#13891295). Граница не будет отображаться, если это шириной менее 1px. – balintpekker

Спасибо. Jsfiddle игнорирует это неправильное значение. Я отредактирую @balintpekker –

Помните, что дни меняются, поэтому один и тот же «font-size» будет применяться к различным дням, вызывая разную ширину для каждого дня. Я тоже ошибся. – balintpekker

Вы собираетесь хотите разделить запись даты в различные дивы, так что вы может укладывать каждый по отдельности (вы можете сделать с пролетами, а):

<div class="clock" id="day"></div> 
<div class="clock" id="time"></div><div class="clock" id="hour"></div> 
<div class="clock" id="date"></div>

Затем установите скрипт, чтобы поместить правильные значения в каждом DIV:

document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + ""; 
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + ""; 
document.getElementById('hour').innerHTML = "" + ap + ""; 
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";

Вы можете написать свой CSS для стилизации каждого элемента в отдельности:

.clock { 
    font-family:Arial,sans-serif; 
    color:#bbb; 
    font-size: 44px; 
} 
#time { 
    display:inline-block; 
    letter-spacing:3px; 
} 
#hour { 
    margin-left:10px; 
    display:inline-block; 
    font-size:28px; 
} 
#date { 
    font-size:30px; 
}

См работает пример по адресу:

http://jsfiddle.net/yLga4c37/5/

источник

2015-02-26 18:21:00

Помните, что дни меняются, поэтому один и тот же «размер шрифта» будет применяться к различным дням, вызывая разную ширину для каждого дня. Я тоже ошибся. – balintpekker

CSS стиль для javascript clock

ответ

Смежные вопросы