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';
    srcurl('../fonts/Oswald-Regular.ttf'format('truetype');
}

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

html {
    height100%;
}

body {
    margin0;
    background-color#0D262D;
    color#fff;
    height100%;
}

table {
    border-collapsecollapse;
}

tr {
    border-bottomsolid 1px white;
}

td {
    font-size1.6em;
    padding10px;
}

li {
    font-size1.6em;
}

.conteudo {
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    min-height100%;
}

.exercicio div {
    font-size1.8em;
    bordersolid 5px #fff;
    padding0px 40px;
    margin10px;
}

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

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

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

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

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

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

.exercicio .destaque {
    bordersolid 10px greenyellow;
    colorgreenyellow;
    font-weightbold;
}

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(horaDezenahoraUnidadeseparadorHora,
            minutoDezenaminutoUnidadeseparadorMinuto,
            segundoDezenasegundoUnidademensagem)

        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




Nenhum comentário: