How to repeat a function with Javascript - javascript

This is the code that I've been working on, which makes the background color flicker colors. I'm wondering if anyone knows how to make this repeat so that the background continues to change colors on and on and on.
var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
"66", "55", "44", "33", "22", "11", "00", "00", "11",
"22", "33", "44", "55", "66", "77", "88", "99", "AA",
"BB", "CC", "DD", "EE", "ff");
x = 0;
var b = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
"66", "55", "44", "33", "22", "11", "00", "00", "11",
"22", "33", "44", "55", "66", "77", "88", "99", "AA",
"BB", "CC", "DD", "EE", "ff");
x = 0;
var c = new Array("00", "11", "22", "33", "44", "55", "66", "77", "88",
"99", "AA", "BB", "CC", "DD", "EE", "ff", "ff", "ee",
"dd", "cc", "bb", "aa", "99", "88", "77", "66", "55",
"44", "33", "22", "11", "00");
x = 0;
function bg_eff() {
col_val = "#" + a[x] + b[x] + c[x];
document.bgColor = col_val;
x++;
if (x == 32) {
clearInterval(change_bg);
}
}
change_bg = setInterval("bg_eff()", 50);

x = (x + 1) % 32;
Also, you should remove the clearInterval (and associated if), and there is no need to use a string for the setInterval:
change_bg = setInterval(bg_eff, 50);

modified code here (using jquery)
http://jsfiddle.net/generalhenry/S8g6k/1/
I use a recursive setTimeout instead of the interval, it's more resilient that way (if your function takes longer than the interval nothing odd occurs)

I would do this:
x += 1;
if ( x === 32 ) { x = 0; }

in addition to Matthew's answer but since the arrays are in the same sequence, you could do something like this.
var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77", "66", "55", "44", "33", "22", "11", "00", "00", "11", "22", "33", "44", "55","66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "ff"); // one array
var x = 0; // var for not global (even though in this context it still is...)
function big_eff() {
col_val = "#" + a[x] + a[(x + 5) % 32] + a[(x + 10) % 32]; // or whatever spacing you want
document.bgColor = col_val;
x = (x + 1) % 32;
setTimeout("big_eff()",50); // setTimeout baby!
}

a new version with pure Jquery
http://jsfiddle.net/generalhenry/S8g6k/5/
I use .animate for much cleaner code (no need for the arrays or the x++)
oh and warning: scary color swaping
$("body").css("background-color","#ffff00");
var bg_eff;
(bg_eff = function(x)
{
var duration = 1600;
if(x)
{
$("body").animate({backgroundColor:"#0000ff"},duration,function(){
bg_eff(false);
});
}
else
{
$("body").animate({backgroundColor:"#ffff00"},duration,function(){
bg_eff(true);
});
}
})(true);

Related

How to set a good date with chart js

