JavaScript - Botones zoom progresivos

<script>

var zoom=1;

document.getElementById("mas").addEventListener("click",function(e){

    zoom+=.10;

    resize();

});

document.getElementById("menos").addEventListener("click",function(e){

    if(zoom>0.2) {

        zoom-=.10;

        resize();

    }

});

function resize() {

    document.getElementById("contenedor").style.zoom=zoom;

    document.getElementById("value").innerHTML=zoom.toFixed(2)+"%";

}

</script>

<script>

var t = 10;

function test(z){

demo = document.getElementById("demo");

if (z == 0 && t > 10) t -= 2;

if (z == 1 && t < 100) t += 2;

demo.style.width = t + "px";

demo.style.height = t + "px";

}

</script>

<button type="button" onclick="test(1)">Zoom +</button>

<button type="button" onclick="test(0)">Zoom -</button>

<br><br>

<div id="demo" style="width:10px;height:10px;background:#D4D4D4"></div>

<style>

#demo {-webkit-transition:all 2s;-moz-transition:all 2s;-ms-transition:all 2s;transition:all 2s;}

</style>

<script>

var z;

function test(z){

var demo = document.getElementById("demo");

if (z == 0) {demo.style.width = "20px"; demo.style.height = "20px"}

if (z == 1) {demo.style.width = "400px"; demo.style.height = "200px"}

}

</script>

<button type="button" onclick="test(1)">Zoom int</button>

<button type="button" onclick="test(0)">Zoom out</button>

<br><br>

<div id="demo" style="width:20px;height:20px;background:#4DDDD4"></div>