🔹Roleta - Poptop no centro

Roleta centralizada na página do cliente com janela flutuante

Item

<div class="hintup-poptop-wheel-client-logo">
    <img class="hintup-poptop-wheel-client-logo" src="@@logo@@" width="200">    
</div>

<div class="hintup-poptop-wheel-details-container">
    <input type="text" value="" class="hintup-poptop-wheel-input">

    <input type="text" class="hintup-poptop-wheel-cupom" disabled/>
    <input type="text" class="hintup-poptop-wheel-name" placeholder="Digite seu Nome" />
    <input type="email" class="hintup-poptop-wheel-email" placeholder="Digite seu E-mail" />
    <input type="text"  name="whatsapp" class="hintup-poptop-wheel-whats" placeholder="Digite seu WhatsApp" maxlength="15" />
    <input type="button" value="Sortear" onclick="window.hintup.env.hintup_poptop_wheel.rotateWheel();" class="hintup-poptop-wheel-button">
    <div class="hintup-poptop-wheel-rules">
    <strong>•</strong> Apenas um giro por compra.<br>
    <strong>•</strong> Cupom válido por 5 dias.<br>
    <strong>•</strong> Utilizaremos os seus dados para melhorar a experiência de navegação e para encaminharmos e-mails com informações do site.
    </div>
</div>

<div class="hintup-poptop-wheel-canvas">        
    <canvas class="hintup-poptop-wheel" width="550" height="550">Seu browser não suporta canvas</canvas>
</div>

Container

<div class="hintup-poptop-wheel-container">
    <div class="hintup-poptop-wheel-block" data-block="hintup_block"> </div>
    <div class="hintup-poptop-wheel-close">X</div> 
</div>

CSS

#manhattanHintup_roleta-1635088382 .hintup_logo_brand {
    bottom: 5px !important;
}
#manhattanHintup_roleta-1635088382 .hintup_logo_brand a {
    color: #bfbfbf !important;
}
#manhattanHintup_roleta-1635088382 {
    z-index: 999999999 !important;
}

.hintup-poptop-wheel-container {
    width: 400px;
    position: fixed;
    background: linear-gradient(121deg, #e1e1e1 0, #f3f3f3 50%);
    left: -1000px;
    top: 50px;
    height: 650px;
    transition: all 1s ease;
    border-radius: 15px;
}
.hintup-poptop-wheel-close {
    position: absolute;
    line-height: 24px;
    right: 20px;
    top: 20px;
    background: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #000000;
    font-size: 15px;
    cursor: pointer;
    font-family: arial !important;
    font-weight: 900 !important;
    box-shadow: 0 0 2px 0 black inset, 0 0 1px 2px black;
}
.hintup-poptop-wheel-container-move {
    left: calc(50% - 200px);
    transition: all 1s ease;
}
.hintup-poptop-wheel-client-logo {
    margin: 10px auto !important;
    display: block;
    position: relative;
    width: 150px;
}
.hintup-poptop-wheel-details-container {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 80px;
}
.hintup-poptop-wheel-cupom:hover,
.hintup-poptop-wheel-cupom:visited,
.hintup-poptop-wheel-cupom:link,
.hintup-poptop-wheel-cupom:active,
.hintup-poptop-wheel-cupom:focus {
    text-decoration: none;
    outline: none;
}
.hintup-poptop-wheel-cupom {
    height: 25px;
    width: 100%;
    font-size: 16px;
    border: 0 !important;
    text-align: center;
    color: #ffffff;
    background: #000 !important;
    visibility: hidden;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 0;
    cursor: text;
}
.hintup-poptop-wheel-cupom::placeholder {
    color: rgb(187, 187, 187);
}
.hintup-poptop-wheel-input {
    overflow: hidden;
    position: absolute;
    left: -3000px;
}
.hintup-poptop-wheel-name{
    position: relative;
    height: 25px;
    width: 100%;
    font-size: 16px;
    padding: 0 0 0 10px;
    background: #fff;
    top: 10px;
    outline: none;
    border: 0;
    border-radius: 5px;
    margin: 3px 0;
}
.hintup-poptop-wheel-email {
    position: relative;
    height: 25px;
    width: 100%;
    font-size: 16px;
    padding: 0 0 0 10px;
    background: #fff;
    top: 10px;
    outline: none;
    border: 0;
    border-radius: 5px;
    margin: 3px 0;
}
.hintup-poptop-wheel-whats {
    position: relative;
    height: 25px;
    width: 100%;
    font-size: 16px;
    padding: 0 0 0 10px;
    background: #fff;
    top: 10px;
    outline: none;
    border: 0;
    border-radius: 5px;
    margin: 3px 0;
}
.hintup-poptop-wheel-button {
    width: 100%;
    margin-top: 13px;
    margin-bottom: 10px;
    background-color: #0a0b68;
    font-size: 14px;
    color: #fff;
    outline: 0;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 5px 20px;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
    border: 0;
}
.hintup-poptop-wheel-button:hover {
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.25),rgba(0,0,0,0.12));
    cursor: pointer;
}
.hintup-poptop-wheel-rules {
    color: #36173c;
    font-size: 12px;
    width: 100%;
}
.hintup-poptop-wheel {
    position: absolute;
    left: -76px;
    top: 200px;
    z-index: 0;
    display: block;
    width: 550px;
    height: 550px;
    margin: 10px auto;
    transform: scale(0.6);
}    

