Koodinpätkät 2025, Heinäkuu

Moderni tapahtumien käsittely - CSS-temppuja

Moderni tapahtumien käsittely - CSS-temppuja

Tämä on parempi kuin perinteisen "window.onload" -tapahtuman tekeminen, koska se voi liittää useita tapahtumankäsittelijöitä yhteen tapahtumaan ja he kaikki kutsutaan. "

Vaalenna / tummenta väriä CSS-temppuja

Vaalenna / tummenta väriä CSS-temppuja

CSS-esiprosessorit Sass and Less voivat ottaa mitä tahansa väriä ja tummentaa () tai vaalentaa () sitä tietyllä arvolla. Mutta mitään sellaista kykyä ei ole rakennettu JavaScriptiin. "

Siirrä kohdistin syötteen loppuun - CSS-temppuja

Siirrä kohdistin syötteen loppuun - CSS-temppuja

Missä el on viittaus syötteeseen tai tekstialueeseen. funktio moveCursorToEnd (el) (if (typeof el.selectionStart == "numero") (el.selectionStart = "

Moniriviset merkkijonomuuttujat JavaScriptissä CSS-temppuja

Moniriviset merkkijonomuuttujat JavaScriptissä CSS-temppuja

Tämä toimii: var htmlString = "Tämä on merkkijono."; Tämä epäonnistuu: var htmlSTring = "Tämä on merkkijono."; Joskus tämä on toivottavaa luettavuuden kannalta. Lisätä"

Saada HTML5-elementit toimimaan vanhassa IE: ssä CSS-temppuja

Saada HTML5-elementit toimimaan vanhassa IE: ssä CSS-temppuja

Joten DOM (ja siten CSS) tunnistaa ne todellisina elementteinä: (function () (if (! / * @ Cc_on! @ * / 0) return; var e = "

Loop over querySelectorKaikki ottelut - CSS-temppuja

Loop over querySelectorKaikki ottelut - CSS-temppuja

Katsotaanpa joitain vaihtoehtoja iteroimiseksi NodeList-luettelossa, kun palaat suorittamalla document.querySelectorAll. Olemme kirjoittaneet päivitetyn artikkelin aiheesta "

Silmukka läpi matriisin ilman tuhlaavia hakuja CSS-temppuja

Silmukka läpi matriisin ilman tuhlaavia hakuja CSS-temppuja

Etsi taulukon pituus ennen sen käyttöä funktiossa for, joten sen ei tarvitse laskea matriisin pituutta jokaisessa iteraatiossa (olettaen pituus "

KeyboardEvent-arvo (keyCodes, metaKey jne.) - CSS-temppuja

KeyboardEvent-arvo (keyCodes, metaKey jne.) - CSS-temppuja

Kun KeyboardEvent käynnistyy, voit testata, mitä näppäintä painettiin, koska tapahtuma sisältää tietoja, joihin voit kirjoittaa logiikkaa. "

Hae URL-osoitteet ja URL-osat JavaScriptiin - CSS-temppuja

Hae URL-osoitteet ja URL-osat JavaScriptiin - CSS-temppuja

JavaScript voi käyttää nykyistä URL-osoitetta osittain. Tälle URL-osoitteelle: https://css-tricks.com/example/index.html?s=flexbox window.location.protocol = "

JavaScript MD5 - CSS-temppuja

JavaScript MD5 - CSS-temppuja

Var MD5 = funktio (merkkijono) (funktio RotateLeft (lValue, iShiftBits) (return (lValue> (32-iShiftBits));) funktio AddUnsigned (lX, lY) (var "

JavaScript-taulukko sisältää - CSS-temppuja

JavaScript-taulukko sisältää - CSS-temppuja

Javascript-objektit ovat todella mukavia, mutta joskus niistä puuttuu hyödyllisiä pieniä toimintoja / menetelmiä. Yllä oleva esimerkki on matriiseilla. Se on todella"

Syöttö katoavalla taustakuvalla - CSS-temppuja

Syöttö katoavalla taustakuvalla - CSS-temppuja

Tämä kopioi upotettavien tavallisten Google-hakukenttien toiminnot. Heillä on kuva taustalla ja kun syötettä napsautetaan "

Aikavälit - CSS-temppuja

Aikavälit - CSS-temppuja

Vakio Sinun ei tarvitse luoda muuttujaa, mutta se on hyvä käytäntö, sillä voit käyttää muuttujaa clearInterval-toiminnolla pysäyttämään käynnissä olevan "

Pistä HTML HTML-merkkijonosta - CSS-temppuja

Pistä HTML HTML-merkkijonosta - CSS-temppuja

Oletetaan, että sinulla on merkkijono HTML-koodi: anna string_of_html = `

Cool
`; Ehkä se tulee sovellusliittymästä tai olet itse rakentanut sen "

Pistä uudet CSS-säännöt - CSS-temppuja

Pistä uudet CSS-säännöt - CSS-temppuja

Jos joudut vaihtamaan elementin tyyliä JavaScriptillä, on yleensä parempi vaihtaa luokan nimi ja CSS pitää olla jo sivulla. "

Palaa-painike - CSS-temppuja

Palaa-painike - CSS-temppuja

Selaimissa on jo "takaisin" -painikkeet, joten sinun on parempi olla hyvä syy tarvita laittaa yksi sivullesi! Syöttöpainike upotetulla JavaScript-koodilla "

Hanki YouTube-avain linkistä - CSS-temppuja

Hanki YouTube-avain linkistä - CSS-temppuja

Esimerkkilinkki: // Youtube-linkki var youtubeLink = document.getElementById ('myLink'). Href; var youtubeVideoKey = "

HtmlEntities for JavaScript - CSS-temppuja

HtmlEntities for JavaScript - CSS-temppuja

Htmlentities () on PHP-toiminto, joka muuntaa erikoismerkit (kuten <) pakenetuiksi / koodatuiksi arvoiksi (kuten <). Tämän avulla voit näyttää "

Hae URL-muuttujat - CSS-temppuja

Hae URL-muuttujat - CSS-temppuja

Funktio getQueryVariable (muuttuja) (var kysely = ikkuna.sijainti.haku.substring (1); var vars = kysely.split ("&"); for (var i = 0; i "

Globaalit muuttujat - CSS-temppuja

Globaalit muuttujat - CSS-temppuja

Ilmoita muuttuja funktion ulkopuolella ... var oneVariable; function setVariable () (oneVariable = "Muuttujajoukko funktion sisällä!";) function "

Hanki kaikki mahdolliset DOM-tapahtumat - CSS-temppuja

Hanki kaikki mahdolliset DOM-tapahtumat - CSS-temppuja

Voit saada joukon kaikista tapahtumista, jotka alkavat "päällä" (esim. Onclick) suorittamalla tämän Firefoxin konsolissa. .filter (funktio (i) (return "

Hae objektin koko - CSS-temppuja

Hae objektin koko - CSS-temppuja

Kuten näppäimissä, näppäinten lukumäärä. function objectSize (the_object) (/ * -toiminto vahvistaakseen kunkin objektin avaimen olemassaolon saadaksesi kelvollisen määrän "

Puhelutoiminto satunnainen ajastin - CSS-temppuja

Puhelutoiminto satunnainen ajastin - CSS-temppuja

Function randRange (data) (var newTime = data; return newTime;) function toggleSomething () (var timeArray = new Array (200, 300, 150, 250, 2000, 3000, "

Alusta valuutta CSS-temppuja

Alusta valuutta CSS-temppuja

Tämä toiminto pyöristää numerot kahteen desimaaliin ja varmistaa, että palautetulla arvolla on kaksi desimaalia. Esimerkiksi 12.006 palauttaa arvon 12.01, "

Korjaa IE 10 Windows Phone 8 -näkymässä - CSS-temppuja

Korjaa IE 10 Windows Phone 8 -näkymässä - CSS-temppuja

(function () (if (navigaattori.userAgent.match (/IEMobile/10.0/)) (var msViewportStyle = document.createElement ("tyyli"); msViewportStyle.appendChild ("

Tyhjennä taulukko - CSS-temppuja

Tyhjennä taulukko - CSS-temppuja

Tämä on nopein ja helpoin tapa tyhjentää taulukko. Tietysti voi olla muita tapoja, mutta niihin sisältyy yleensä uuden taulukon luominen. "

Vaadittu JavaScriptiä sisältävä sisältö varalla olevalla sisällöllä CSS-temppuja

Vaadittu JavaScriptiä sisältävä sisältö varalla olevalla sisällöllä CSS-temppuja

JavaScriptiä vaadittava alue on piilotettu sisäisellä CSS: llä ja näytetään sen jälkeen, kun se on ladattu pienellä JavaScript-katkelmalla. Sen alapuolella käytetään noscript-tunnisteita "

Virheetön konsolin kirjaaminen - CSS-temppuja

Virheetön konsolin kirjaaminen - CSS-temppuja

Var Fb = (); // Tyhjä objekti literaali funktion Fb.log = function (obj, consoleMethod) pitämiselle (if (window.console && window.console.firebug && "

Eri tyylitaulukko kellonajan odottamiseen CSS-temppuja

Eri tyylitaulukko kellonajan odottamiseen CSS-temppuja

Nimeä css-tiedostosi vastaavasti: night.css, day.css jne ... Yksi hieno bonus on, että koska JavaScript saa ajan paikallisesta koneesta eikä "