I make a graph with NextJs and ChartJs on the stats of the covid (over the last 30 days) that I get with an API that provides me with the date and the stats :
timeline: {
cases: {
'5/13/21': 5902343,
'...' : ...
},
}
I managed to make the graph but I would like to place the date returned for each stats on the X line of my label
I managed to do this code (lineData is't my request) :
labels: [Object.keys(lineData.timeline.cases)],
but it shows me all the dates as one and the same object.
For now my label looks like this
labels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
and I would like to replace values with the one provided by the api
Object.keys returns an array. So currently you have an array of array like:
labels: [ ['5/13/21'] ]
You can just do:
labels: Object.keys(lineData.timeline.cases) // labels: ['5/13/21']

I want to move the elements inside multiple list of arrays around

I have this array
0: (5) ["2", "X", "8", "11", "15"]
1: (5) ["1", "5", "X", "X", "14"]
2: (5) ["X", "4", "7", "10", "13"]
3: (5) ["X", "3", "6", "9", "12"]
I want to move the digit 1 to the position where digit 2 is so that this array will return
0: (5) ["1", "X", "8", "11", "15"]
1: (5) ["2", "5", "X", "X", "14"]
2: (5) ["X", "4", "7", "10", "13"]
3: (5) ["X", "3", "6", "9", "12"]
This collection of array is returned all at once, so I will like to change the position once it's returned.
I am using JavaScript.
Thanks everyone.
I tried
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
};
But this moves the entire row with each other i.e moves array 0 to array 1
Find the outer array index and the inner array index of both, then switch them:
const input = [
["2", "X", "8", "11", "15"] ,
["1", "5", "X", "X", "14"],
["X", "4", "7", "10", "13"],
["X", "3", "6", "9", "12"]
];
const getLoc = char => {
const arrIndex = input.findIndex(subarr => subarr.includes(char));
const subArrIndex = input[arrIndex].indexOf(char);
return [arrIndex, subArrIndex];
};
const move = (char1, char2) => {
const [loc1, loc2] = [char1, char2].map(getLoc);
[
// switch position of first character:
input[loc1[0]][loc1[1]],
// and position of second character:
input[loc2[0]][loc2[1]]
] = [
// with position of second character:
input[loc2[0]][loc2[1]],
// and the first character:
input[loc1[0]][loc1[1]]
];
};
move('2', '1');
console.log(input);
You can use findIndex to find the first index of 2 and 1 from their respective array and then replace it. Else if you are looking to replace element only at specific index then you can directly target the array and index and replace it
let data = [
["2", "X", "8", "11", "15"],
["1", "5", "X", "X", "14"]
];
let find2In1 = data[0].findIndex(item => item === "2");
let find1In2 = data[1].findIndex(item => item === "1");
data[0][find2In1] = "1";
data[1][find1In2] = "2";
console.log(data)
Judging by your sample, looks like that you need to alternate 1 and 2.
Input
0: (5) ["2", "X", "8", "11", "15"]
1: (5) ["1", "5", "X", "X", "14"]
2: (5) ["X", "4", "7", "10", "13"]
3: (5) ["X", "3", "6", "9", "12"]
Output
0:(5) ["1", "X", "8", "11", "15"]
1: (5) ["2", "5", "X", "X", "14"]
2: (5) ["X", "4", "7", "10", "13"]
3: (5) ["X", "3", "6", "9", "12"]
You can search through each array and do this using forEach.
a.forEach((item) => {
if (item === "1")
item = "2"
else
if (item === "2")
item = "1"
})

How are my popups not showing in my Leaflet map?

How can I make popups show up in leaflet that I plot using this code?
leaflet(df) %>%
addTiles() %>%
setView(-119.09, 43.70, zoom = 5) %>%
addCircles(~long, ~lat, popup=df$hrus, color="#ffa500") %>%
addLegend("bottomright", colors= "#ffa500", labels="HRUs", title="P")
I can see the dots, but nothing shows up on the popup (Inside RStudio view pane). I tried saving it as HTML, but the saved page neither has the basemap nor the popup
How can I do it?
dput(df)
structure(list(lat = structure(c(41.26124, 41.45247, 41.50923,
41.57602, 41.62999, 41.60664, 41.63508, 41.83411, 41.84721, 41.84382,
41.83294, 41.85096, 41.60179, 41.8572, 41.64224, 41.85058, 41.14342,
41.77109, 41.35783, 41.39253, 41.78496, 41.5982, 41.66492, 41.70302,
41.56481, 41.55544, 41.59929, 41.71257, 41.85876, 41.42739, 41.39722,
41.76483, 41.49387, 41.46879, 41.50355, 41.95393, 41.8932, 41.96956,
41.76675, 41.93061, 41.93767, 41.53439, 41.51667, 41.50472, 41.5053,
41.67506, 41.68689, 41.78533, 41.79546, 41.87722), .Dim = 50L),
long = structure(c(-116.21489, -114.91972, -114.74541, -114.72553,
-114.83965, -114.81267, -114.84702, -113.49586, -113.48851,
-113.46151, -113.45017, -113.38449, -114.91356, -113.41496,
-114.85369, -113.50472, -116.21671, -114.25468, -116.32436,
-116.18391, -114.23875, -115.05154, -114.95098, -114.99438,
-115.75044, -115.89944, -115.84581, -114.9099, -114.19781,
-116.59131, -116.53819, -114.07782, -116.38066, -116.4347,
-116.33524, -113.51231, -113.51787, -113.55034, -114.96587,
-113.34303, -113.24616, -116.28699, -116.60549, -116.63497,
-116.55531, -115.19046, -114.72527, -114.64668, -114.54489,
-113.59969), .Dim = 50L), hrus = structure(1:50, .Label = c("1",
"2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
"13", "14", "15", "16", "17", "18", "19", "20", "21", "22",
"23", "24", "25", "26", "27", "28", "29", "30", "31", "32",
"33", "34", "35", "36", "37", "38", "39", "40", "41", "42",
"43", "44", "45", "46", "47", "48", "49", "50"), class = "factor")), .Names = c("lat",
"long", "hrus"), row.names = c(NA, 50L), class = "data.frame")

