分享一段牛逼的代码

详情前往：https://learnku.com/articles/73809

评论里的代码更精彩！

它的牛逼点在于，可以做一些无网络分享的小工具，比如

把下面的代码复制到地址栏粘贴即可

data:text/html,<meta charset="utf-8"><h3>✅ 支持中文的Base64编解码器</h3><textarea id=input rows=4 cols=50 placeholder="输入内容，支持中文😊"></textarea><p><button onclick="encode()">编码→Base64</button> <button onclick="decode()">解码←Base64</button></p><p id=output></p><script>function encode(){try{document.getElementById('output').innerHTML='编码结果: '+btoa(unescape(encodeURIComponent(document.getElementById('input').value)))}catch(e){document.getElementById('output').innerHTML='编码错误: '+e.message}}function decode(){try{document.getElementById('output').innerHTML='解码结果: '+decodeURIComponent(escape(atob(document.getElementById('input').value)))}catch(e){document.getElementById('output').innerHTML='解码错误: '+e.message}}</script>

再比如，酷炫的表白页面

代码

data:text/html;charset=utf-8,%3Cmeta%20charset%3D%22utf-8%22%3E%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%2C%20shrink-to-fit%3Dno%22%3E%3Ctitle%3E%E2%9D%A4%EF%B8%8F%20%E6%88%91%E7%88%B1%E4%BD%A0%3C%2Ftitle%3E%3Cstyle%3Ebody%7Bmargin%3A0%3Bpadding%3A0%3Bbackground%3A%23ffdee8%3Boverflow%3Ahidden%3Bfont-family%3AArial%2Csans-serif%3Bheight%3A100vh%3B%7D.container%7Bdisplay%3Aflex%3Bflex-direction%3Acolumn%3Bjustify-content%3Acenter%3Bal%20align-items%3Acenter%3Bheight%3A100vh%3Btext-align%3Acenter%3B%7Dh1%7Bfont-size%3A36px%3Bcolor%3A%23d42a6a%3B%7D.msg%7Bfont-size%3A20px%3Bcolor%3A%23e6005c%3Bmargin%3A20px%3B%7D.btn%7Bpadding%3A12px%2030px%3Bfont-size%3A18px%3Bbackground%3A%23ff2d75%3Bcolor%3Awhite%3Bborder%3Anone%3Bborder-radius%3A30px%3Bcursor%3Apointer%3Btransition%3A0.3s%3Bmargin%3A0%20auto%3Bwidth%3Amin(300px%2C%20100vw)%3B%7D.btn%3Ahover%7Btransform%3Ascale(1.1)%3Bbackground%3A%23e6005c%3B%7D%40keyframes%20float%7B0%25%7Btransform%3AtranslateY(0)%3Bopacity%3A0.7%7D50%25%7Btransform%3AtranslateY(-20px)%7D100%25%7Btransform%3AtranslateY(0)%3Bopacity%3A0.7%7D%7D.heart%7Bposition%3Aabsolute%3Bcolor%3A%23ff0080%3Bfont-size%3A20px%3Banimation%3Afloat%202s%20ease-in-out%20infinite%3B%7D%3C%2Fstyle%3E%3Cdiv%20class%3D%22container%22%3E%3Ch1%3E%E4%BA%B2%E7%88%B1%E7%9A%84%20%E5%B0%8F%E7%BE%8E%3C%2Fh1%3E%3Cp%20class%3D%22msg%22%3E%E6%88%91%E6%9C%89%E8%AF%9D%E6%83%B3%E5%AF%B9%E4%BD%A0%E8%AF%B4%E2%80%A6%E2%80%A6%3Cbr%3E%E6%88%91%E5%96%9C%E6%AC%A2%E4%BD%A0%EF%BC%8C%E5%B7%B2%E7%BB%8F%E5%BE%88%E4%B9%85%E4%BA%86%20%E2%9D%A4%EF%B8%8F%3C%2Fp%3E%3Cbutton%20class%3D%22btn%22%20onclick%3D%22accept()%22%3E%E2%9C%85%20%E6%8E%A5%E5%8F%97%E8%A1%A8%E7%99%BD%3C%2Fbutton%3E%3C%2Fdiv%3E%3Cscript%3Efunction%20accept()%7Bdocument.body.innerHTML%3D'%3Cdiv%20class%3D%22container%22%20style%3D%22background%3A%23ffe6f2%3B%22%3E%3Ch1%3E%F0%9F%8E%89%20%E8%80%B6%EF%BC%81%E4%BD%A0%E7%AD%94%E5%BA%94%E5%95%A6%EF%BC%81%3C%2Fh1%3E%3Cp%20style%3D%22font-size%3A24px%3Bcolor%3A%23d42a6a%22%3E%E4%BB%8E%E4%BB%8A%E5%A4%A9%E8%B5%B7%EF%BC%8C%E4%BD%A0%E6%98%AF%E6%88%91%E7%9A%84%E4%BA%BA%E5%90%96%EF%BD%9E%3Cbr%3E%E6%88%91%E4%BC%9A%E4%B8%80%E7%9B%B4%E9%99%AA%E4%BD%A0%EF%BC%8C%E7%88%B1%E4%BD%A0%20%E2%9C%A8%3C%2Fp%3E%3Cdiv%20id%3D%22hearts%22%3E%3C%2Fdiv%3E%3C%2Fdiv%3E'%3Bfor(let%20i%3D0%3Bi%3C50%3Bi%2B%2B)%7BsetTimeout(()%3D%3E%7Blet%20h%3Ddocument.createElement('div')%3Bh.textContent%3D'%F0%9F%92%97'%3Bh.style.position%3D'fixed'%3Bh.style.left%3DMath.random()*100%2B'vw'%3Bh.style.top%3D'100vh'%3Bh.style.fontSize%3D'20px'%3Bh.style.color%3D'%23ff0080'%3Bh.style.zIndex%3D9999%3Bh.style.pointerEvents%3D'none'%3Bdocument.getElementById('hearts').appendChild(h)%3Bh.animate(%5B%7Btransform%3A'translateY(0)'%7D%2C%7Btransform%3A'translateY(-100vh)'%7D%5D%2C%7Bduration%3A3000%2BMath.random()*2000%2Citerations%3A1%7D)%3B%7D%2Ci*100)%3B%7D%7D%3C%2Fscript%3E%3Cscript%3Efor(let%20i%3D0%3Bi%3C30%3Bi%2B%2B)%7Blet%20h%3Ddocument.createElement('div')%3Bh.innerHTML%3D'%E2%9D%A4%EF%B8%8F'%3Bh.className%3D'heart'%3Bh.style.left%3DMath.random()*100%2B'vw'%3Bh.style.top%3DMath.random()*100%2B'vh'%3Bh.style.animationDelay%3DMath.random()*3%2B's'%3Bdocument.body.appendChild(h)%3B%7D%3C%2Fscript%3E

