jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<script>
const body = document.getElementById('body');
const buttonDtarkSlider = document.getElementById('DtarkSlider');
const display = document.getElementById('display');
const board = document.getElementById('board');
const buttonboard = Array.from(document.getElementsByTagName('button'));
const buttondel = document.getElementById('del');
const buttonequal = document.getElementById('equal');
const buttonrest = document.getElementById('rest');
const header = document.getElementById('header');
let postionslider = [19, 36, 0];
let count = 0;
let numbers = '';
let backgroundColors = '';
const color = [
'hsl(30, 25%, 89%)',
'hsl(268, 75.0%, 9.4%)',
'hsl(222, 26%, 31%)',
];
const propertySets = {
0: [
'--clr-Verydark',
'--clr-white',
'--clr-Orange',
'--clr-whiteOpacitiy',
'--clr-Purecyan',
'--clr-Orange',
'--clr-Purecyan'
],
1: [
'--clr-Lightyellow',
'--clr-Verydarkviolet',
'--clr-DarkModeratecyan',
'--clr-Verydarkviolet',
'--clr-Darkviolet',
'--clr-DarkModeratecyan',
'--clr-Darkviolet'
]
};
const backgroundElement = [
display,
buttonDtarkSlider,
board,
buttondel,
buttonequal,
buttonrest,
];
/**
* This function is responsible for moving the slider to change the colors
*/
function moveSlider() {
buttonDtarkSlider.style.transform = `translateX(${postionslider[count]}px)`;
changeBackgroundColor(count);
count = (count + 1) % 3; // Wrap count back to 0 after 2
if (count === 0) {
backgroundElement.forEach((element) => {
element.removeAttribute('style');
element.style.transition = '0.5s 2s ease-out';
});
}
}
function changeBackgroundColorButtonBoard() {
const regex = /\b(reset|del|=)\b/g;
const board = buttonboard.filter((x) => regex.test(x.textContent));
buttonboard.forEach((button) => {
button.style.background = 'var(--clr-Verydarkviolet)';
button.style.transition = '0.5s ease-out';
});
}
function changeBackgroundColor(count) {
const regex = /^--clr-(Verydark|Lightyellow)$/;
body.style.background = color[count];
let size = 3
lll
if (!(count in propertySets)) {
count = 0; // Restablecer count a cero si es un índice inválido
}
/**
* count = 0;
*
* position arrays of element
* --------------------------
* 3 -> buttondel
* 4 -> buttonequal
* 5 -> buttonrest
*
*
*
*
* int -> 32bits
*
*
* 000000000000000000000000100 -> 4
* 000000000000000000000000101 -> 5
*
*
* Realizo desplazamiento, hacia la derecha
*--------------------------------------------
* 000000000000000000000000101 -> 5
* transforma en...
* 000000000000000000000000011 -> 3
*
* let size = 3;
* let next = 5;
*
* >> 1 desplazo, hacia la derecha.
* size = (next >> 1) + 2; -> 4
*
*
* 00000000000000000000000100 -> 4
* 000000000000000000000000011 -> 3
*
* if (index != size){
* getComputedStyle(backgroundElement[index])
.getPropertyValue(x);
* }
*
* count = 1;
*
*/
backgroundColors = propertySets[count]
.filter((x) => regex.test(x))
.map((x, index) =>
getComputedStyle(backgroundElement[index])
.getPropertyValue(x))
.join('');
propertySets[count].slice(1).forEach((x, index) => {
const color = getComputedStyle(backgroundElement[index])
.getPropertyValue(x);
const elementStyle = backgroundElement[index].style;
elementStyle.setProperty('background', color);
//elementStyle.setProperty('hover', backgroundColors);
elementStyle.setProperty('color', backgroundColors);
elementStyle.transition = '0.5s 2s ease-out';
});
if (index === 2) {
changeBackgroundColorButtonBoard();
}
}
/**
* This function is responsible for resetting the calculator
*/
function resetNumber(element) {
let data = element.innerHTML.toString();
numbers = numbers.concat(data).replace('•', ',');
if (numbers.includes('del')) {
numbers = numbers.replace('del', '').slice(0, -1);
}
if (numbers.includes('reset')) {
numbers = '';
}
operationNumber();
display.innerHTML = numbers.length === 0 ? '0' : numbers;
}
/**
* Performs arithmetic operations based on the input string.
*/
function operationNumber() {
const regex = /^(-?\d*\.?\d+)([-+x/])(-?\d*\.?\d+)(([-+x/]-?\d*\.?\d+)*)(=)$/;
const rex = /^(0*(\.\d+)?\/0+(\.0+)?=|\d+(\.\d+)?\/0+(\.0+)?=)$/;
if (numbers.match(regex) && !numbers.match(rex)) {
// Replace 'x' with '*' for multiplication
numbers = numbers.replace(/x/g, '*').replace('=', '');
// Evaluate the mathematical expression
let result = eval(numbers);
numbers = result.toString().replace('.', ',');
display.innerHTML = numbers;
} else if (numbers.includes('=')) {
numbers = numbers.replace('=', '');
Swal.fire({
title: 'ADVERTENCIA',
text: 'Error en la expresión matemática.',
icon: 'warning',
footer: '<a href="page_info.html" target="_blank">Más información...</a>'
});
}
}
buttonDtarkSlider.addEventListener('click', moveSlider);
buttonboard.forEach((element) => {
element.addEventListener('click', () => resetNumber(element));
});
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
modulo prototype |
| ready |
non prototype |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.