JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<div id="layer1"  style="position: absolute; top:0px; left:0px; width: 5px; height: 5px; background-color: blue;"></div>
<input type="button" id="useExistingDiv" value="Set Markup Div" />
<input type="button" id="useCreatedDiv" value="Set Created Div" /><br/>

<input type="button" id="runTests" value="Run Tests" />
<br /> Layer movement: <b id="speed_layer"></b>

JavaScript

var layer1;

// Gets the element already in markup
function setupExistingDiv() {
    window.msWriteProfilerMark("setupExistingDiv:Start");    
    
    layer1 = document.getElementById("layer1");
    
    window.msWriteProfilerMark("setupExistingDiv:Stop");    
}

// Creates an element and appends to DOM
function setupCreatedDiv() {
    window.msWriteProfilerMark("setupCreatedDiv:Start");
    
    layer1 = document.createElement('div');
    layer1.style.position = "absolute";
    layer1.style.top = "0px";
    layer1.style.left = "0px";
    layer1.style.width = "5px";
    layer1.style.height = "5px";
    layer1.style.backgroundColor = "#ff0000";
    document.body.appendChild(layer1);
    
    window.msWriteProfilerMark("setupCreatedDiv:Stop");
}

// Moves the layer previously created
function LayerMovement() {
    if(layer1) {
        window.msWriteProfilerMark("LayerMovement:Start");
        
        var startTime = new Date() ;
        for( var i = 0; i <= 80000; i++ ) {
            layer1.style.top = i + 'px';
            layer1.style.left = i + 'px';
        }
        var endTime = new Date();
        
        window.msWriteProfilerMark("LayerMovement:Stop");

        document.getElementById('speed_layer').innerHTML = 
                   (endTime - startTime) + " milli-seconds";
    } else {
        alert("you must run setup first");
    }
}


var testRun = document.getElementById("runTests");
testRun.addEventListener("click", LayerMovement, false);

var useExistingDiv = document.getElementById("useExistingDiv");
useExistingDiv.addEventListener("click", setupExistingDiv, false);

var useCreatedDiv = document.getElementById("useCreatedDiv");
useCreatedDiv.addEventListener("click", setupCreatedDiv, false);