Pesquisar neste blog

29/06/2021

Eventos #03 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}


Arquivo: eventos3.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Eventos #03</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        input {
            font-size: 2em;
        }

        #resultado {
            display: flex;
            flex-direction: row;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Eventos #03</h1>
    <div id='div1'>1</div>
    <div id='div2'>1</div>
    <input id='input1' type='text' placeholder='Digite Algo!'>
    <span id='resultado'></span>

    <script>
        // ...
        function exibirDadosEvento(e) {
            $('#resultado').empty()//zera o resultado
            const div1 = $('<div>')
            const div2 = $('<div>')
            
            $('#resultado').append(div1, div2)
            div1.append(`target: ${e.target.id}`)//captura o id do elemento que disparou o evento
            
            const rt = e.relatedTarget ? e.relatedTarget.tagName : null //evento associado ao target
            div1.append(`<br>relatedTarget: ${rt}`)//se o rt estiver presente(set) retorna nulo
        
            div1.append(`<br>type: ${e.type}`)//tipo de evento que aconteceu
            div1.append(`<br>which: ${e.which   }`)//associado ao teclado mostra a tecla, se for mouse mostra o q esta precionado
            //tecla do windows
            div1.append(`<br>metaKey: ${e.metaKey}`)
            
            div2.append(`pageX: ${e.papeX}`)
            div2.append(`<br>pageY: ${e.pageY}`)
            div2.append(`<br>clientX: ${e.clientX}`)
            div2.append(`<br>cientY: ${e.clientY}`)

            const obs = e.data ? e.data.obs : null
            div2.append(`<br>obs: ${obs}`)
        }
        //evento associado ao mouse
        $('#input, #div2').on('mouseenter mouseleave', {obs: 'Funciona!'}, exibirDadosEvento)
        //evento associado ao imput
        $('input').keyup(exibirDadosEvento)
    </script>
</body>

Arquivo: jquery.js   Clique aqui para fazer o download do arquivo












Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

28/06/2021

Eventos #02 com jQuery em HTML

 Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}

Arquivo: jquery.js  clique aqui para fazer o download

Arquivo: eventos2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Eventos #02</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        input {
            font-size: 2em;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Eventos #02</h1>
    <div id='div1'>1</div>
    <div id="resultado1">?</div>
    <br>
    <input type="text" placeholder="Digite e Selecione">
    <div id="resultado2">?</div>
    <script>
        // ...seleciona a borda do ponteiro na div1 '1'
        const alternarDestaque = () => $('#div1').toggleClass('destaque')
        //$('#div1').hover(alternarDestaque, alternarDestaque)//ou , e => {}
        //ou 2° metodo
        //$('#div1').on('mouseenter mouseleave', alternarDestaque)

        //evento só vai acontecer 1 única vez
        $('#div1').on('mouseenter', e => alert('AVISO IMPORTANTE:\nObrigado'))
        $('#div1').dblclick(e => $('#div1')).fadeOut(1000).fadeIn(1000)//aparece e reaparece

        //função para sempre que a tela for redimencionada
        $(window).resize(function (e) {
            const l = $(window).width() // captura a largura da tela
            const a = $(window).height()//captura a altura da tela
            $('#resultado1').html(`Largura: ${l} e Altura: ${a}`)//imprimi a largura e altura
        })

        //evento que seleciona uma parte de um texto
        $(':input').select(e => {
            const inicio = e.target.selectionStart
            const fim = e.target.selectionEnd
            $('#resultado2').html(e.target.value.substring(inicio, fim))
        })
        </script>
</body>

Saída gerada








Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

21/06/2021

Reversão de partidas elétricas

Reversão de partidas nos motores elétricos usando Controle Lógico Programável.

RT =     Relé térmico (Reversão térmica)
B0 =     Botão de desligar
BH =    Botão no sentido horário
BAH = Botão de acionamento no sentido horário
CH =    Contactora no sentido horário
CAH = Contactora no sentido anti -horário

Software: Atos A1 Soft




Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

Eventos #01 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}


Arquivo: jquery.js clique aqui para fazer o download do arquivo

