Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 14, 2021 11:30 pm GMT

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.

nametypevalue
namestrname of last key pressed
pressedboolwhether key up or down
upfuncfunction triggered on keyup
downfuncfunction triggered on keydown
numintJS 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.

nametypevalue
xinthorizontal mouse position
yintvertical mouse position
scrollXinthorizontal scroll position
scrollYintvertical scroll position
upfuncfunction triggered on mouseup
downfuncfunction triggered on mousedown
upfuncfunction triggered on keyup
scrollfuncfunction triggered on scroll
buttonintbutton 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 cursordocument.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().text}return 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+theta}return 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!


Original Link: https://dev.to/coolprofessor/js-snippets-31lf

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To