@media screen and (max-width: 768px) {
    .hintup-poptop-wheel-container {
        width: 95%;
    }
    .hintup-poptop-wheel {
        left: -91px;
        top: 178px;
    }    
    .hintup-poptop-wheel-details-container {
        width: calc(100% - 40px);
        right: 15px;
    }
    .hintup-poptop-wheel-rules {
        font-size: 9px;
    }
}

Javascript

window.hintup.env.hintup_poptop_wheel = {};

window.hintup.env.hintup_poptop_wheel.start = function() {
    window.hintup.env.hintup_poptop_wheel._control = 200;
    window.hintup.env.hintup_poptop_wheel._interval = setInterval(function(){
        
        window.hintup.env.hintup_poptop_wheel.canvas = document.querySelector('.hintup-poptop-wheel');
        window.hintup.env.hintup_poptop_wheel.controlEffect();
        
        if (window.hintup.env.hintup_poptop_wheel.canvas != null) {
            clearInterval(window.hintup.env.hintup_poptop_wheel._interval);

            window.hintup.env.hintup_poptop_wheel.ctx = window.hintup.env.hintup_poptop_wheel.canvas.getContext('2d');
            window.hintup.env.hintup_poptop_wheel.ctx.beginPath();
            window.hintup.env.hintup_poptop_wheel.ctx.strokeStyle = "#000000";
            window.hintup.env.hintup_poptop_wheel.ctx.lineWidth = 5; 

            window.hintup.env.hintup_poptop_wheel.text_colors = ["#000","#fff","#000","#fff","#000","#fff","#000","#fff","#000","#fff","#000","#fff"];
            window.hintup.env.hintup_poptop_wheel.colors = ["#ffffff","#0a0b68", "#ffffff","#0a0b68", "#ffffff","#0a0b68", "#ffffff","#0a0b68", "#ffffff","#0a0b68","#ffffff","#0a0b68"];
            window.hintup.env.hintup_poptop_wheel.quienes = ["CUPOM 5%","CUPOM 7%","CUPOM 10%","FRETE GRÁTIS","CUPOM 5%","CUPOM 7%","CUPOM 10%","FRETE GRÁTIS","CUPOM 5%","CUPOM 7%","CUPOM 10%","FRETE GRÁTIS","CUPOM 5%","CUPOM 7%","CUPOM 10%","FRETE GRÁTIS"];
            window.hintup.env.hintup_poptop_wheel.cupons = ["5OFF","7OFF","10OFF","FRETEBLOSS","5OFF","7OFF","10OFF","FRETEBLOSS","5OFF","7OFF","10OFF","FRETEBLOSS","5OFF","7OFF","10OFF","FRETEBLOSS"];
            window.hintup.env.hintup_poptop_wheel.border_color = '#0a0b68';
            window.hintup.env.hintup_poptop_wheel.arrow = '#ffffff'
            window.hintup.env.hintup_poptop_wheel.insideRadiusColor = '#b5272e'
            
            window.hintup.env.hintup_poptop_wheel.startAngle = 0;
            window.hintup.env.hintup_poptop_wheel.arc = Math.PI / 6;
            window.hintup.env.hintup_poptop_wheel.spinTimeout = null;
            window.hintup.env.hintup_poptop_wheel.spinArcStart = 10;
            window.hintup.env.hintup_poptop_wheel.spinTime = 0;
            window.hintup.env.hintup_poptop_wheel.spinTimeTotal = Math.floor(Math.random() * (40000 - 20000)) + 20000;
            window.hintup.env.hintup_poptop_wheel.ctx;
            
            window.hintup.env.hintup_poptop_wheel.drawRouletteWheel();

            
            document.querySelector('.hintup-poptop-wheel-button').onclick = function() {
                const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                
                var name = document.querySelector('.hintup-poptop-wheel-name').value;
                var email = document.querySelector('.hintup-poptop-wheel-email').value;
                var whats = document.querySelector('.hintup-poptop-wheel-whats').value;
                var validEmail = re.test(String(email).toLowerCase());

                document.querySelector('.hintup-poptop-wheel-cupom').style.background = 'transparent !important';
                document.querySelector('.hintup-poptop-wheel-cupom').value = '';

                if (name.trim().length < 3) {
                    document.querySelector('.hintup-poptop-wheel-name').style.background = '#ffa7a7';
                    document.querySelector('.hintup-poptop-wheel-name').setAttribute('placeholder','Por favor digite seu nome');
                    return false;
                }
                if (validEmail === false) {
                    document.querySelector('.hintup-poptop-wheel-email').style.background = '#ffa7a7';
                    document.querySelector('.hintup-poptop-wheel-email').setAttribute('placeholder','Por favor digite seu email');
                    return false;
                }
                if (whats.trim().length < 10) {
                    document.querySelector('.hintup-poptop-wheel-whats').style.background = '#ffa7a7';
                    document.querySelector('.hintup-poptop-wheel-whats').setAttribute('placeholder','Por favor digite seu whatsapp');
                    return false;
                }
                window.hintup.env.hintup_poptop_wheel.spin();
                document.querySelector('.hintup-poptop-wheel-button').setAttribute('onclick','window.hintup.env.hintup_poptop_wheel_copy()');
            }
        }
        
        window.hintup.env.hintup_poptop_wheel._control--;
        
        if (window.hintup.env.hintup_poptop_wheel._control <=0) clearInterval(window.hintup.env.hintup_poptop_wheel._interval);
    },100);
    
}

