Javascript como eu poderia fazer uma notificação(efeito sonoro) de 2 em 2 hrs ?

Wagner Leandro · 13 de novembro de 2020

Eu fiz um sistema que controla a quantidade de agua que uma pessoa bêbe(com historico de quantidade e horario)! com isso, eu queria fazer uma notificação(efeito sonoro) para o usuario beber água de 2 em 2 horas!

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" >
	<!---<link rel="stylesheet" type="text/css" href="http://localhost/beber-agua/css/index.css">--->
</head>
<body>
	<div id="menu">
					<div id="logo">
						<h1>Beber água</h1>
						<img class="a" src="/beber-agua/imgs/logo.png">
					</div>
				<ul>
					<li><a class="tempo">Tempo 00:00:00 Data: 00/0</a></li>
				</ul>
			</div>
		<div id="home">
			<h2>Estatísticas</h2>
				<div id="meta">
					<p class="name-p">Meta</p>
					<p class="media-meta">0</p><p class="media-fixa">/2000ML</p>
					<div class="barra"></div>
					<div class="barra-meta"></div>
				</div>
					<h2>Histórico</h2>
				<div id="historico-corpo">
				<!---<div class='historicoInfoBox'>
					<img src='/beber-agua/imgs/logo.png'>
					<p class='horario'>11:45</p>
					<p class='histQuant'>250ML</p>
				</div>--->
			</div>
			</div>
			
				<div class="add_agua">
					<h2>Beber Água</h2>
					<p>Bebi: <input type="number" class="ml" name="ml" maxlength="40"> ML</p>
					<input type="submit" class="btn-btn" onclick="js()" name="btn" value="Adicionar" >
					<input type="submit" class="btn-btn" onclick="cancelar()" name="btn" value="Cancelar" ">
					<p class="msgErro"></p>
				</div>
				<div id="parabens">
					<h2 style="background: none; margin-top: 56px; " class="btn-parabens">Parabéns!<br> Você bebeu 2000ML!<br>Até amanhã!</h2>
					<input type="submit" class="btn-btn" onclick="resetar_parabens()" name="btn" value="Reset" id="botão">
					<input type="submit" class="btn-view" onclick="view()" name="btn" value="Ver">
				</div>
			<input type="submit" value="Add" onclick="add_remove()" class="add-btn">
			<input type="submit" value="Reset" onclick="resetCongrats()" class="resetBtn">
			<div id="add-agua">
				
			</div>


			<style type="text/css">
				/* COMPUTADOR >1024px */ 


		/*MENU*/
		body{
			background: #ecf9ff;
			margin: 0px;
			padding: 0px; 
		}

		#menu{
			background-color: #d0f4ff;
			width: 100%;
			height: 6em;
			border-bottom: 1.4px solid #bfbfbf;
			border-top: 0.5px solid #bfbfbf;

		}
		.a{
			padding: 0px;
			margin: 0px;
			right: 93%;
			margin: 4px -20px 0px 10px;
			transform: rotate(25deg);
			position: absolute;
			cursor: pointer;

		}
		.a:hover{
			transform: rotate(16deg);
			transition: all 0.500s;  
		}
		h1{
			padding: 1.8% 0% 0% 8%;
			margin: 0px;
			font-size: 3.5em;
			color: #00c4ff;
			font-family: monospace;
			float: left;
			letter-spacing: -2px;
			font-weight: 700;
			cursor: pointer;
		}
		h1:hover{
			color: #00a9dc;
			transition: all 0.500s; 
		}
		ul{
			float: right;
			padding: 2% 5% 0% 0%;
			margin: 0px; 

		}
		ul li{
			display: inline-block;
			margin: 0px 0% 0px 0px;
			padding: 10px;
			background-color: #bdeefd;
			border-radius: 15px; 
			transition: all 0.500s;

		}
		ul li:hover{
			background: #a0e2f7; 

		}
		ul li a:hover{
			transition: all 0.500s;
			color: #007396;
		}
		ul li a{
			padding: 0% 0% 0% 0%;
			text-decoration: none;
			font-size: 160%;
			color: #009ece;
			font-family: sans-serif;
			letter-spacing: 1px;
			font-weight: 600;
			cursor: pointer;

		}

		#home{
			background: #e1f6fb;
			width: 75%; 
			height: 27.5em;
			text-align: center;
			margin: 25px auto 0px auto;
			padding: 0px;
			border-radius: 10px;
			border: solid 1px #969696;
		}
		#home img{
			/*width: 190px;
			height: 190px;*/
			border-radius: 100%;
			margin: 30px 0px 0px 0px;
		}

		h2{
			font-size: 1.8em;
    		font-family: sans-serif;
    		color: #00c4ff;
    		margin: 0px 0px 0px 0px;
    		padding: 10px 0px 12px 0px;
    		background: #caf0fb;
    		border-radius: 9px;
    		text-align: center;
		}
		p{
			margin: 22px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			font-family: sans-serif;
			font-size: 111%;
			color: #00c4ff;
		}
		.res{
			transition: all 0.500s;
		}
		input{
			background: none;
		    width: 30%;
		    padding: 8px 3px 8px 3px;
		    margin: 21px 0px 0px 0px;
		    border-radius: 10px;
		    border: solid 2px #00c4ff;
		    color: #00c4ff;
		    font-size: 90%;
		    text-align: center;
		    font-family: sans-serif;
		    outline: none;
		    font-weight: 600;
		}
		.btn-btn{
			width: 26%;
		    border-radius: 10px;
		    padding: 10px 0px 10px 0px;
		    margin: 30px 0px 10px 0px;
		    font-size: 120%;
		    cursor: pointer;
		    background: #00adff;
			color: white;
		}
		.btn-btn:hover{
			background: none;
			border: solid 2px #00adff;
			color: #00adff;
			transition: all 0.500s;
		}
		.btn-view{
			width: 26%;
		    border-radius: 10px;
		    padding: 10px 0px 10px 0px;
		    margin: 30px 0px 10px 0px;
		    font-size: 120%;
		    cursor: pointer;
		    background: #00adff;
			color: white;
		}
		.btn-view:hover{
			background: none;
			border: solid 2px #00adff;
			color: #00adff;
			transition: all 0.500s;
		}
		#cfm1{
			color: red;
			margin: -26px 0px 0px 0px;
			padding: 0px 0px 0px 0px;

		}
		#cfm{
			color: green;
			margin: -26px 0px 0px 0px;
			padding: 0px 0px 0px 0px;

		}
		#meta{
			width: 73%;
			height: 14vh;
			border-radius: 20px;
			background: #bdeefd;
			margin: 30px auto 26px auto;
			z-index: 100;   
		}
		.barra{
			width: 48%;
    		height: 4vh;
    		border-radius: 6px;
			background: #f9f9f9;
			margin: 6px auto 0px auto;    
			position: absolute;
			right: 26%;
		}
		.barra-meta{
			width: 0.5%;
    		height: 4vh;
   			border-radius: 6px;
			background: #00adff;  
			margin: 6px auto 0px auto; 
			position: absolute;
			right: 26%;
		}
		.barra-meta:hover{
			background: #006494;
			transition: all 0.500s;
		}
		.media-meta{
			float: left;
    		padding: 0px;
    		margin: -19px 0px 0px 34px;
    		color: #0082bf;
    		transition: all 0.500s; 
		}
		.media-fixa{
			float: left;
    		padding: 0px;
    		margin: -19px 0px 0px 0px;
    		color: #0082bf;
    		transition: all 0.500s; 
		}
		.name-p{
			padding: 10px 0px 0px 0px;
			color: #0082bf;
		}
		.add-btn, .resetBtn{
			width: 80px;
			height: 80px;
			border-radius: 100%;
			padding: 5px;
			text-align: center;
			font-size: 1.5em;
			float: right;
			margin: -102px 66px 0px 0px;
			border: 2px solid #00adff;
			color: #00adff;
			cursor: pointer;
			position: fixed;
    		right: 0%;
		}
		.add-btn:hover,.resetBtn:hover{
			transition: all 0.500s;
			border: 2px solid #007bb5;
			color: #007bb5;
		}
		/*ADD AGUA*/

		.add_agua{
			width: 55%;
		    height: 20em;
		    border-radius: 9px;
		    background: #e1f6fb;
		    margin: -366px auto 0px auto; 
		    z-index: 1000;
		    position: relative;
		    text-align: center;
		    border: 1px solid #969696;
		}

		#parabens{
			width: 300px;
			height: 300px;
			border-radius: 16%;
			color: #00a9dc;
			border: 2px solid #00a9dc;
			text-align: center;
			margin: 0px;
			position: absolute;
			top: 31%;
    		left: 38%;
   			background: #e1f6fb;
   			transition: all 0.600s;

		}
		h2 .btn-parabens{
			background: none !Important;
			font-size: 2.4em;
			margin: 70px 0em 0em 0em !Important;
			font-family: monospace;
			padding: 0px 15px 0px 15px;
			width: 20%;
		}
		#parabens:hover{
			transition: all 0.500s;
			background: #b9f0fd;  
		}
		#historico-corpo{
			position: absolute;
			width: 75%;
		}
		.historico{
			width: 8%;
		    float: left;
		    padding: 0px;
		    border: 1px solid #969696;
		    /*position: absolute;
		    top: 53%;
		    right: 78%;*/
		    border-radius: 7%;
		    margin: 30px 0px 0px 10px;
		    display: block;
		}
		.historico:hover{
			box-shadow: 0px 3px 6px 0px #00b8ff;
			transition: all 0.300s;
			cursor: pointer;
		}
		.historico img{
			width: 95%;
			margin: 0px !Important;

			
		}
		.historico .horario{
			text-align: center;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 4px 0px;
    		font-weight: 600;	
    		font-size: 80%;
		}
		.histQuant{
			text-align: center;
			margin: 0px 0px 0px 0px !Important;
			padding: 0px 0px 4px 0px;
			font-size: 80%;
			padding: 1px;
    		font-weight: 600;
    		background: #caf0fb;
    		border-radius: 5px; 	
    		font-size: 100%;
    		color: #0082bf;
		}
			</style>

	<script type="text/javascript">

		// Tela de inicio - estatísticas
		var telaEstatisticas = document.querySelector('#home')
		// agua

		var boxAdicionarAgua = document.querySelector(".add_agua") // box para add agua
		var valorDaMedia = Number(0) // quantidade de agua
		var saidaAgua = document.querySelector('.media-meta') // saida do valor da quantidade de agua
		var progressoAgua = document.querySelector('.barra-meta')
		var exibirboxAdicionarAgua = document.querySelector('.add-btn'),
		resetVer = document.querySelector('.resetBtn')



		// Saida de mensagem de erro
		var msgErro = document.querySelector('.msgErro')

		// Histórico
		var idHistorico = document.querySelector('#historico-corpo')
		var histCorpo = document.querySelector('.hist')
		
		//Box parabens
		var boxCongrats = document.querySelector("#parabens")


		//Não exibir na tela
		boxAdicionarAgua.style.display = "none"
		boxCongrats.style.display = "none"
		resetVer.style.display = "none"


		// horario que entrou
		var HoraNotFicacao = 2
		var temp = new Date()
		var HoraQentrou = temp.getHours()
		var minQentrou = temp.getMinutes()

		
		//DATA atualizando
		function data() {
			var temp0 = document.querySelector('.tempo'),
			tempo = new Date,
			horas = tempo.getHours()
		 	var min = tempo.getMinutes(),
			seg = tempo.getSeconds(),
			dia = tempo.getDay()+8,
			mes = tempo.getMonth()+1,
			ano = tempo.getYear()
			temp0.innerHTML = `Tempo: ${horas}:${min}:${seg} Data: ${dia}/${mes}`

		} setInterval(data, 1000) // atualizar o horario a cada 1s
		function add_remove() {
			//aparecer/desaparecer
			telaEstatisticas.style.opacity = '0.3'
			boxAdicionarAgua.style.opacity = '1.0'
			boxAdicionarAgua.style.display = "block"
			exibirboxAdicionarAgua.style.display = 'none'
		}
		function cancelar() {
			telaEstatisticas.style.opacity = '1.0'
			boxAdicionarAgua.style.display = "none"
			exibirboxAdicionarAgua.style.display = 'block'
		}
		function resetar_parabens() {
			valorDaMedia = 0
			saidaAgua.innerHTML = "0"
			telaEstatisticas.style.opacity = '1'
			boxAdicionarAgua.style.display = 'none'
			boxCongrats.style.display = "none"
			progressoAgua.style.width = '0.5%'
			exibirboxAdicionarAgua.style.display = 'block'
			while(idHistorico.firstChild){
				idHistorico.removeChild(idHistorico.firstChild)
			}
			

		}
		function resetCongrats() {
			valorDaMedia = 0
			saidaAgua.innerHTML = "0"
			boxAdicionarAgua.style.display = 'none'
			progressoAgua.style.width = '0.5%'
			exibirboxAdicionarAgua.style.display = 'block'
			resetVer.style.display = "none"
			while(idHistorico.firstChild){
				idHistorico.removeChild(idHistorico.firstChild)
			}
			

		}
		function view() {
			boxCongrats.style.display = 'none'
			telaEstatisticas.style.opacity = '1'
			boxAdicionarAgua.style.display = 'none'
			boxCongrats.style.display = "none"
			exibirboxAdicionarAgua.style.display = 'none'
			resetVer.style.display = "block"
		}
		/*var rel = 0
		while(rel<2000){
			if(HoraQentrou==Number(HoraNotFicacao)+Number(horas)){
			}
		}*/

		/*var temp = new Date(),
		horas02 = temp.getHours()

		function Not() {
			var tempo = new Date(),
			horas = tempo.getHours()

			if (horas==horas02) {
				console.log('Notificação')
				
			}
		} setInterval(Not, 1000)*/


		function js() {
			var ml = document.querySelector('.ml') // Input para adicionar água
			if (!ml || ml.length == 0) {
				msgErro.innerHTML = "Ml inválido"
				event.preventDefault()
				return false
			}
			if (ml.value < 200 || ml.length < 0) {
				msgErro.innerHTML = `Minímo 200ML`
				event.preventDefault()
				return false
			}
			if (ml.value > 500) {
				msgErro.innerHTML = `Máximo 500ML`
				event.preventDefault()
				return false
			}
			else{
			msgErro.innerHTML = '' // Saida de erro ficar vazia
			exibirboxAdicionarAgua.style.display = 'block' // exibir o botão de add agua
			var rel = 0
			console.log()
			while(rel < Number(2000)){
				rel=rel+Number(ml.value)
				valorDaMedia = Number(valorDaMedia)+Number(rel)
				saidaAgua.innerHTML = `${valorDaMedia}`

				// historico
				var quant = Number(0)
				quant = Number(quant)+Number(ml.value)
						var temp0 = new Date()
						var Hh = temp0.getHours()
						var Mm = temp0.getMinutes()
					idHistorico.innerHTML += `<div class='historico'><img src='/beber-agua/imgs/logo.png'><p class='horario'>${Hh}:${Mm}</p><p class='histQuant'>${quant}ML</p></div>`

				boxAdicionarAgua.style.display = "none"
				telaEstatisticas.style.opacity = '1'
				if (Number(valorDaMedia)>249){
					//estilo: progresso e transição
					progressoAgua.style.width = "6%"
					progressoAgua.style.transition = "all 2s"

				}
				if (Number(valorDaMedia)>499){
					//estilo: progresso e transição
					progressoAgua.style.width = "13%"
					progressoAgua.style.transition = "all 2s"
				}
				if (Number(valorDaMedia)>749){
					//estilo: progresso e transição
					progressoAgua.style.width = "18%"
					progressoAgua.style.transition = "all 2s"
				}
				if (Number(valorDaMedia)>999){
					//estilo: progresso e transição
					progressoAgua.style.width = "24%"
					progressoAgua.style.transition = "all 2s"
				}
				if (Number(valorDaMedia)>1249){
					//estilo: progresso e transição
					progressoAgua.style.width = "31%"
					progressoAgua.style.transition = "all 2s"
				}
				if (Number(valorDaMedia)>1499){
					progressoAgua.style.width = "35%"
					progressoAgua.style.transition = "all 2s"
				}
				if (Number(valorDaMedia)>1749){
					//estilo: progresso e transição
					progressoAgua.style.width = "41%"
					progressoAgua.style.transition = "all 2s"
				}
				if(Number(valorDaMedia)>=2000){
					//estilo: progresso e transição e aparecer o congrats
					progressoAgua.style.width = "48%"
					progressoAgua.style.transition = "all 2s"
					telaEstatisticas.style.opacity = '0.2'
					boxCongrats.style.display = "block"
					exibirboxAdicionarAgua.style.display = 'none'
				}
				break
			}
		}
	}




			

	</script>