更酷炫的表白代码

data:text/html;charset=utf-8,%3Cmeta%20charset%3D%22utf-8%22%3E%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%2C%20shrink-to-fit%3Dno%22%3E%3Ctitle%3E%E2%9D%A4%EF%B8%8F%20%E6%88%91%E7%88%B1%E4%BD%A0%3C%2Ftitle%3E%3Cstyle%3Ebody%7Bmargin%3A0%3Bpadding%3A0%3Bbackground%3A%23000%3Boverflow%3Ahidden%3Bfont-family%3A%27Arial%27%2Csans-serif%3Bheight%3A100vh%3Bdisplay%3Aflex%3Bjustify-content%3Acenter%3Balign-items%3Acenter%3Bcolor%3Awhite%7D.container%7Btext-align%3Acenter%3Bz-index%3A10%3Bmax-width%3A800px%3Bpadding%3A20px%7Dh1%7Bfont-size%3A3rem%3Bmargin-bottom%3A20px%3Bcolor%3A%23ff4d88%3Btext-shadow%3A0%200%2010px%20%23ff0080%2C0%200%2020px%20%23ff0080%3Banimation%3Apulse%202s%20infinite%7Dp%7Bfont-size%3A1.5rem%3Bline-height%3A1.6%3Bmargin-bottom%3A30px%7D.btn%7Bpadding%3A15px%2040px%3Bfont-size%3A1.2rem%3Bbackground%3Alinear-gradient(45deg%2C%23ff0080%2C%23ff4d88)%3Bcolor%3Awhite%3Bborder%3Anone%3Bborder-radius%3A50px%3Bcursor%3Apointer%3Btransition%3Aall%200.3s%3Bbox-shadow%3A0%200%2015px%20%23ff0080%7D.btn%3Ahover%7Btransform%3Ascale(1.1)%3Bbox-shadow%3A0%200%2025px%20%23ff0080%7D.heart%7Bposition%3Aabsolute%3Bcolor%3A%23ff0080%3Bfont-size%3A20px%3Bpointer-events%3Anone%3Banimation%3Afloat%204s%20ease-in-out%20infinite%7D%40keyframes%20float%7B0%25%2C100%25%7Btransform%3AtranslateY(0)%20rotate(0deg)%3Bopacity%3A1%7D50%25%7Btransform%3AtranslateY(-50px)%20rotate(10deg)%3Bopacity%3A0.7%7D%7D%40keyframes%20pulse%7B0%25%7Btransform%3Ascale(1)%7D50%25%7Btransform%3Ascale(1.05)%7D100%25%7Btransform%3Ascale(1)%7D%7D.firework%7Bposition%3Aabsolute%3Bwidth%3A5px%3Bheight%3A5px%3Bborder-radius%3A50%25%3Bbox-shadow%3A0%200%2010px%205px%3Banimation%3Aexplode%201s%20ease-out%20forwards%3Bopacity%3A0%7D%40keyframes%20explode%7B0%25%7Btransform%3Ascale(1)%3Bopacity%3A1%7D100%25%7Btransform%3Ascale(30)%3Bopacity%3A0%7D%7D.stars%7Bposition%3Afixed%3Btop%3A0%3Bleft%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3Bpointer-events%3Anone%7D.star%7Bposition%3Aabsolute%3Bbackground%3Awhite%3Bborder-radius%3A50%25%3Banimation%3Atwinkle%201s%20infinite%20alternate%7D%40keyframes%20twinkle%7B0%25%7Bopacity%3A0.2%7D100%25%7Bopacity%3A1%7D%7D.photo-frame%7Bwidth%3A200px%3Bheight%3A200px%3Bborder%3A5px%20solid%20%23ff4d88%3Bborder-radius%3A10px%3Bmargin%3A20px%20auto%3Boverflow%3Ahidden%3Bbox-shadow%3A0%200%2020px%20%23ff0080%3Bposition%3Arelative%7D.photo%7Bwidth%3A100%25%3Bheight%3A100%25%3Bbackground%3Aurl(%27https%3A%2F%2Fi.imgur.com%2FJqYeYnR.jpg%27)%20center%2Fcover%3Btransition%3Atransform%200.5s%7D.photo-frame%3Ahover%20.photo%7Btransform%3Ascale(1.1)%7D%3C%2Fstyle%3E%3Cdiv%20class%3D%22stars%22%20id%3D%22stars%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22container%22%3E%3Ch1%3E%E4%BA%B2%E7%88%B1%E7%9A%84%EF%BC%8C%E6%88%91%E7%88%B1%E4%BD%A0%3C%2Fh1%3E%3Cdiv%20class%3D%22photo-frame%22%3E%3Cdiv%20class%3D%22photo%22%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cp%3E%E4%BB%8E%E7%AC%AC%E4%B8%80%E6%AC%A1%E8%A7%81%E5%88%B0%E4%BD%A0%EF%BC%8C%E6%88%91%E7%9A%84%E5%BF%83%E5%B0%B1%E8%A2%AB%E4%BD%A0%E5%81%B7%E8%B5%B0%E4%BA%86...%3C%2Fp%3E%3Cp%3E%E4%BD%A0%E7%9A%84%E7%AC%91%E5%AE%B9%E6%98%AF%E6%88%91%E6%AF%8F%E5%A4%A9%E7%9A%84%E5%8A%A8%E5%8A%9B%EF%BC%8C%E4%BD%A0%E7%9A%84%E5%A3%B0%E9%9F%B3%E6%98%AF%E6%88%91%E6%9C%80%E7%88%B1%E7%9A%84%E6%97%8B%E5%BE%8B%3C%2Fp%3E%3Cp%3E%E6%88%91%E6%83%B3%E5%92%8C%E4%BD%A0%E4%B8%80%E8%B5%B7%EF%BC%8C%E8%B5%B0%E8%BF%87%E6%AF%8F%E4%B8%80%E4%B8%AA%E6%98%A5%E5%A4%8F%E7%A7%8B%E5%86%AC%3C%2Fp%3E%3Cbutton%20class%3D%22btn%22%20onclick%3D%22acceptLove()%22%3E%E2%9D%A4%EF%B8%8F%20%E6%8E%A5%E5%8F%97%E6%88%91%E7%9A%84%E7%88%B1%20%E2%9D%A4%EF%B8%8F%3C%2Fbutton%3E%3C%2Fdiv%3E%3Cscript%3Efunction%20createStars()%7Bconst%20stars%3Ddocument.getElementById(%27stars%27)%3Bfor(let%20i%3D0%3Bi%3C100%3Bi%2B%2B)%7Bconst%20star%3Ddocument.createElement(%27div%27)%3Bstar.className%3D%27star%27%3Bstar.style.width%3DMath.random()*3%2B%27px%27%3Bstar.style.height%3Dstar.style.width%3Bstar.style.left%3DMath.random()*100%2B%27vw%27%3Bstar.style.top%3DMath.random()*100%2B%27vh%27%3Bstar.style.animationDelay%3DMath.random()*2%2B%27s%27%3Bstars.appendChild(star)%7D%7Dfunction%20createHearts()%7Bfor(let%20i%3D0%3Bi%3C30%3Bi%2B%2B)%7Bconst%20heart%3Ddocument.createElement(%27div%27)%3Bheart.className%3D%27heart%27%3Bheart.innerHTML%3D%27%E2%9D%A4%EF%B8%8F%27%3Bheart.style.left%3DMath.random()*100%2B%27vw%27%3Bheart.style.top%3DMath.random()*100%2B%27vh%27%3Bheart.style.fontSize%3D(Math.random()*20%2B10)%2B%27px%27%3Bheart.style.animationDuration%3D(Math.random()*3%2B2)%2B%27s%27%3Bheart.style.animationDelay%3DMath.random()*5%2B%27s%27%3Bdocument.body.appendChild(heart)%7D%7Dfunction%20createFirework(x%2Cy%2Ccolor)%7Bconst%20firework%3Ddocument.createElement(%27div%27)%3Bfirework.className%3D%27firework%27%3Bfirework.style.left%3Dx%2B%27px%27%3Bfirework.style.top%3Dy%2B%27px%27%3Bfirework.style.color%3Dcolor%3Bdocument.body.appendChild(firework)%3BsetTimeout(()%3D%3E%7Bfirework.remove()%7D%2C1000)%7Dfunction%20acceptLove()%7Bconst%20audio%3Dnew%20Audio(%27https%3A%2F%2Fwww.soundhelix.com%2Fexamples%2Fmp3%2FSoundHelix-Song-1.mp3%27)%3Baudio.loop%3Dtrue%3Baudio.play()%3Bdocument.querySelector(%27.container%27).innerHTML%3D%60%3Ch1%3E%F0%9F%8E%89%20%E6%88%91%E4%BB%AC%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%95%A6%EF%BC%81%3C%2Fh1%3E%3Cp%20style%3D%22font-size%3A1.8rem%3B%20color%3A%23ff4d88%22%3E%E4%BB%8E%E4%BB%8A%E5%A4%A9%E8%B5%B7%EF%BC%8C%E4%BD%A0%E5%B0%B1%E6%98%AF%E6%88%91%E7%9A%84%E5%85%A8%E4%B8%96%E7%95%8C%3C%2Fp%3E%3Cp%3E%E6%88%91%E4%BC%9A%E4%B8%80%E7%9B%B4%E7%88%B1%E4%BD%A0%E3%80%81%E7%8F%8D%E6%83%9C%E4%BD%A0%E3%80%81%E9%99%AA%E4%BC%B4%E4%BD%A0%3C%2Fp%3E%3Cdiv%20id%3D%22fireworks-container%22%3E%3C%2Fdiv%3E%3Cbutton%20class%3D%22btn%22%20onclick%3D%22moreLove()%22%3E%F0%9F%92%96%20%E7%BB%99%E6%88%91%E6%9B%B4%E5%A4%9A%E7%88%B1%20%F0%9F%92%96%3C%2Fbutton%3E%60%3BsetInterval(()%3D%3E%7Bconst%20x%3DMath.random()*window.innerWidth%3Bconst%20y%3DMath.random()*window.innerHeight%3Bconst%20colors%3D%5B%27%23ff0080%27%2C%27%23ff4d88%27%2C%27%23ff99bb%27%2C%27%23ffccdd%27%5D%3Bconst%20color%3Dcolors%5BMath.floor(Math.random()*colors.length)%5D%3BcreateFirework(x%2Cy%2Ccolor)%7D%2C300)%3Bfor(let%20i%3D0%3Bi%3C100%3Bi%2B%2B)%7BsetTimeout(()%3D%3E%7Bconst%20heart%3Ddocument.createElement(%27div%27)%3Bheart.className%3D%27heart%27%3Bheart.innerHTML%3D%27%E2%9D%A4%EF%B8%8F%27%3Bheart.style.left%3DMath.random()*100%2B%27vw%27%3Bheart.style.top%3D%27100vh%27%3Bheart.style.fontSize%3D(Math.random()*30%2B20)%2B%27px%27%3Bdocument.body.appendChild(heart)%3Bconst%20duration%3DMath.random()*3000%2B2000%3Bheart.animate(%5B%7Btransform%3A%27translateY(0)%27%2C%20opacity%3A1%7D%2C%7Btransform%3A%60translateY(-%24%7Bwindow.innerHeight%2B100%7Dpx)%60%2C%20opacity%3A0%7D%5D%2C%7Bduration%3Aduration%2Ceasing%3A%27cubic-bezier(0.1%2C%200.8%2C%200.9%2C%201)%27%7D)%3BsetTimeout(()%3D%3E%7Bheart.remove()%7D%2Cduration)%7D%2Ci*200)%7D%7Dfunction%20moreLove()%7Bfor(let%20i%3D0%3Bi%3C50%3Bi%2B%2B)%7BsetTimeout(()%3D%3E%7Bconst%20x%3DMath.random()*window.innerWidth%3Bconst%20y%3DMath.random()*window.innerHeight%3BcreateFirework(x%2Cy%2C%27%23ff0080%27)%7D%2Ci*100)%7Ddocument.querySelector(%27.container%27).innerHTML%2B%3D%60%3Cp%20style%3D%22font-size%3A2rem%3B%20margin-top%3A30px%3B%20color%3A%23ff4d88%22%3E%E6%88%91%E4%BC%9A%E6%B0%B8%E8%BF%9C%E7%88%B1%E4%BD%A0%20%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F%3C%2Fp%3E%60%7DcreateStars()%3BcreateHearts()%3Bdocument.addEventListener(%27click%27%2C(e)%3D%3E%7Bconst%20heart%3Ddocument.createElement(%27div%27)%3Bheart.innerHTML%3D%27%E2%9D%A4%EF%B8%8F%27%3Bheart.style.position%3D%27absolute%27%3Bheart.style.left%3De.clientX%2B%27px%27%3Bheart.style.top%3De.clientY%2B%27px%27%3Bheart.style.fontSize%3D%2730px%27%3Bheart.style.color%3D%27%23ff0080%27%3Bheart.style.pointerEvents%3D%27none%27%3Bheart.style.transform%3D%27translate(-50%25%2C%20-50%25)%27%3Bdocument.body.appendChild(heart)%3Bheart.animate(%5B%7Btransform%3A%27translate(-50%25%2C%20-50%25)%20scale(1)%27%2C%20opacity%3A1%7D%2C%7Btransform%3A%27translate(-50%25%2C%20-150%25)%20scale(2)%27%2C%20opacity%3A0%7D%5D%2C%7Bduration%3A1000%2Ceasing%3A%27ease-out%27%7D)%3BsetTimeout(()%3D%3E%7Bheart.remove()%7D%2C1000)%7D)%3B%3C%2Fscript%3E