Arquivo: eventos1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Eventos #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        input {
            font-size: 2em;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Eventos #01</h1>
    <div id='posicao'></div>
    <div id='cliques'>Cliques: 0</div>
    <input type="text" placeholder="Cor de Background">

    <script>
        // função para mostrar os movimentos do mouse
        function mostrarPosicaoMouse(e){
            $('#posicao').html(`x: ${e.clientX} y: ${e.clientY}`)
        }
        //registra os eventos jQuery
        $('body').on('mousemove', mostrarPosicaoMouse)

        //seleciona o elemento e para o mouse no quadro
        $('#posicao').mouseover(e => {
            $('body').off('mousemove', mostrarPosicaoMouse)// para a posição no quadro
        })

        //começa novamente a mostar a posição do mouse
        $('#posicao').mouseleave(e => {
            $('body').on('mousemove',mostrarPosicaoMouse)
            //$('#body').mousemove(mostrarPosicaoMouse)
        }) 

        let cliques = 0
        $('body').click(e => {
            $('#cliques').html(`Cliques: ${++cliques}`)
        })

        const Background = $('body').css('background-color')

        $('input').keyup(function (e) {
            const valor = $(this).val()
            //pode ter de um dígito, de a até um  f (minusculo), //e A até F (maíusculo), de 3 á 6 dígitos
            if (valor.match(/#[\da-fA-F]{3,6}/)) {
                $('body').css('background-color', valor)
            }else{
                $('body').css('background-color', BackgroundOriginal)
            }
        })
    </script>
</body>












Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

20/06/2021

Contador de 0 a 99 com PIC 16F876

PIC 16F876A






























Código feito no CCS Compiler

#include <main.h>
#fuses XT, NOWDT,
#use delay(clock = 4MHz)
#use fast_io(a)
#use fast_io(b)

//MULTIPLEXADO
byte display[10] = {0x3f,0x06, 0x5b, 0x4f, 0x66, 0x6d, 0x7d, 0x07, 0x7f, 0x6f};

void main(void){
   byte ud = 0, dec = 0;
   set_tris_b(0x00);
   set_tris_a(0x00);
   output_b(0x00);// atribui aos ports tudo 0
   
   while(TRUE){
      
      for(dec = 0; dec < 10; dec++){//controla as dezenas
         for(ud = 0; ud < 10; ud++){// controla as unidades
            output_a(0b00000010);
            output_b(display[ud]);
            delay_ms(100);
            
            if(dec == 0){
               output_a(0b00000011);
            }else{
               output_a(0b000000001);
               output_b(display[dec]);
               delay_ms(100);
            }
         }
      }
      //TODO: User Code
   }

}


Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

23/05/2021

Manipulando CSS em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}


Arquivo: manipulandoCSS.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Manipulando CSS</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Manipulando CSS</h1>
    <div id='div1'>1</div>
    <div id='div2'>2</div>
    <div id='div3'>3</div>
    <div id='resultado'></div>
    <script>
       
    </script>
</body>

Saída anterior

Arquivo atualizado: manipulandoCSS.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Manipulando CSS</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Manipulando CSS</h1>
    <div id='div1'>1</div>
    <div id='div2'>2</div>
    <div id='div3'>3</div>
    <div id='resultado'></div>
    <script>
        // selecionar a fonte atual
        const fonte = $('#div1').css('font-family')
        $('#resultado').append(`Fonte é ${fonte}`)

        $('#div1').css('font-size', '3em')//alterando a propriedade
        $('#div1').css({'font-size':'3.5em', 'color': 'yellow'})//alterando 2 propriedades
        $('#divi1').css('font-size', function(){
            return `${2*2}em`
        })

        $('#div2').addClass('destaque')//adiciona a classe destaque

        //verificando se tem uma determinada classe
        const temClasse = $('#div2').hasClass('destaque')
        $('#resultado').append(`<br>Tem class ? = ${temClasse}`)

        $('#div2').removeClass('destaque')//remove classe destaque
        $('#div2').toggleClass('destaque')
        $('#div2').toggleClass('destaque')
    </script>
</body>

Saída atualizada








Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

01/05/2021

Semáforo com PIC 16F877A

 Desafio1: construir um semáforo para carros e pedestre

Descrição do funcionamento.