window.hintup.env.hintup_poptop_wheel.drawRouletteWheel = function() {
    // var canvas = document.("hintup_poptop_wheel");
    if (window.hintup.env.hintup_poptop_wheel.canvas.getContext) {
        var outsideRadius = 240;
        var textRadius = 150;
        var insideRadius = 30; 

        window.hintup.env.hintup_poptop_wheel.ctx = window.hintup.env.hintup_poptop_wheel.canvas.getContext("2d");
        window.hintup.env.hintup_poptop_wheel.ctx.clearRect(0,0,550,550);
        window.hintup.env.hintup_poptop_wheel.ctx.strokeStyle = "#fff";
        window.hintup.env.hintup_poptop_wheel.ctx.lineWidth = 2;

        // window.hintup.env.hintup_poptop_wheel.ctx.arc(270, 270, insideRadius, 0, 2 * Math.PI);
        // window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = window.hintup.env.hintup_poptop_wheel.insideRadiusColor;
        // window.hintup.env.hintup_poptop_wheel.ctx.fill();

        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetX = 0;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetY = 0;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowColor = '';
        window.hintup.env.hintup_poptop_wheel.ctx.shadowBlur = 0;

        window.hintup.env.hintup_poptop_wheel.ctx.font = 'bold 18px sans-serif'; 

        for(var i = 0; i < 12; i++) {
            var angle = window.hintup.env.hintup_poptop_wheel.startAngle + i * window.hintup.env.hintup_poptop_wheel.arc;
            window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = window.hintup.env.hintup_poptop_wheel.colors[i];
            window.hintup.env.hintup_poptop_wheel.ctx.beginPath();
            window.hintup.env.hintup_poptop_wheel.ctx.arc(270, 270, outsideRadius, angle, angle + window.hintup.env.hintup_poptop_wheel.arc, false);
            window.hintup.env.hintup_poptop_wheel.ctx.arc(270, 270, insideRadius, angle + window.hintup.env.hintup_poptop_wheel.arc, angle, true);
            window.hintup.env.hintup_poptop_wheel.ctx.stroke();
            window.hintup.env.hintup_poptop_wheel.ctx.fill();
            window.hintup.env.hintup_poptop_wheel.ctx.save();
            window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = "white";
            window.hintup.env.hintup_poptop_wheel.ctx.translate(270 + Math.cos(angle + window.hintup.env.hintup_poptop_wheel.arc / 2) * textRadius, 270 + Math.sin(angle + window.hintup.env.hintup_poptop_wheel.arc / 2) * textRadius);
            window.hintup.env.hintup_poptop_wheel.ctx.rotate(angle + window.hintup.env.hintup_poptop_wheel.arc / 23 + Math.PI / 23);
            window.hintup.env.hintup_poptop_wheel.ctx.stroke();
            
            var text = window.hintup.env.hintup_poptop_wheel.quienes[i];
            var color = window.hintup.env.hintup_poptop_wheel.text_colors[i];
            window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = color;
            window.hintup.env.hintup_poptop_wheel.ctx.rotate(144.6);
            window.hintup.env.hintup_poptop_wheel.ctx.fillText(text, - window.hintup.env.hintup_poptop_wheel.ctx.measureText(text).width / 2, 5);
            window.hintup.env.hintup_poptop_wheel.ctx.restore();
        } 

        window.hintup.env.hintup_poptop_wheel.ctx.beginPath();
        window.hintup.env.hintup_poptop_wheel.ctx.arc(270,270,245,0*Math.PI,2*Math.PI, false);
        window.hintup.env.hintup_poptop_wheel.ctx.arc(270,270,230,0*Math.PI,2*Math.PI, true);
        window.hintup.env.hintup_poptop_wheel.ctx.strokeStyle = window.hintup.env.hintup_poptop_wheel.border_color;
        window.hintup.env.hintup_poptop_wheel.ctx.lineWidth = 1; 
        window.hintup.env.hintup_poptop_wheel.ctx.stroke();
        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetX = 7;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetY = 7;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowColor = '#000';
        window.hintup.env.hintup_poptop_wheel.ctx.shadowBlur = 13;
        window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = window.hintup.env.hintup_poptop_wheel.border_color;
        window.hintup.env.hintup_poptop_wheel.ctx.fill();
        window.hintup.env.hintup_poptop_wheel.ctx.closePath();
        
        //Arrow
        window.hintup.env.hintup_poptop_wheel.ctx.beginPath();
        window.hintup.env.hintup_poptop_wheel.ctx.moveTo(470 + 15, 240 + 20);
        window.hintup.env.hintup_poptop_wheel.ctx.lineTo(470 + 45, 240 + 10);
        window.hintup.env.hintup_poptop_wheel.ctx.lineTo(470 + 55, 240 + 20);
        window.hintup.env.hintup_poptop_wheel.ctx.lineTo(470 + 45, 240 + 30);
        window.hintup.env.hintup_poptop_wheel.ctx.lineTo(470 + 15, 240 + 20);
        
        // window.hintup.env.hintup_poptop_wheel.ctx.moveTo(270 + (outsideRadius + 15), 270 + 6);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius + 15), 270 - 6);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius - 15), 270 - 6);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius - 15), 270 - 15);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius - 33), 270 - 0);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius - 15), 270 + 15);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius - 15), 270 + 6);
        // window.hintup.env.hintup_poptop_wheel.ctx.lineTo(270 + (outsideRadius + 15), 270 + 6);
        
        window.hintup.env.hintup_poptop_wheel.ctx.strokeStyle = window.hintup.env.hintup_poptop_wheel.arrow;
        window.hintup.env.hintup_poptop_wheel.ctx.lineWidth = 1; 
        window.hintup.env.hintup_poptop_wheel.ctx.stroke();
        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetX = 2;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetY = 2;
        window.hintup.env.hintup_poptop_wheel.ctx.shadowColor = '#000';
        window.hintup.env.hintup_poptop_wheel.ctx.shadowBlur = 5;
        window.hintup.env.hintup_poptop_wheel.ctx.fillStyle = window.hintup.env.hintup_poptop_wheel.arrow;
        window.hintup.env.hintup_poptop_wheel.ctx.fill();
        window.hintup.env.hintup_poptop_wheel.ctx.closePath();
        
        window.hintup.env.hintup_poptop_wheel.ctx.save;
        
    }
}
    
