Quảng cáo, mại dzô


Đây là chỗ quảng cáo, ai thuê thì được đặt ở đây

Wednesday, April 17, 2019

URLs động với Javascript

Chúng ta có thể sử dụng emoji (và các ký tự unicode khác) trong URL. Rất thú vị phải không? ahihi. Chỉ đơn giản bằng vài dòng Javascript thôi.


var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];

    function loop() {
        location.hash = f[Math.floor((Date.now()/100)%f.length)];

        setTimeout(loop, 50);
    }

    loop();

Nếu không thích mặt trăng thì thay bằng emoji gì cũng được, ví dụ cái đồng hồ như này:

var f = ['🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛'];
Khó hơn tí nữa, làm một chuỗi emoji luôn:



var e = ['🏻', '🏼', '🏽', '🏾', '🏿'];

    function loop() {
        var s = '',
            i, m;

        for (i = 0; i < 10; i ++) {
            m = Math.floor(e.length * ((Math.sin((Date.now()/100) + i)+1)/2));
            s += '👶' + e[m];
        }

        location.hash = s;

        setTimeout(loop, 50);
    }

    loop();

Cái này cũng đẹp:

var f = ['🌑', '🌘', '🌗', '🌖', '🌕', '🌔', '🌓', '🌒'],
        d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        m = 0;

    function loop() {
        var s = '', x = 0;

        if (!m) {
            while (d[x] == 4) {
                x ++;
            }

            if (x >= d.length) m = 1;
            else {
                d[x] ++;
            }
        }
        else {
            while (d[x] == 0) {
                x ++;
            }

            if (x >= d.length) m = 0;
            else {
                d[x] ++;

                if (d[x] == 8) d[x] = 0;
            }
        }

        d.forEach(function (n) {
            s += f[n];
        });

        location.hash = s;

        setTimeout(loop, 50);
    }

    loop();

Làm thử gợn sóng bằng ký tự unicode nhá:


function loop() {
        var i, n, s = '';

        for (i = 0; i < 10; i++) {
            n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;

            s += String.fromCharCode(0x2581 + n);
        }

        window.location.hash = s;

        setTimeout(loop, 50);
    }

    loop();

Thật ra đằng sau sự ảo diệu này chỉ là hàm "location.hash =" mà thôi ^^ !
 Nguồn tham khảo: Matthew Rayfield

No comments:

Post a Comment