Ir para conteúdo

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

estou tentando colocar um um relógio no meu site, mas o javascript não esta funcionando, e olha que copio do site http://codepen.io/anon/pen/MwerOw?ed

 

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

ronaldomarcos    4

ronaldomarcos
Postado

Você abriu um onload e não fez nada com ele.

window.onload = function(){ // blablabla. getElementbyId("blabla).blabla }

 

Abrir e não fazer nada tudo bem, mas pode ver que ficou comentado o parênteses do fechamento da funcion onload, então dá erro, pois ele tá esperando o prosseguimento do código.

 

Se tua intenção era chamar o time() dentro do onload então deveria ter feito algo como isso:

 

window.onload = function () {
time();
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Renisio Braulio    0

Renisio Braulio
Postado

Cara o relógio aparecer, mas ele esta estático não anda, só atualiza quando a pagina é atualizada, acho que esta quase, por favor se tiver como me ajudar. o código agora ficou assim:

 

<!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;
}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() {
time();}
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 + ":" + Seconds;
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

ronaldomarcos    4

ronaldomarcos
Postado

Esse relógio é com jquery, isto é, ele utiliza uma biblioteca do jquery (https://jquery.com), não é apenas Javascript (puro) que já roda no browser... é fácil de identificar jquery pois começa com $... dá uma estudada aí como é jquery senão poderá ter problemas depois, principalmente se começar a misturar código e conflitar bibliotecas...

A princípio, para funcionar seu relógio, coloca o caminho de uma delas no seu código lá no head, igual o vermelho que coloquei no exemplo:


<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<title>
</title>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

fchagas97    2

fchagas97
Postado

Consegui resolver o problema, vai o código completo abaixo:




<!DOCTYPE html>



<html lang="pt-br">



<head>



<meta charset="UTF-8">



<title>Teste: Relógio</title>



<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>



<style>



body {



font-family: 'Roboto', sans-serif;



background-color: #E7EDF0;



}



.container {



overflow:hidden;



position: relative;



margin: 0 auto;



top: 100px;



width: 400px;



height: 255px;



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>



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


 



<script>



function time() {



var date = new Date();



var Hours = date.getHours();



var Minutes = date.getMinutes();



var Seconds = date.getSeconds();



var _day = date.getDay();



var days = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 


 



'Sábado'];



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 + ":" + Seconds;



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>



</body>



</html>



 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Renisio Braulio
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Renisio Braulio
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
Nossa! Vocês são os caras. muitos obrigado a todos vocês por ter me ajudado, estou iniciando o meu aprendizado de programação. e vocês me ajudaram demais. é sempre bom saber que existem pessoal que se portem em compartilhar conhecimento, valorizo muito isso, obrigado pessoal 


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
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