Comment Comment by spowerei this add a slider selector for the time range to consider and give higher values of alpha channel to more recent posts. const div = document.createElement("div"); div.innerHTML = `<div style="position:fixed;top:20px;right:20px;width:40px;background:#ff05;"> <input type="range" orient="vertical" id="interval" min="0" max="95" value="30" style="width:100%"> <label for="interval" style="display:block"></label> </div>`; const input = div.firstElementChild.firstElementChild; const label = input.nextElementSibling; document.body.appendChild(div); const formatTime = (mins) => { if (mins > 60) { return `${Math.floor(mins / 60)}h ${mins % 60}m`; } return `${mins}m`; }; const extrapolate = (val) => { val = val * 2; for (let t = 30; t <= 150; t += 30) { val += Math.max(0, val - t); } return val; }; input.oninput = () => colorStuff(extrapolate(input.value)); const colorStuff = (interval_minutes) => { label.innerText = `${formatTime(interval_minutes)}`; const comments = Array.from(document.getElementsByClassName("athing comtr")); dates = Array.from(document.getElementsByClassName('age')); dates.sort((c1, c2) => Date.parse((c2).title) - Date.parse((c1).title)); const now = new Date(); const timestamp = now.getTime() + now.getTimezoneOffset() * 60E3; comments.forEach((c) => { const commentDateString = c.getElementsByClassName("age")[0].title; const diff=(timestamp-Date.parse(c.getElementsByClassName('age')[0].title))/60E3; const diff2=(Date.parse(dates[0].title)-Date.parse(c.getElementsByClassName('age')[0].title))/60E3; if (diff < interval_minutes) { const alpha = (1 - diff2 / interval_minutes)**6; c.style.backgroundColor = `rgba(100, 255, 100, ${alpha})`; } else { c.style.backgroundColor = "rgba(255, 255, 255,0)"; } }); }; colorStuff(extrapolate(input.value)); parent spowerei 5 years ago