Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pedrosal

Problema em colocar Java com HTML

Recommended Posts

Olá a todos !

Preciso de uma ajuda urgente, visto que tenho de fazer isto para o meu trabalho !

Acontece que fiquei responsável por fazer o código HTML de uma página simples com a data e a hora. Mas na hora eles pedem que tenha um desenho semelhante a um relógio com o relógio a funcionar lá dentro (horas, minutos e segundos).

A questão é : já consegui fazer o código, já arranjei a imagem (tirei transparência e tudo mais) mas não consigo colocar aquele relógio dentro da imagem !!!

Tenho de terminar isto hoje e já estou em desespero !!! :ph34r:

Aqui está o codigo em questão (tal como se vê, o relógio aparece ao lado da imagem e não sobreposta a ela, como eu queria) :

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 5px solid green;
}
header {
padding: 5em;
color: white;
background-color: darkblue;
clear: left;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<font face="calibri" color="white" size="5">
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var now = new Date();
var mName = now.getMonth() +1 ;
var dName = now.getDay() +1;
var dayNr = now.getDate();
var yearNr=now.getYear();
if(dName==1) {Day = "Domingo";}
if(dName==2) {Day = "Segunda-feira";}
if(dName==3) {Day = "Terça-feira";}
if(dName==4) {Day = "Quarta-feira";}
if(dName==5) {Day = "Quinta-feira";}
if(dName==6) {Day = "Sexta-feira";}
if(dName==7) {Day = "Sábado";}
if(mName==1){Month = "Janeiro";}
if(mName==2){Month = "Fevereiro";}
if(mName==3){Month = "Março";}
if(mName==4){Month = "Abril";}
if(mName==5){Month = "Maio";}
if(mName==6){Month = "Junho";}
if(mName==7){Month = "Julho";}
if(mName==8){Month = "Agosto";}
if(mName==9){Month = "Setembro";}
if(mName==10){Month = "Outubro";}
if(mName==11){Month = "Novembro";}
if(mName==12){Month = "Dezembro";}
if(yearNr < 2000) {Year = 1900 + yearNr;}
else {Year = yearNr;}
var todaysDate =(" " + Day + ", " + dayNr + "/" + Month + "/" + Year);
document.write(' '+todaysDate);
//-->
</SCRIPT>
<br>
<br>
<img align="center" src="https://i.imgsafe.org/f216facd6c.png"/>
<font face="calibri" color="white" size="10">
<SPAN ID="Clock">00:00:00</SPAN>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Elem = document.getElementById("Clock");
function Horario(){
var Hoje = new Date();
var Horas = Hoje.getHours();
if(Horas < 10){
Horas = "0"+Horas;
}
var Minutos = Hoje.getMinutes();
if(Minutos < 10){
Minutos = "0"+Minutos;
}
var Segundos = Hoje.getSeconds();
if(Segundos < 10){
Segundos = "0"+Segundos;
}
Elem.innerHTML = Horas+":"+Minutos+":"+Segundos;
}
window.setInterval("Horario()",1000);
//-->
</SCRIPT>
</header>
</div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

Primeiro, seu código tem bastante coisa sobrando, e o ideal é usar css para setar propriedades de fonte e posição.

Que tal colocar tudo dentro de DIVs e deixar o relógio de fundo? Assim não terá problema com redimensionamento da página também.

Confere:

<!DOCTYPE html>
<html>
<head>
<style>
body{
    margin: 0;
}
div.container {
    width: 100%;
}
 
header {
    border: 5px solid green;
    padding: 1em;
    color: white; 
    background-color: darkblue;
    clear: left;
    text-align: center;
    font-family: Calibri;
    font-size: 1.5em;
 
}
.relogio{
    background: url("https://i.imgsafe.org/f216facd6c.png") no-repeat center center;
    font-size: 2.5em;
    width: 100%;
    height: 292px;
    margin-top: 30px;
    padding-top: 220px
}
#Clock, .data{
    ;
}

</style>

</head>
<body>
 
<div class="container">
 
    <header>
        <div class="data">
            <SCRIPT LANGUAGE="JAVASCRIPT">
                <!--
                var now = new Date();
                var mName = now.getMonth() +1 ;
                var dName = now.getDay() +1;
                var dayNr = now.getDate();
                var yearNr=now.getYear();
                if(dName==1) {Day = "Domingo";}
                if(dName==2) {Day = "Segunda-feira";}
                if(dName==3) {Day = "Terça-feira";}
                if(dName==4) {Day = "Quarta-feira";}
                if(dName==5) {Day = "Quinta-feira";}
                if(dName==6) {Day = "Sexta-feira";}
                if(dName==7) {Day = "Sábado";}
                if(mName==1){Month = "Janeiro";}
                if(mName==2){Month = "Fevereiro";}
                if(mName==3){Month = "Março";}
                if(mName==4){Month = "Abril";}
                if(mName==5){Month = "Maio";}
                if(mName==6){Month = "Junho";}
                if(mName==7){Month = "Julho";}
                if(mName==8){Month = "Agosto";}
                if(mName==9){Month = "Setembro";}
                if(mName==10){Month = "Outubro";}
                if(mName==11){Month = "Novembro";}
                if(mName==12){Month = "Dezembro";}
                if(yearNr < 2000) {Year = 1900 + yearNr;}
                else {Year = yearNr;}
                var todaysDate =(" " + Day + ", " + dayNr + "/" + Month + "/" + Year);
                 
                document.write('  '+todaysDate);
            </SCRIPT>
        </div>

            <div class="relogio">

                <SPAN ID="Clock">00:00:00</SPAN>
                <SCRIPT LANGUAGE="JAVASCRIPT">

                <!--
                  var Elem = document.getElementById("Clock");
                  function Horario(){ 
                    var Hoje = new Date(); 
                    var Horas = Hoje.getHours(); 
                    if(Horas < 10){ 
                      Horas = "0"+Horas; 
                    } 
                    var Minutos = Hoje.getMinutes(); 
                    if(Minutos < 10){ 
                      Minutos = "0"+Minutos; 
                    } 
                    var Segundos = Hoje.getSeconds(); 
                    if(Segundos < 10){ 
                      Segundos = "0"+Segundos; 
                    } 
                    Elem.innerHTML = Horas+":"+Minutos+":"+Segundos; 
                    } 
                    window.setInterval("Horario()",1000);
                //-->
                 
                //-->
                </SCRIPT> 

            </div>  

    </header>
 
</div>
 
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

um muito obrigado a todos voces !!! foi uma grande ajuda e já está feito ! agora é só mesmo entregar no patrão e rezar para que ele goste hahahaha

um grande abraço de portugal e novamente, muito obrigado :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.