window.hintup.env.hintup_poptop_wheel.rotateWheel = function() {
    window.hintup.env.hintup_poptop_wheel.spinTime += 15;
    if(window.hintup.env.hintup_poptop_wheel.spinTime >= window.hintup.env.hintup_poptop_wheel.spinTimeTotal) {
        window.hintup.env.hintup_poptop_wheel.stop_rotateWheel();
        return;
    }
    var spinAngle = window.hintup.env.hintup_poptop_wheel.spinAngleStart - window.hintup.env.hintup_poptop_wheel.easeOut(window.hintup.env.hintup_poptop_wheel.spinTime, 0, window.hintup.env.hintup_poptop_wheel.spinAngleStart, window.hintup.env.hintup_poptop_wheel.spinTimeTotal);
    window.hintup.env.hintup_poptop_wheel.startAngle += (spinAngle * Math.PI / 180);
    window.hintup.env.hintup_poptop_wheel.drawRouletteWheel();
    window.hintup.env.hintup_poptop_wheel.spinTimeout = setTimeout('window.hintup.env.hintup_poptop_wheel.rotateWheel()', 30);
}

window.hintup.env.hintup_poptop_wheel.stop_rotateWheel = function() {
    clearTimeout(window.hintup.env.hintup_poptop_wheel.spinTimeout);
    var degrees = window.hintup.env.hintup_poptop_wheel.startAngle * 180 / Math.PI + 0; //The last parameter (+ 0) is about position of arrow
    var arcd = window.hintup.env.hintup_poptop_wheel.arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    
    window.hintup.env.hintup_poptop_wheel.ctx.save();
    window.hintup.env.hintup_poptop_wheel.ctx.font = 'bold 32px sans-serif';
    window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetX = 2;
    window.hintup.env.hintup_poptop_wheel.ctx.shadowOffsetY = 2;
    window.hintup.env.hintup_poptop_wheel.ctx.shadowBlur    = 2;
    window.hintup.env.hintup_poptop_wheel.ctx.shadowColor   = "black";
    
    var text = window.hintup.env.hintup_poptop_wheel.cupons[index];
    document.querySelector('.hintup-poptop-wheel-cupom').style.visibility = 'visible';
    document.querySelector('.hintup-poptop-wheel-cupom').value = text;
    document.querySelector('.hintup-poptop-wheel-input').value = text;
    document.querySelector('.hintup-poptop-wheel-button').value ='Você Ganhou! Copie seu Cupom!';
    window.hintup.env.hintup_poptop_wheel.ctx.restore();
    
    var coupon = document.querySelector('.hintup-poptop-wheel-cupom').value;
    var name = document.querySelector('.hintup-poptop-wheel-name').value;
    var email = document.querySelector('.hintup-poptop-wheel-email').value;
    var whats = document.querySelector('.hintup-poptop-wheel-whats').value;    
    
    details= {
        'nome':name,
        'e-mail':email,
        'whatsapp':whats,
        'cupom':coupon 
    }
    window.hintup.utilities.capture_report('Roleta - dados dos leads',details);
}

