Curiosità codice CSS con il DOCTYPE html
Io aimè ho imparato a programamre con i marcatori senza usare i !DOCTYPE, e quando per esempio per modernizzarmi aggiungo il doctype => !DOCTYPE html, la grafica mi si "squaglia", cosa cambia nell'usare i DOCTYPE? Quello che ho scritto non è a norma di W3S?
Codice Css
Codice HTML:
body
{
margin:0;
background:#dedede;
}
#container
{
width:400;
margin:auto;
}
header
{
padding:10;
width:100%;
position:relative;
background:#242424;
border-bottom:1px solid #111;
}
#ch
{
width:50px;
margin:auto;
}
#box
{
margin-top:50%;
padding:20;
background: #59A6D6;
border:1px solid #1D8DD3;
border-radius:8;
}
button
{
width:100%;
padding:20;
font-family:Fredoka One;
}
#sec,#min,#ore,#fine
{
text-align:center;
padding:10;
font-size:40;
color:#153D9B;
font-family:Fredoka One;
}
#config
{
font-family:Fredoka One;
width:50;
position:absolute;
margin-top:0;
margin-left:-100;
padding:20;
background: #59A6D6;
border:1px solid #1D8DD3;
border-radius:8;
}
#config input
{
width:100%;
background:transparent;
border:0;
outline:none;
}
Codice completo pagina di esempio [fatta velocemente]
Codice HTML:
<!DOCTYPE html>
<meta charset='utf-8'>
<title>Cronometro Allenamento</title>
<script>
WebFontConfig = {
google: { families: [ 'Fredoka+One::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
var tipe;
var tipe2;
var tipe3;
var si = setInterval();
clearInterval(si);
function start()
{
var sore = document.getElementById('sore').value;
var smin = document.getElementById('smin').value;
var ssec = document.getElementById('ssec').value;
var story = sore + ";" + smin + ";" + ssec;
con(0,0,0,story);
var toggle = document.getElementById('start');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
var toggle = document.getElementById('tpl');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
}
function con(sec,min,ore,end)
{
si = setInterval(function()
{
//fine
var fine = end.split(';');
var fn = document.getElementById('fine').innerHTML= null;
if(ore == fine[0] && min == fine[1] && sec == fine[2])
{
clearInterval(si);
document.getElementById('sec').innerHTML= null;
document.getElementById('min').innerHTML= null;
document.getElementById('ore').innerHTML= null;
document.getElementById('s').value = 0;
document.getElementById('m').value = 0;
document.getElementById('o').value = 0;
ore = 0;
min = 0;
sec = 0;
var fn = document.getElementById('fine').innerHTML= "Allenamento finito!";
var toggle = document.getElementById('start');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
var toggle = document.getElementById('tpl');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
}
var switchC = document.getElementById('tco').value;
switch(switchC)
{
case 'Time Up':
sec = parseInt(sec)+1;
if(sec == 1) tipe = 'secondo';
else if(sec <= 59)tipe = 'secondi';
else if(sec > 59 )
{
min = parseInt(min)+1;
sec = 0;
}
if(min == 1) tipe2 = 'minuto';
if(min > 1 && min <= 59) tipe2 = 'minuti';
if(min > 60)
{
ore = parseInt(ore)+1;
}
var c = document.getElementById('sec').innerHTML= sec + " " + tipe;
if(min > 0)
{
var sm = document.getElementById('min').innerHTML= min + " " + tipe2;
}
if(ore == 1) tipe3 = 'ora';
if(ore > 1 ) tipe3 = 'ore';
if(ore > 0)
{
var sm = document.getElementById('ore').innerHTML= ore + " " + tipe3;
}
document.getElementById('s').value = sec;
document.getElementById('m').value = min;
document.getElementById('o').value = ore;
break;
case 'Countdown':
break;
}
},1000);
}
function pause()
{
clearInterval(si);
toggle();
}
function play()
{
var s = document.getElementById('s').value;
var m = document.getElementById('m').value;
var o = document.getElementById('o').value;
var sore = document.getElementById('sore').value;
var smin = document.getElementById('smin').value;
var ssec = document.getElementById('ssec').value;
var story = sore + ";" + smin + ";" + ssec;
con(s,m,o,story);
toggle();
}
function toggle()
{
var toggle = document.getElementById('tpl');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
var toggle = document.getElementById('tpa');
toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
}
function switchC()
{
var switchC = document.getElementById('tco');
switchC.value == 'Time Up' ? switchC.value = 'Countdown' : switchC.value = 'Time Up';
}
</script>
<style>
body
{
margin:0;
background:#dedede;
}
#container
{
width:400;
margin:auto;
}
header
{
padding:10;
width:100%;
position:relative;
background:#242424;
border-bottom:1px solid #111;
}
#ch
{
width:50px;
margin:auto;
}
#box
{
margin-top:50%;
padding:20;
background: #59A6D6;
border:1px solid #1D8DD3;
border-radius:8;
}
button
{
width:100%;
padding:20;
font-family:Fredoka One;
}
#sec,#min,#ore,#fine
{
text-align:center;
padding:10;
font-size:40;
color:#153D9B;
font-family:Fredoka One;
}
#config
{
font-family:Fredoka One;
width:50;
position:absolute;
margin-top:0;
margin-left:-100;
padding:20;
background: #59A6D6;
border:1px solid #1D8DD3;
border-radius:8;
}
#config input
{
width:100%;
background:transparent;
border:0;
outline:none;
}
</style>
<header>
<div id='ch'>
<a href='http://measprache.altervista.org/' target='_blank' title='Mea Sprache home page.'><img src='http://measprache.altervista.org/img/logo.png'/></a>
</div>
</header>
<div id='container'>
<div id='config'>
Ore<input type='number' id='sore' value=0>
Min<input type='number' id='smin' value=20>
Sec<input type='number' id='ssec' value=0>
<input type='text' id='tco' value='Time Up' disabled/>
<!--<button id='switchC' onclick='switchC()'>Switch</button>-->
</div>
<div id='box'>
<button id='start' onclick='start()'>Inizia</button>
<button onclick='pause()' id='tpl'style='display:none'>Pausa</button>
<button onclick='play()' id='tpa' style='display:none'>Play</button>
<input type='hidden' id='m'>
<input type='hidden' id='s'>
<input type='hidden' id='o'>
<div id='sec'></div><div id='min'></div><div id='ore'></div><div id='fine'></div>
</div>
</div>
