Ir para conteúdo

POWERED BY:

Arquivado

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

Renisio Braulio

estou tentando colocar um um relógio no meu site, mas o javascript não

Por , em Javascript

Recommended Posts

Renisio Braulio    0

Renisio Braulio
Postado

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #E7EDF0;
}
.container {
overflow:hidden;
position: relative;
margin: 0 auto;
top: 100px;
width: 400px;
height: 120px;
background-color: #fff;
border-top: 20px solid #55c49f;
-webkit-box-shadow: 6px 6px 33px -8px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 6px 6px 33px -8px rgba(0, 0, 0, 0.52);
box-shadow: 6px 6px 33px -8px rgba(0, 0, 0, 0.52);
}

.menu {
position: absolute;
top: 8px;
left: 380px;
width: 12px;
height: 11px;
cursor: pointer;
z-index:999;

}

.menu span {
position: absolute;
width: 12px;
height: 2px;
background-color: #333;
background-color: #000;
}

.time {
position: relative;
top: 20px;
}

.time h1 {
color: black;
font-size: 4em;
text-align: center;
font-weight: 500;
transition: all .1s;
}

.day {
position: relative;
top: 20px;
}

.day h1 {
color: black;
font-size: 1.4em;
text-align: center;
font-weight: 400;
transition: all .3s;
}
.circle{
border-radius: 50%;
width: 0px;
height: 0px;
position:absolute;
top: 12px;
left: 390px;
background:#333;
opacity:.9;
z-index:999;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
.circle.expand{
width:1200px;
height:1200px;
top: -560px;
left: -565px;
-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
.circle ul{
position:absolute;
margin: 0 auto;
}
.circle ul li{
position:absolute;
margin: 0 auto;
}

</style>
<script type="text/javascript">
window.onload = function(){ // blablabla. getElementbyId("blabla).blabla }
function time() {
var date = new Date();
var Hours = date.getHours();
var Minutes = date.getMinutes();
var Seconds = date.getSeconds();

var _day = date.getDay();

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var Day = days[_day];
Hours = (Hours < 10 ? "0" : "") + Hours;
Minutes = (Minutes < 10 ? "0" : "") + Minutes;
Seconds = (Seconds < 10 ? "0" : "") + Seconds;

document.getElementById("time_text").innerHTML = Hours + ":" + Minutes;
document.getElementById("day_text").innerHTML = Day;

}

$("#menu_id").on("click",function(){

if($('div.circle').hasClass("expand")){
$('div.circle').removeClass('expand');
}else{
$('div.circle').addClass('expand');
}
//
})
setInterval(time, 100);
</script>

</head>
<body>
<div class="container">


<div class="circle"></div>

<div class="time">
<h1 id="time_text"></h1></div>
<div class="day">
<h1 id="day_text"></h1></div>

<div class="menu" id="menu_id">
<span></span>
<span style="top:4px"></span>
<span style="top:8px"></span>
</div>
</div>

</body

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Brunorieper
      Site atacado por Malware via script
      Por Brunorieper
      Boa tarde, meu site acabou sendo invadido e apos um breve estudo achei um redireccionamento <script>window.location.replace("https://cartoonmines.com/scount");window.location.href = "https://cartoonmines.com/scount";</script> porem não consigo saber onde está alguém já teve este problema? 
       
      Obrigado


    • babylon
      Ajuda em web programação [Formas de Pagamento pop up modal]!!!
      Por babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • johngador5
      Sistema PHP
      Por johngador5
      Olá pessoal, estou começando a estudar linguagens de programação. Tenho um grupo de amigos que gosta muito de jogar futebol, eu pensei em criar um sistema como o do cartola fc para a nossa pelada semanal, eu sei que algo como o cartola seria impossível, pois precisaria de uma equipe gigantesca, porém o que eu quero é algo simples mesmo, apenas para nosso uso. Eu queria saber o que estudar, os assuntos mais necessários. Não existe pressa para terminar esse projeto. Gostaria de aprender começando por um projeto como esse. Queria saber também se php é a linguagem mais indicada para um projeto como esse. Desculpem se falei alguma ignorância, o intuito é apenas aprender. Grato desde já por qualquer ajuda
    • lezão
      Mostrar e Ocultar
      Por lezão
      Boa tarde, a todos!
      encontrei esse codigo na internet esta sendo muito util, eu só tem um item q eu gostaria de mudar.
      e qnd entra na pagina naun aparecer o conteudo q esta em block, só aparecer qnd clicar na opção?
      veja como fica qnd entra na pagina:
      mostrar/ocultar.php
      <select id="tipo_pessoa" onchange="exibir_ocultar(this)"> <option value="Dinheiro">Dinheiro</option> <option value="Cartão">Cartão</option> </select> <br /><br /> <div id="Dinheiro">Troco Para?: <br /><input type="number"></div> <div id="Cartão">Aceitanos: <br /><img src="http://marmitexgranjaviana.com.br/wp-content/uploads/2020/07/aceitamos_todos_os_cart%C3%B5es_de_d%C3%A9bito_e_cr%C3%A9dito.png" width="400" height="100"/></div> <script type="text/javascript"> function exibir_ocultar(val) { if(val.value == 'Cartão') { document.getElementById('Dinheiro').style.display = 'none'; document.getElementById('Cartão').style.display = 'block'; } else { document.getElementById('Dinheiro').style.display = 'block'; document.getElementById('Cartão').style.display = 'none'; } }; </script>  
    • Rodrigo5468
      Youtube e MP4
      Por Rodrigo5468
      Olá, boa tarde!
       
      Eu estava procurando na internet, mas não obtive nenhum resultado significativo.
      Eu preciso de um script em php que converte os links do youtube para o formato .mp4. Como que eu posso fazer isso? Alguma dica?
      Quero que quando o usuário informa o link do youtube no input e clica no botão de converter baixe o vídeo e faz a conversão para .mp4 e fornece para o usuário o link convertido para .mp4.
       
       
      Obrigado desde já.
×

Informação importante

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

  Aceito