JS Snippets

I often find myself on stackoverflow looking for these snippets of code, so I put it all in one place.



key input

key=pressed:false,up:function(),down:function(),name:"",code:null;keyList=num8:"backspace",num9:"tab",num13:"enter",num16:"shift",num17:"ctrl",num18:"alt",num19:"pause",num20:"caps",num27:"exit",num32:" ",num33:"pgup",num34:"pgdn",num35:"end",num36:"home",num37:"left",num38:"up",num39:"right",num40:"down",num45:"insert",num46:"del",num48:0,num49:1,num50:2,num51:3,num52:4,num53:5,num54:6,num55:7,num56:8,num57:9,num65:"a",num66:"b",num67:"c",num68:"d",num69:"e",num70:"f",num71:"g",num72:"h",num73:"i",num74:"j",num75:"k",num76:"l",num77:"m",num78:"n",num79:"o",num80:"p",num81:"q",num82:"r",num83:"s",num84:"t",num85:"u",num86:"v",num87:"w",num88:"x",num89:"y",num90:"z",num91:"win",num92:"win",num93:"select",num96:0,num97:1,num98:2,num99:3,num100:4,num101:5,num102:6,num103:7,num104:8,num105:9,num106:"*",num107:"+",num109:"-",num110:".",num111:"/",num112:"F1",num113:"F2",num114:"F3",num115:"F4",num116:"F5",num117:"F6",num118:"F7",num119:"F8",num120:"F9",num121:"F10",num122:"F11",num123:"F12",num144:"numlock",num145:"scroll lock",num186:";",num187:"=",num188:",",num189:"-",num190:".",num191:"/",num192:"`",num219:"[",num219:"-",num220:"\",num221:"]",num222:"'";window.addEventListener("keypress",(keyIsPressed)=>key.name=eval("keyList.num"+keyIsPressed.keyCode);if(key.name===undefined)key.code=""key.pressed=true;key.down());window.addEventListener("keyup",(event)=>key.pressed=false;key.up());

This creates a key object that holds keyboard info.

name type value
name str name of last key pressed
pressed bool whether key up or down
up func function triggered on keyup
down func function triggered on keydown
num int JS keycode



Mouse input

mouse=x:0,y:0,scroll:function(),scrollX:0,scrollY:0,down:function(),up:function(),moved:function(),pressed:false,button:undefined;window.addEventListener("mousedown",(event)=>mouse.pressed=true;mouse.down();mouse.button=event.button);document.addEventListener('mousemove',(event)=>mouse.moved();mouse.px=mouse.x;mouse.px=mouse.x;mouse.x=event.clientX+mouse.scrollX;mouse.y=event.clientY+mouse.scrollY);window.addEventListener('touchstart',function(e)mouse.pressed=true;mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY,false);window.addEventListener('touchmove',function(e)mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY;,false);window.addEventListener('touchend',function(e)mouse.pressed=false,false);window.addEventListener("mouseup",(event)=>mouse.pressed=false;mouse.up());window.addEventListener("scroll",function()mouse.scroll();mouse.x+=window.scrollX-mouse.scrollX;mouse.y+=window.scrollY-mouse.scrollY;mouse.scrollX=window.scrollX;mouse.scrollY=window.scrollY);

This creates a mouse object that holds mouse info.

name type value
x int horizontal mouse position
y int vertical mouse position
scrollX int horizontal scroll position
scrollY int vertical scroll position
up func function triggered on mouseup
down func function triggered on mousedown
up func function triggered on keyup
scroll func function triggered on scroll
button int button number pressed



mouse cursor

//This code is required for Firefox.
document.documentElement.style='height:100%;width:100%;padding:0';
//use this to change the CSS cursor
document.documentElement.style.cursor = 'pointer'



sound

audio.play(new Audio('audio_file.mp3'));



download

function download(name,contents)var c=document.createElement("a");c.download=name;var t=new Blob([contents],type:"text/plain");c.href=window.URL.createObjectURL(t);c.click()



user-highlighted text

function highlightedText()var text="";if(window.getSelection)text=window.getSelection().toString()else if(document.selection&&document.selection.type!="Control")text=document.selection.createRange().textreturn text



copy

function copy(copytext)navigator.clipboard.writeText(copytext);



random

function random(min,max)return min+Math.random()*(max-min);



distance

const distance = (x1,y1,x2,y2) => Math.hypot(x1 - x2, y1 - y2);



angle

function angle(x1,y1,x2,y2)var theta=Math.atan2((y2-y1),(x2-x1))*(180/Math.PI);if(theta<0)theta=360+thetareturn theta



wait

wait=(ms)=>forever();refresh();let now=Date.now(),end=now+ms;while(now<end)now=Date.now();

This is not recommended, because it stops the entire JS engine.



repeat

repeat=(times,what)=>for(i=0;i<times;i+=1)what()



make editable

document.getElementById('el').contentEditable = 'true'

I hope this was somewhat helpful!


Source link