O semáforo deve ficar sempre verde para os carros e vermelho para os pedestres. Entretanto
quando um pedestre acionar um dos botões colocados em ambos os lados da rua, o semáforo
inicia a sequência de liberação da passagem para ele. Essa sequência e descrita a seguir:

1. Em funcionamento sem pedestre o sinal é sempre verde para os carros e vermelho
para a passagem de pedestre

2. Após um pedestre pressionar o botão os sistema espera 10 segundo mantendo o
verde para os carros e vermelho para o pedestre.

3. Então, sinal muda amarelo para os carros e continua vermelho para os pedestre por 2
segundos.

4. Após o tempo com amarelo ligado, o sinal dos carros muda para vermelho, espera um
segundo e o sinal do pedestre vai para verde;

5. Depois de 10 segundos dando passagem para os pedestres, o sinal (do pedestre)
começa a piscar e fica assim por mais 5 segundos;

6. Então o sinal do pedestres fica vermelho.

7. Após um segundo o sinal para os carros muda para verde, mantendo assim até um
pedestre pressionar o botão novamente.


Figura 1 - Semáforo de pedestre
















Resolução:

Código feito em CCS Compiler

#include <16F877A.h>
#device adc = 8
#use delay(crystal = 20MHz)
#fuses HS, NOWDT, NOPROTECT, NOLVP
#define D1 1000
#define D2 2000
#define D3 3000
#define D4 100

//0b00000001 // vermelho carros
//0b00000010 // amarelo  carros
//0b00000100 // verde    carros
//0b00000001 // vermelho para carros e vermelho para pedestres
//0b01000100 // verde para carros e vermelho para pedestres
//0b01000010 // amarelo para carros e vermelho para pedestres

boolean flag = false;
int cont = 0;

void main(){

   while(TRUE){
      //TODO: User Code
      
      if(input(PIN_B0) == TRUE){
         flag = true;
         output_high(PIN_B1);
      }
      
      cont++;
      delay_ms(10);
      
      
      
      switch(cont){
         
         case 1:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
            
            output_d(0b01000100);
            delay_ms(D3);
            
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
         break;
         
         case 2:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
         
           output_d(0b01000010);
           delay_ms(D2);
                                            
           if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
           }
           
         break;
         
         case 3:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
                  
            output_d(0b01000001);
            delay_ms(D3);
            
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
            
            delay_ms(D4);
            
            if(flag == true){
               output_d(0b10000001);
               delay_ms(D3);
               
               for(int i = 0; i < 10; i++){
                  output_high(PIN_D7);
                  delay_ms(200);
                  output_low(PIN_D7);
                  delay_ms(200);
               }
               
               output_low(PIN_B1);
               flag = false;
               cont = 0 ;
            }
            cont = 0;
         break;   
         
      }
         
   }

}



Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil

14/04/2021

Modificando HTML com jQuery #01

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Modificando HTML #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Modificando HTML #01</h1>
    <div id='conteudo1'></div>
    <div id='conteudo2'></div>
    <div id='conteudo3'></div>
    <div>Sem ID!</div>

    <script>
        // Conteúdo 1
        $('#conteudo1').append('<p1>1<p/>')//selecionando a partir do id, foi adicionado um parágrafo 1
        
        //Conteúdo 2, dentro de array é gerado 3 li (itens de 1 lista)
        const elementos = [
            $('<li>').append('Feijão'), $('<li>').append('Carne')
        ]
        
        //adiciona 1 intem sorvete e depois os 3 li do array dentro da lista 
        const lista = $('<ul><li>Sorvete</li><ul>').append(elementos)
        $('#conteudo2').append(lista)

        // Conteúdo 3 (append via anexando)
        $('#conteudo3').append(['<h1>1</h1>', '<h1>2</h1>']).prepend('<h1>0</h1>')//coloca o 0 antes do 1 e 2
        //$('#conteudo3').html('<h1>1 2 3</h1>')// substitui o conteúdo acima por esse
        //$('#conteudo3').text('<h1>123</h1>')

        //alterando todos
        //$('div').html('<strong>Todos !</strong>')
    </script>
</body>

Saída 1



Saída 2


Saída 3


Postado por às Nenhum comentário:
Marcadores:
Local: Cuiabá - Coxipó da Ponte, Cuiabá - MT, Brasil
Assinar: Postagens (Atom)