window.hintup.env.hintup_poptop_wheel.easeOut = function (t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
}

window.hintup.env.hintup_poptop_wheel.spin = function() {
    window.hintup.env.hintup_poptop_wheel.spinAngleStart = Math.random() * 10 + 10;
    window.hintup.env.hintup_poptop_wheel.spinTime = 0;
    window.hintup.env.hintup_poptop_wheel.spinTimeTotal = Math.random() * 3 + 4 * 1000;
    window.hintup.env.hintup_poptop_wheel.rotateWheel();
}

window.hintup.env.hintup_poptop_wheel.controlEffect = function(){
    window.hintup.env.hintup_poptop_wheel._interval2 = setInterval(function(){
        if (document.querySelector('.hintup-poptop-wheel-container').parentElement.style.visibility == 'visible') {
            clearInterval(window.hintup.env.hintup_poptop_wheel._interval2);
            document.querySelector('.hintup-poptop-wheel-container').classList.add("hintup-poptop-wheel-container-move");
            
            window.hintup.env.hintup_poptop_wheel._interval3 = setInterval(function(){
                if (document.querySelector('.hintup-poptop-wheel-container').parentElement.style.visibility == 'hidden') {
                    clearInterval(window.hintup.env.hintup_poptop_wheel._interval3);
                    window.hintup.env.hintup_poptop_wheel.controlEffect();
                }
            },100);
        }
    },100);    
}
window.hintup.env.hintup_poptop_wheel.start();


/*COPY CUPOM Progressbar*/
window.hintup.env.hintup_poptop_wheel_copy = function() {
    var copyText = document.querySelector(".hintup-poptop-wheel-input");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");  
    
    document.querySelector('.hintup-poptop-wheel-button').value ='Cupom Copiado!';
}

// Movendo o elemento hintup_logo_brand para o elemento pai hintup-poptop-wheel //
var _success_times = 500;
var _success_interval = setInterval(function(){
    if (document.querySelector('.hintup-poptop-wheel') !== null) {
        clearInterval(_success_interval);
        
        //mask for whatstapp field 15 chars
        document.querySelector('.hintup-poptop-wheel-whats').onkeyup = function(){
            setTimeout(function(){
                v = document.querySelector('.hintup-poptop-wheel-whats').value
                v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
                v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
                v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos        
        
                document.querySelector('.hintup-poptop-wheel-whats').value = v;
            },1)
        }
    }
    _success_times--;
    if (_success_times == 0) clearInterval(_success_interval);
},100);