top of page

Amazing Features Made With Wix

Experience the broad possibilities of Velo...

1. Digital Clock

Simple digital clock made with Velo By WIX

HOUR

MINUTES

SECONDS

AM

CODE SNIPPET

$w.onReady(function () {

    showTime();

});

 

//DIGITAL CLOCK

function showTime() {

    const today = new Date();

    let hour = today.getHours();

    let min = today.getMinutes();

    let secs = today.getSeconds();

    var meridian = "AM";

 

    if (hour > 12) {

        hour = hour - 12;

        meridian = "PM";

    }

 

    min = timeDec(min);

    secs = timeDec(secs);

    hour = timeDec(hour);

 

    $w("#hr").label = hour.toLocaleString();

    $w("#min").label = min.toLocaleString();

    $w("#sec").label = secs.toLocaleString();

    $w("#mer").text = meridian;

    setTimeout(showTime, 1000);

}

 

function timeDec(x) {

    if (x < 10) { x = "0" + x }

    return x;

}

Anchor 1

2. Increment & Decrement

Increase and decrease number by 1

CODE SNIPPET

$w.onReady(function () {

    

    //INCREMENT AND DECREMENT

    $w("#addButton").onClick(() => {

        addOne();

    });

 

    $w("#subtractButton").onClick(() => {

        subtractOne();

    });

 

    var number1 = 0;

 

    function addOne() {

 

        number1++

        $w("#input1").value = number1.toString();

    }

 

    function subtractOne() {

        if (number1 > 0) {

            number1--;
        $w("#
input1").value = number1.toString();

        }

 

    }

});

3. Progress Bar Increment & Decrement

Increase and decrease number by 20

0/100

CODE SNIPPET

$w.onReady(function () {

    

    //INCREMENT AND DECREMENT

    $w("#addButton").onClick(() => {

        addOne();

    });

 

    $w("#subtractButton").onClick(() => {

        subtractOne();

    });

 

    var number2 = 0;

 

    function addOne() {

 

        number2 += 20;

        $w("#progressBar1").value = number2;

        $w("#progressCounter").text = `${number2}/100`;

    }

 

    function subtractOne() {

        if (number2 > 0) {

            number2 -= 20;
        $w("#
progressBar1").value = number2;

        $w("#progressCounter").text = `${number2}/100`;

        }

 

    }

});

More coming soon.....

bottom of page