Yksinkertainen digitaalinen kello -widget Weeblylle
Aikaisemmassa artikkelissamme olemme selittäneet analogisen tyylin kellon luomisen HTML5 Canvas JavaScriptin avulla. Luodaan yksinkertainen digitaalinen kello -widget Weebly -sivustolle. Widget saa ajan tietokoneen kellosta ja näyttää ajan tunteina, minuutteina ja sekunteina. Alla on, miltä widget näyttää.
Widget sisältää CSS-, JavaScript- ja HTML -osan, ja selitämme yksityiskohtaisesti yksi kerrallaan.
JavaScript digitaalikellolle
Alla on komentosarja, jolla saat tuntimäärät, minuutit ja sekunnit tietokoneen kellosta. Ensimmäinen komentorivi on widgetin toimiva jQuery -kirjasto -linkki.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10? "0": "") + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".minutes").html(( minutes < 10? "0": "") + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".seconds").html(( seconds < 10? "0": "") + seconds);
},1000);
});
</script>Huomautus: Jos komentosarja ei toimi Weebly -sivustossasi, korvaa $ -muuttuja arvolla jQuery ja julkaise sivusto uudelleen.
Widgetin CSS
CSS: llä on kolme luokkaa – .time, .clock ja .align. Luokkaa ".time" käytetään kellon numeroiden kohdistamiseen, kun taas ".clock" -luokkaa käytetään kellotyylien asettamiseen. ".Align" -luokkaa käytetään yksinkertaisesti marginaalin ja fonttikoon säätämiseen.
<style>
.time {
display: inline-block;
color: #fff;
}
.clock {
border: 1px solid yellow;
border-radius: 5px;
background-color: darkslateblue;
text-align: center;
color: #fff;
}
.align {
margin: 15px;
font-size: 40px;
font-weight: 700;
}
</style>Widgetin HTML
Alla on widgetin HTML -koodi:
<div class="clock">
<div class="align">
<a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a>
</div>
</div>Kaksoispiste: käytetään erottimena tuntien, minuuttien ja sekuntien välillä.
Digitaalikello -widgetin täydellinen koodi
Koko widget näyttää alla olevalta lisäämällä komentosarja, CSS ja HTML yhdessä.
<html>
<head>
<style>
.time {
display: inline-block;
color: #fff;
}
.clock {
border: 1px solid yellow;
border-radius: 5px;
background-color: darkslateblue;
text-align: center;
color: #fff;
}
.align {
margin: 15px;
font-size: 40px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="clock">
<div class="align">
<a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10? "0": "") + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".minutes").html(( minutes < 10? "0": "") + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".seconds").html(( seconds < 10? "0": "") + seconds);
},1000);
});
</script>
</body>
</html>Widgetin lisääminen Weebly -sivustoon
On monia tapoja lisätä digitaalinen kello -widget Weebly -sivustoosi.
- Lisää koko koodi vaaditulle sivulle upotuskoodin avulla.
- Lisää komentosarja alatunnisteen koodiosan alle ja CSS ja HTML upotuskoodin elementin sisään.
- Lisää HTML upotuskoodin elementtiin, CSS otsikkokoodiosan alle ja komentosarja alatunnisteen koodiosan alle.
Widgetin mukauttaminen
Muokkaa seuraavia CSS -ominaisuuksia muokataksesi widgetin tarpeidesi mukaan:
- Muuta taustaväriä muuttamalla "darkslateblue" kohdassa "background-color: darkslateblue;".
- Muuta numeroiden väriä muokkaamalla "color: #fff;" kiinteistö ".time" -luokassa.
- Vaihda erottimen väri valitsemalla "color: #fff;" .kello -luokassa.
- Fontin painoa, marginaalia ja kirjasinkokoa voidaan säätää luokan ".align" ominaisuuksilla.
Alla on esimerkkejä digitaalisista kelloista, joissa on erilaisia värivaihtoehtoja. Kellot sijoitetaan vierekkäin Weebly -sivustossa upotuskoodin avulla. Voit katsoa digitaalisten kellojen demon Weebly -sivustolta täältä.