How to count the items in array like the developer console

Script:
vL1 = ["AB", "AB", "AB", "AB", "AB", "CS", "CS", "CS", "ND", "ND"];
vL2 = ["1", "1", "1", "2", "3", "1", "1", "2", "1", "1"];
for(var i = 0; i < vL1.length; i++){
thing = vL1[i] + " " + vL2[i];
console.log(thing);
}
When I check the developer console, I see the following:
(3) AB 1
AB 2
AB 3
(2) CS 1
CS 2
(2) ND 1
How can I modify the script so I can get the number of times AB with 1 appeared or CS with 1 appeared in my code to be used in other functions?
I just want to know the count for each vL2 that is represented in vL1. It is important to associate vL1 because that will let me identify the vL2, since it is not unique.
You might also do as follows;
var vL1 = ["AB", "AB", "AB", "AB", "AB", "CS", "CS", "CS", "ND", "ND"],
vL2 = ["1", "1", "1", "2", "3", "1", "1", "2", "1", "1"],
result = vL1.reduce((p,c,i) => p[c] ? (p[c][vL2[i]] = p[c][vL2[i]] ? ++p[c][vL2[i]]
: 1, p)
: (p[c] = {[vL2[i]]: 1}, p), {});
console.log(result);
You can store the counts in an object. Also, utilizing Array.prototype.reduce can make it simpler to work with the indexes (e.g. you don't have to handle incrementing the index manually, etc.):
vL1 = ["AB", "AB", "AB", "AB", "AB", "CS", "CS", "CS", "ND", "ND"];
vL2 = ["1", "1", "1", "2", "3", "1", "1", "2", "1", "1"];
var counts = vL1.reduce(function(counts,vL1Element,index) {
//initialize this index if it isn't set
if(counts[vL1Element] == undefined) {
counts[vL1Element] = {};
}
//set this count to 0 if it hasn't been set yet
if (counts[vL1Element][vL2[index]] == undefined) {
counts[vL1Element][vL2[index]] = 0;
}
counts[vL1Element][vL2[index]]++;
return counts;
},{});
console.log(counts);
var obj={};
function log(a){
if(obj[a]){
obj[a]++;
}else{
obj[a]=0;
}
}
And then do:
log(thing);
Inside of your for loop, and than:
console.log(obj);
Obj now contains:
AB1:3;
....

Regex splitting on parenthesis, first uppercase, and digits

Right now, I have the user inputting a chemical formula, say Cu(NO3)2, and splitting the elements and numbers into an array. This code works for all formulas except for those with parentheses. (which actually came from a user-submitted thread on here.)
var userArray=userIn.replace(/\d+/g, '~$&').split(/(?=[A-Z])|~/);
The reason I used replace then split was to ensure that if someone entered H12, it would come out as H , 12 ... rather than H , 1 , 2.
I'm getting Cu( , N , O , 3) , 2 ... when in fact I want... Cu , ( , N , O , 3 , ) , 2
What about using match instead with the g flag:
var userArray=userIn.match(/(?:[A-Z][a-z]*|\d+|[()])/g);
You need to add the parentheses into your replace pattern, like so:
var userArray=userIn.replace(/\d+|\(|\)/g, '~$&').split(/(?=[A-Z])|~/);
Not a regex, more of a parser that can check the formulae, returns an array like you have specified or false if an error is discovered. This is pretty basic but you can easily add/change the rules (I'm no chemist), also contains the Periodic Table that it checks symbols against. Anyway, you may find it useful.
Javascript
var elements = [
["89", "Ac", "Actinium", "227"],
["13", "Al", "Aluminum", "26.98154"],
["56", "Ba", "Barium", "137.33"],
["4", "Be", "Beryllium", "9.01218"],
["83", "Bi", "Bismuth", "208.9804"],
["107", "Bh", "Bohrium", "262"],
["48", "Cd", "Cadmium", "112.4"],
["20", "Ca", "Calcium", "40.08"],
["55", "Cs", "Cesium", "132.9054"],
["24", "Cr", "Chromium", "51.996"],
["27", "Co", "Cobalt", "58.9332"],
["29", "Cu", "Copper", "63.546"],
["110", "Ds", "Darmstadtium", "261.9"],
["105", "Db", "Dubnium", "261.9"],
["87", "Fr", "Francium", "(233)"],
["31", "Ga", "Gallium", "69.72"],
["79", "Au", "Gold", "196.9655"],
["72", "Hf", "Hafnium", "178.49"],
["108", "Hs", "Hassium", "264.8"],
["49", "In", "Indium", "114.82"],
["77", "Ir", "Iridium", "192.2"],
["26", "Fe", "Iron", "55.85"],
["57", "La", "Lanthanum", "138.91"],
["82", "Pb", "Lead", "207.2"],
["3", "Li", "Lithium", "6.941"],
["12", "Mg", "Magnesium", "24.305"],
["25", "Mn", "Manganese", "54.9380"],
["109", "Mt", "Meitnerium", "265.9"],
["80", "Hg", "Mercury", "200.59"],
["42", "Mo", "Molybdenum", "95.94"],
["28", "Ni", "Nickel", "58.71"],
["41", "Nb", "Niobium", "92.91"],
["76", "Os", "Osmium", "190.2"],
["46", "Pd", "Palladium", "106.42"],
["78", "Pt", "Platinum", "195.09"],
["19", "K", "Potassium", "39.0983"],
["88", "Ra", "Radium", "226.0254"],
["75", "Re", "Rhenium", "186.23"],
["45", "Rh", "Rhodium", "102.91"],
["37", "Rb", "Rubidium", "85.4678"],
["44", "Ru", "Ruthenium", "101.1"],
["104", "Rf", "Rutherfordium", "260.9"],
["21", "Sc", "Scandium", "44.9559"],
["106", "Sg", "Seaborgium", "262.94"],
["47", "Ag", "Silver", "107.87"],
["11", "Na", "Sodium", "22.98977"],
["38", "Sr", "Strontium", "87.62"],
["73", "Ta", "Tantalum", "180.95"],
["43", "Tc", "Technetium", "(99)"],
["81", "Tl", "Thallium", "204.383"],
["50", "Sn", "Tin", "118.69"],
["22", "Ti", "Titanium", "47.90"],
["74", "W", "Tungsten", "183.85"],
["112", "Uub", "Ununbium", "276.8"],
["116", "Uuh", "Ununhexium", ""],
["114", "Uuq", "Ununquadium", "289"],
["23", "V", "Vanadium", "50.9414"],
["39", "Y", "Yttrium", "88.9059"],
["30", "Zn", "Zinc", "65.37"],
["40", "Zr", "Zirconium", "91.22"],
["51", "Sb", "Antimony", "121.75"],
["33", "As", "Arsenic", "74.9216"],
["85", "At", "Astatine", "(210)"],
["5", "B", "Boron", "10.81"],
["32", "Ge", "Germanium", "72.59"],
["84", "Po", "Polonium", "(210)"],
["14", "Si", "Silicon", "28.0855"],
["52", "Te", "Tellurium", "127.6"],
["35", "Br", "Bromine", "79.904"],
["6", "C", "Carbon", "12.011"],
["17", "Cl", "Chlorine", "35.453"],
["9", "F", "Fluorine", "18.998403"],
["1", "H", "Hydrogen", "1.007825"],
["53", "I", "Iodine", "126.9045"],
["7", "N", "Nitrogen", "14.0067"],
["8", "O", "Oxygen", "15.999"],
["15", "P", "Phosphorus", ""],
["34", "Se", "Selenium", "78.96"],
["16", "S", "Sulphur", "32.06"],
["18", "Ar", "Argon", "39.948"],
["2", "He", "Helium", "4.00260"],
["36", "Kr", "Krypton", "83.80"],
["10", "Ne", "Neon", "20.179"],
["86", "Rn", "Radon", "(222)"],
["54", "Xe", "Xenon", "131.29"],
["95", "Am", "Americium", "(243)"],
["97", "Bk", "Berkelium", "(247)"],
["98", "Cf", "Californium", "(251)"],
["58", "Ce", "Cerium", "140.12"],
["96", "Cm", "Curium", "(247)"],
["66", "Dy", "Dysprosium", "162.50"],
["99", "Es", "Einsteinium", "254"],
["68", "Er", "Erbium", "167.26"],
["63", "Eu", "Europium", "167.26"],
["100", "Fm", "Fermium", "(257)"],
["64", "Gd", "Gadolinium", "157.25"],
["67", "Ho", "Holmium", "164.9"],
["103", "Lr", "Lawrencium", "(262)"],
["71", "Lu", "Lutetium", "174.97"],
["101", "Md", "Mendelevium", "(258)"],
["60", "Nd", "Neodymium", ""],
["93", "Np", "Neptunium", "(237)"],
["102", "No", "Nobelium", "259"],
["94", "Pu", "Plutonium", "(244)"],
["59", "Pr", "Praseodymium", "140.91"],
["61", "Pm", "Promethium", "(147)"],
["91", "Pa", "Protactinium", "231.0359"],
["62", "Sm", "Samarium", "150.35"],
["65", "Tb", "Terbium", "158.92534"],
["90", "Th", "Thorium", "232.04"],
["69", "Tm", "Thulium", "168.93"],
["92", "U", "Uranium", "238.03"],
["70", "Yb", "Ytterbium", "173.04"]
];
var symbols = (function (el) {
var length = el.length,
i = 0,
result = [];
while (i < length) {
result.push(el[i][2]);
i += 1;
}
return result;
}(elements));
function splitFormula(string) {
var length = string.length,
symbolsLength = symbols.length,
result = [],
index,
chars,
symbol;
while (string) {
temp = string.charAt(0).trim();
if (!temp) {
string = string.slice(1);
} else if ("()+-*/".indexOf(temp) !== -1) {
result.push(temp);
string = string.slice(1);
} else if (typeof (+temp) === "number" && isFinite(temp)) {
temp = parseInt(string).toString();
result.push(temp);
string = string.slice(temp.length);
} else {
chars = 3;
while (chars) {
temp = string.slice(0, chars);
index = 0;
while (index < symbolsLength) {
if (temp === symbols[index]) {
result.push(temp);
string = string.slice(chars);
break;
}
index += 1;
}
if (index !== symbolsLength) {
break;
}
chars -= 1;
}
if (!chars) {
return false;
}
}
}
return result;
}
console.log(splitFormula("Cu(NO3)2 + H2O - H12"));
console.log(splitFormula("Cu(NO3)2 + H2O - X"));
Output
["Cu", "(", "N", "O", "3", ")", "2", "+", "H", "2", "O", "-", "H", "12"]
false
On jsfiddle
Update: you could even combine a parenthesis check, as found in this answer.

Categories

Resources