Ir para conteúdo

FxDev

Members
  • Total de itens

    1
  • Registro em

  • Última visita

Posts postados por FxDev


  1. Estou desenvolvendo uma pagina em htm,que dentro dela existe 3 linguagens de programação as linguagens são : JavaScript,Css e o Htm (l) a pagina está feita porém estou com um problema no JavaScript que está dentro dessa pagina.não é um erro ele simplesmente da refresh ou carrega a pagina novamente toda vez que eu clico em um botão e eu gostaria de poder tirar essa parte dele pois esse botão tem duas funções,eu estou trabalhando com Internet das Coisas (IoT) e para isso preciso de um botão que quando pressionado ele mude esse estado essa parte de mudar o estado do botão eu já consegui fazer.agora meu ultimo problema é conseguir remover a parte a qual faz refresh ou recarrega a pagina,eu vi em um tópico sendo falado sobre a remoção dele totalmente das pagina se alguém souber como se faz e puder me ajudar agradeço.desde já meu muito obrigado! abaixo vou deixar a pagina que eu fiz.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Teste</title>
    
    <script type="text/javascript">
     function AlteraRele1(){
        var estado = document.getElementById("estado").innerHTML;
    
        if(estado == "0"){
            document.getElementById("estado").innerHTML="1";
    		document.getElementById("rele").innerHTML="<div class='rele1_ligado'></div>";
    		document.getElementById("botao").innerHTML="<a href='/?desligar' class='botao'>Desliga</a>";	
       	} else {
            document.getElementById("estado").innerHTML="0";
    		document.getElementById("rele").innerHTML="<div class='rele1_desligado'></div>";
    		document.getElementById("botao").innerHTML="<a href='/?ligar' class='botao'>Liga</a>";
        }
     } 
    
    </script>
    <style type="text/css">
     root { 
        display: block;
    }
    
    body {
        margin: 0;
        padding: 0;
    }
    
    #wrapper {
        padding-top: 40px;
        position: relative;
        width: 530px;
        height: 600px;
    	margin-right: auto;
    	margin-top: 0;
    	margin-left: auto;
        font-size: 30px;
        color: black;
        text-align: center;
        font-family: arial;
    }
    
    div.rele1_ligado {
        position: absolute;
        right: -190px;
        top: 40px;
        width: 300px;
        height: 206px;
        border: none;
        margin:auto;
    	background:url(Img/lampada_on.png) no-repeat left top;
    }
    
    div.rele1_desligado {
        position: absolute;
        right: -190px;
        top: 40px;
        width: 300px;
        height: 206px;
        border: none;
    	background:url(Img/lampada_off.png) no-repeat left top;
    }
    
    #div1 {
    	position: absolute;
    	right: 340px;
    	top: 180px;
        border-radius: 25px;
        border: 2px solid #000;
        width: 520px;
        height: 230px; 
    }
    
    #botao{
    	position: absolute;
    	right: 378px;
    	top: 119px;
    	width: 128px;
    	height: 36px;
    }
    
    .botao {
    	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    	box-shadow:inset 0px 0px 0px 0px #ffffff;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
    	background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
    	background-color:#ededed;
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	border-radius:6px;
    	border:1px solid #dcdcdc;
    	display:inline-block;
    	color:#ffffff;
    	font-family:arial;
    	font-size:28px;
    	font-weight:bold;
    	padding:0px 0px;
    	text-decoration:none;
    	text-shadow:0px 0px 0px #ffffff;
        width: 140px;
        text-align: center;
    }
    
    }.botao:active {
    	position:relative;
    	top:1px;
    }
    </style>
    </head>
    
    <body>
    <div id="div1">
      <div id='rele'></div>
      <div id='estado' style='visibility: hidden;'></div>
     <div id='botao' onclick="AlteraRele1();"></div>
     <script>AlteraRele1()</script></div>
    </body>
    </html>

     

×

Informação importante

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