Pesquisar neste blog

08/07/2021

Plugin #02 com jQuery em HTML

TEMPORIZADOR EM HTML USANDO jQuery

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: temporizador.js
(function ($) {
    $.fn.temporizador = function (opcoes) {
        const opcoesFinais = $.extend({
            mensagem: 'Em breve!',
            horario: '23:59:59'
        }, opcoes)

        const horaDezena = $('<span class="digito">').html('0')
        const horaUnidade = $('<span class="digito">').html('0')
        const minutoDezena = $('<span class="digito">').html('0')
        const minutoUnidade = $('<span class="digito">').html('0')
        const segundoDezena = $('<span class="digito">').html('0')
        const segundoUnidade = $('<span class="digito">').html('0')

        const separadorHora = $('<span class="separador">').html(':')
        const separadorMinuto = $('<span class="separador">').html(':')
        const mensagem = $('<div class="mensagem">').html(opcoesFinais.mensagem)

        $(this).addClass('temporizador')
        $(this).append(horaDezena, horaUnidade, separadorHora,
            minutoDezena, minutoUnidade, separadorMinuto,
            segundoDezena, segundoUnidade, mensagem)

        const regex = new RegExp(/(\d\d):(\d\d):(\d\d)/)
        const horarioAlvo = regex.exec(opcoesFinais.horario)
        // console.log(horarioAlvo)

        let temporizador = setInterval(() => {
            const agora = new Date()
            const alvo = new Date()
            alvo.setHours(horarioAlvo[1])
            alvo.setMinutes(horarioAlvo[2])
            alvo.setSeconds(horarioAlvo[3])

            const diferencaEmMili = alvo.getTime() - agora.getTime()
            if (diferencaEmMili >= 0) {
                const diferenca = regex.exec(new Date(diferencaEmMili).toISOString())
                console.log(diferenca)

                horaDezena.html(diferenca[1][0])
                horaUnidade.html(diferenca[1][1])
                minutoDezena.html(diferenca[2][0])
                minutoUnidade.html(diferenca[2][1])
                segundoDezena.html(diferenca[3][0])
                segundoUnidade.html(diferenca[3][1])
            } else {
                clearInterval(temporizador)
            }
        }, 1000)
        
        return this
    }
})(jQuery)

Arquivo: plugin2.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Plugin #02</title>
    <link rel='stylesheet' href='css/temporizador.css'>
    <script src='js/jquery.js'></script>
</head>

<body>
    <h1>Plugin #02 - Temporizador</h1>
    <div></div>
    <script src="js/temporizador.js"></script>
    <script>
        // ...
        $('div').temporizador({
            mensagem: 'Em breve um novo site para você',
            horario: '20:00:00'
        }).hide().fadeIn(3000)
    </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

07/07/2021

Plugin #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: plugin1.html
<!DOCTYPE html>
<html>

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

<body class='conteudo exercicio'>
    <h1>Plugin #01</h1>
    <div>
        {{ 1 + 2 }}
        Texto 1
        {{ 3 ** 3 }}
        Texto 2
        {{ console.log('Funcionou!') }}
        Texto 3
        {{ (function() { return 'Legal!!!' })() }}
        Texto Final
    </div>

    <script>
        //Objetivo: converter o texto acima em algo concreto
        //const $ = {nome: 'Não é o jQuery'}
        (function ($) {
            $.fn.interpretar = function (){
                const retirarChaves = s => s.substring(2, s.length -2)
                const conteudo = $(this).html()
                const expressoesComChaves = conteudo.match(/\{\{.+\}\}/g)
                const expressoes = expressoesComChaves.map(retirarChaves)
                const resultados = expressoes.map(e => eval(e))

                let conteudoFinal = conteudo
                for(let i = 0; i < expressoesComChaves.length; i++){
                    conteudoFinal = conteudoFinal.replace(
                        expressoesComChaves[i], resultados[i]
                    )
                }
                $(this).html(conteudoFinal)
            }
        })(jQuery)
        $('div').interpretar()//chamando o plugin
    </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

06/07/2021

Animação #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: animacao2.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Animação #02</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        body {
            position: relative;
            background-color: #999;
            color: #000;
        }

        div {
            position: absolute;
            display: inline;
            border: solid 10px #000;
            padding: 50px;
            font-size: 3em;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div>Animar!</div>

    <script>
        //Função para alterar largura
        function alterarLargura(valor, duracao, callback) {
            $('div').animate({ width: `+=${valor}` }, duracao
                , callback)
        }

        //função para mover na diagonal
        function moverDiagonal(valor, duracao, callback) {
            $('div').animate({ top: `+=${valor}`, left: `+=${valor}` }
                , duracao, callback)
        }

        //função de girar
        function girar(valor, duracao, callback) {
            $('div').animate({ transform: `+=${valor}` }, {
                step: function (valor) {
                    $(this).css('transform', `rotate(${valor}deg)`)
                },
                duration: duracao
            }, 'linear', callback)
        }

        //chamando as funções
        alterarLargura(300, 100, () => {
            alterarLargura(-300, 'slow', () => {
                moverDiagonal(300, 600, () => {
                    girar(3300, 3000)
                })
            })
        })
    </script>
</body>


Arquivo: jquery.js clique aqui para fazer o download
































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

01/07/2021

Animação #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: animacao1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Animação #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        div {
            text-align: center;
        }
        button {
            font-size: 1.8em;
            margin: 10px;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Animação #01</h1>
    <button>Iniciar</button>
    <div id='animar'>Animar!</div>

    <script>        
        // tempo da animação
        $('button').click(e =>{
            const t = 450
            $('#animar').hide(t).show(t)
            //$('#animar').fadeOut(t).fadeIn(t)//se estiver exibindo vai esconder e vice verso
            $('#animar').fadeToggle(t).fadeToggle(t)
            //$('#animar').slideUp(t).slideDown(t)
            $('#animar').slideToggle(t).slideToggle(t)
        })

    </script>
</body>

Arquivo: jquery.js clique aqui para fazer o download





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

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
Assinar: Postagens (Atom)