</body>
</html>

Deêm um ctrl+c ctrl+v

joseph_dev · 13 de novembro de 2020

Cara, não sei se você vai conseguir fazer isso sem que o usuário interaja com a página. Mas você pode colocar um botão "Ativar Lembrete" para rodar essa função aí, forçando o usuário clicar nele ou pode colocar dentro de alguma função em que o usuário interaja.

ativarLembrete = function(){
  setTimeout(function(){  
    var audio = new Audio('alerta.mp3');
    audio.addEventListener('canplaythrough', function() {
    audio.play();
    ativarLembrete();  
    });
  }, 7200000);
}

Já é um norte aí...

Adriano_web · 13 de novembro de 2020

@Wagner Leandro Tem novas tecnologias como Funções Assíncronas(ES7) que são executadas a partir de um certo período. Você poderia usá-las em conjunto com funções com o window.setTimeout().

Sintaxe:

async function nome([param[, param[, ... param]]]) {
   instruções
}

Dê uma olhada MDN:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas

Wagner Leandro · 13 de novembro de 2020

3 horas atrás, Adriano_web disse:
@Wagner Leandro Tem novas tecnologias como Funções Assíncronas(ES7) que são executadas a partir de um certo período. Você poderia usá-las em conjunto com funções com o window.setTimeout().

Sintaxe:
async function nome([param[, param[, ... param]]]) {
   instruções
}
Dê uma olhada MDN:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas

valeu

3 horas atrás, joseph_dev disse:
Cara, não sei se você vai conseguir fazer isso sem que o usuário interaja com a página. Mas você pode colocar um botão "Ativar Lembrete" para rodar essa função aí, forçando o usuário clicar nele ou pode colocar dentro de alguma função em que o usuário interaja.
ativarLembrete = function(){
  setTimeout(function(){  
    var audio = new Audio('alerta.mp3');
    audio.addEventListener('canplaythrough', function() {
    audio.play();
    ativarLembrete();  
    });
  }, 7200000);
}
Já é um norte aí...