SPACEBESTMIN

글

9월, 2019의 게시물 표시

DOM : load images with call back

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <script> //load function preloadImages(sources, callback) { let counter = 0; function onLoad() { counter++; if (counter == sources.length) callback(); //when all the pictures are loaded, callback } for(let source of sources) { //get the array of pictures and load them let img = document.createElement('img'); img.onload = img.onerror = onLoad; img.src = source; } } // ---------- The test ---------- let sources = [ "https://en.js.cx/images-load/1.jpg", "https://en.js.cx/images-load/2.jpg", "https://en.js.cx/images-load/3.jpg" ]; // add random characters to prevent browser caching for (let i = 0; i < sources.length; i++) { sources[i] += '?' + Mat

자세한 내용 보기

DOM : modal form - CSS

html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #prompt-form { display: inline-block; padding: 5px 5px 5px 70px; width: 200px; border: 1px solid black; background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px; vertical-align: middle; } #prompt-form-container { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; text-align: center; /*DHISPLAY NONE*/ display: none; } #prompt-form-container:before { display: inline-block; height: 100%; content: ''; vertical-align: middle; } #cover-div { position: fixed; top: 0; left: 0; z-index: 9000; width: 100%; height: 100%; background-color: gray; opacity: 0.3; } #prompt-form input[name="text"] { display: block; margin: 5px; width: 180px; }

자세한 내용 보기

DOM : modal form - HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body style="height:3000px"> <h2>Click the button below</h2> <input type="button" value="Click to show the form" id="show-button"> <div id="prompt-form-container"> <form id="prompt-form"> <div id="prompt-message"></div> <input name="text" type="text"> <input type="submit" value="Ok"> <input type="button" name="cancel" value="Cancel"> </form> </div> <script> function showCover() { let coverDiv = document.createElement('div'); coverDiv.id = 'cover-div'; document.body.style.overflowY = 'hidden';

자세한 내용 보기

DOM : deposit calculator

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> td select, td input { width: 150px; } #diagram td { vertical-align: bottom; text-align: center; padding: 10px; } #diagram div { margin: auto; } </style> </head> <body> Deposit calculator. <form name="calculator"> <table> <tr> <td>Initial deposit</td> <td> <input name="money" type="number" value="10000" required> </td> </tr> <tr> <td>How many months?</td> <td> <select name="months"> <option value="3">3 (minimum)</option> <option value="6">6 (half-year)</option> <option

자세한 내용 보기

DOM : editable div

<!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="my.css"> <meta charset="utf-8"> </head> <body> <ul> <li>Click the div to edit.</li> <li>Enter or blur saves the result.</li> </ul> HTML is allowed. <div id="view" class="view">Text</div> <script> let area = null; let view = document.getElementById('view'); //view is the div to turn into txtarea view.onclick = function() { editStart(); }; function editStart() { //when VIEW clicked, create A TXTAREA area = document.createElement('textarea'); area.className = 'edit'; area.value = view.innerHTML; area.onkeydown = function(event) { if (event.key == 'Enter') { this.blur();//area is out of

자세한 내용 보기

DOM : form : add an option to select

<!DOCTYPE HTML> <html> <body> <select id="genres"> <option value="rock">Rock</option> <option value="blues" selected>Blues</option> </select> <script> let selectedOption = genres.options[genres.selectedIndex]; alert(selectedOption.value); let newOption = new Option("Classic", "classic"); genres.append(newOption); newOption.selected = true; </script> </body> </html>

자세한 내용 보기

DOM : up down button

<!DOCTYPE HTML> <html> <head> <style> body, html { height: 100%; width: 100%; padding: 0; margin: 0; } #matrix { width: 400px; margin: auto; overflow: auto; text-align: justify; } #arrowTop { height: 9px; width: 14px; color: green; position: fixed; top: 10px; left: 10px; cursor: pointer; } #arrowTop::before { content: '▲'; } </style> <meta charset="utf-8"> </head> <body> <div id="matrix"> <script> for (let i = 0; i < 2000; i++) document.writeln(i) </script> </div> <div id="arrowTop" hidden></div> /*should be hidden until given condition is satified*/ <script> arrowTop.onclick = function() { window.scrollTo(pageXOffset, 0); };

자세한 내용 보기

DOM : Endless page

<!DOCTYPE HTML> <html> <body> <h1>Scroll me</h1> <script> function populate(){ while(true){ let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; //when the scroll is about to reach at the end if(windowRelativeBottom > document.documentElement.clientHeight + 100) break; document.body.insertAdjacentHTML("beforeend", `<p>Date : ${new Date()}</p>`); } } window.addEventListener('scroll', populate); populate();//first page contents </script> <body> </html>

자세한 내용 보기

DOM : Extended hotkeys

<!DOCTYPE HTML> <html> <body> <p>Press "Q" and "W" together (can be in any language).</p> <script> function runOnKeys(func, ...codes){ // func = a function returns hello, codes = q and w key let pressed = new Set(); document.addEventListener('keydown', function(event) { pressed.add(event.code); for (let code of codes) { // from spread parameter if(!pressed.has(code)) { return;//if the key is neither q nor w, return } } pressed.clear(); func(); }); document.addEventListener('keyup', function(event){ pressed.delete(event.code); }); } runOnKeys( ()=> alert("Hello!"), "KeyQ", "KeyW" ); </script> <body> </html>

자세한 내용 보기

DOM droppable : slider

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="slider" class="slider"> <div class="thumb"></div> </div> <script> let thumb = slider.querySelector('.thumb'); thumb.onmousedown = function(event) { event.preventDefault(); let shiftX = event.clientX - thumb.getBoundingClientRect().left; //from the start of the leftmost side to the exact mouse x document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); function onMouseMove(event) { let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left; //the pointer is out of slider=> lock the thumb within the boundaries if(newLeft < 0){ newLeft = 0;//s

자세한 내용 보기