JavaScript

JavaScript

Mendoza Salazar

Publicado: agosto 01, 2021.

Actualizado: mayo 18, 2022.

Cuenta regresiva para estrenos

El siguiente código es utilizado para mostrar una cuenta regresiva para una fecha en especifica para estrenar un video.

<script>
var end = new Date('5/15/2022 7:05 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'Mensaje final';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + ' dias, ';
        document.getElementById('countdown').innerHTML += hours + ' horas, ';
        document.getElementById('countdown').innerHTML += minutes + ' minutos y ';
        document.getElementById('countdown').innerHTML += seconds + ' segundos';
    }

    timer = setInterval(showRemaining, 1000);
</script>

Contador de visitas por entradas individuales

El siguiente código fue incluido el 10 de enero de 2022 por lo tanto solo se muestran las impresiones por cada post de forma individual a partir de esa fecha lo cual no es el valor numérico real, ya que el conteo se da desde el primer día en que se creo este blog. El código Script utilizado es el siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>

<script> $.each($("a[name]"), function(i, e) { var elem = $(e).parent().find("#postviews"); var blogStats = new Firebase("https://*******-default-rtdb.firebaseio.com/pages/id/" + $(e).attr("name")); blogStats.once("value", function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr("name"); isnew = true; } elem.text(data.value); data.value++; if(window.location.pathname!="/") { if(isnew) blogStats.set(data); else blogStats.child("value").set(data.value); } }); }); </script>

Botón Copiar

Este boton se utiliza para copiar texto dentro de contenedores DIV para usarlo como atajo y no acerlo de forma manual. El JavaScript que se utiliza es el siguiente:

<script src="https://www.dropbox.com/s/e06u2oirr7xn0gu/clipboard.min.js"></script>

<script>

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {

console.log(e);

});

clipboard.on('error', function (e) {

console.log(e);

});

</script>

Botón Copiar

Mostrar fecha actual

Al final de cada Post se muestra la fecha actual para mostrar una sugerencia de como citar, ser lo más especifico y actual posible. El código utilizado es el siguiente:

<script type="text/javascript"> var meses = new Array ("enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"); var f=new Date(); document.write(f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear()); </script>

Ejemplo:

Fecha Automática

Google Analytics

En esté Blog se utiliza un medidor de estadísticas para crear mejor contenido de acuerdo a los intereses de las visitas que llegan. Así podremos crear mejor contenido.

El código script utilizado es el siguiente:

<script async src="https://www.googletagmanager.com/gtag/js?id=****"></script>

<script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', '****');

</script>

Google Adsense

Este blog contiene un script de verificación por parte de Adsense: Preparando su sitio web para mostrar anuncios. El código utilizado es el siguiente:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****"
crossorigin="anonymous"></script>

Publicaciones Relacionadas

En este blog utilizamos el siguiente script para mostrar Publicaciones Relacionadas así sea mayor el beneficio para nuestros usuarios. Este elemento se muestra en cada una de las entradas individuales.

Versión PC

Versión Móvil

CÓDIGO 1

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM43PeUwoPffdhk_HcxCkAecYWurNYcr7yNJvVeBDXqtojBTJU9n9hRArFW3m8EbCJLRTQGGZYel78mn2F9KTXTl3XXOAM81vykFBdZIDobi1hil1WpJ6EqDrvr0ZrcG5496Ijf2vqZ9o/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>150) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 150)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h4>'+relatedpoststitle+'</h4>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a href="' + relatedUrls[r] + '"><div class="crop"><img src="'+thumburl[r].replace('/s72-c/','/s300/')+'"/></div><div class="titulo">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
}
//]]>
</script>

CÓDIGO 2

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle=" Publicaciones Relacionadas";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>