JS1K是JavaScript編程競賽——參加競賽的規則很簡單，腳本必須小于1K，競賽網站開始也只是為了娛樂，卻意外地收到了很多優秀的作品。
這是2016年JS1k上傳的作品，用幾十行代碼實現的一個3D旋轉魔方：
代碼如下：
function z(t, e) { return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+"px;position:absolute;" : document.createElement("div")}function w() { ++t==360&&(t=0, x=++x%3) for (i in m) 2 == m[i][s[x]] ? m[i][u][a] = r+s[x]+"(" + t + "deg)" : 0; c[u][a] = r+"3d(1,1,1," + t + "deg)", requestAnimationFrame(w)}var a = "transform", p = "background-color:", y = a+"-style:preserve-3d;", u = "style", v = "cssText", B = z(), c = z(), t = x = 0, d, e, f, g, h, k, l, m = [], n, i, r="rotate", s = ["X","Y","Z"];B[u][v] = "perspective:900px;"+z(600)+p+"#666";c[u][v] = y + z(240) +"top:30%;left:30%", z(B, c), z(window.b, B);for (l = 27; l--; z(c, f)) { f = z(), f[u][v] = y + z(240), f.X = g = l % 3, f.Y = h = (l - g) % 9 / 3, f.Z = k = ~~(l / 9), e = z(), e[u][v] = y + z(80) +a+":translate3d(" + 80 * g + "px," + 80 * h + "px," + 80 * (k-1) + "px)"; for (n = 6; n--; z(e, d)) d = z(), d[u][v] = y + z(72) + "border-radius:9px;border:4px solid #000;opacity:0.9;"+a+":"+r+"X(" + (4 > n ? 90 * n : 0) + "deg)"+r+"Y(" + (4 > n ? 0 : 4 == n ? -90 : 90) + "deg)translateZ(40px);"+p+ (0==n&&2==k?"#05C":1==n&&0==h?"#FD0": 2==n&&0==k?"#0A6":3==n&&2==h?"#FFF":4==n&&0==g?"#F60":5==n&&2==g?"#C24":"#000"); z(f, e), m.push(f)}w();知識點擴展
JS如何實現旋轉的魔方，瀏覽器從其他標簽頁回來依然勻速旋轉？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div class="cube" onclick="stop()"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> <div class="right">right</div> <div class="top">top</div> <div class="bottom">bottom</div> </div></body><style> .cube { width: 400px; height: 400px; transition: all 3s; margin: 300px auto; /* 作用于所有3d轉換的子元素 設置給父級 */ /* perspective: 1000px; */ /* transform: rotateX(30deg) rotateY(45deg); */ /* 平面到立方 默認值:平面flat*/ transform-style: preserve-3d; position: relative; } /* div:hover { transform: rotateY(90deg) translateZ(-200px); opacity: 0.5; } */ .front, .back, .left, .right, .top, .bottom { width: 100%; height: 100%; text-align: center; line-height: 400px; position: absolute; opacity: 0.9; left: 0; top: 0; } .front { background-color: palevioletred; background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg'); transform: translateZ(200px); } .back { background-color: yellow; transform: translateZ(-200px); background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg'); } .left { background-color: pink; background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg'); transform: rotateY(90deg) translateZ(-200px) } .right { background-color: yellowgreen; background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg'); transform: rotateY(90deg) translateZ(200px) } .top { background-color: skyblue; background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg"); transform: rotateX(90deg) translateZ(200px) } .bottom { background-color: orange; background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg'); transform: rotateX(90deg) translateZ(-200px) }</style><script> window.onload = function () { let cube = document.querySelector('.cube') let timer = null let x = 0; y = 0; function rotate() { cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)'; x += 30 y += 45 } function stop() { clearInterval(timer) } clearInterval(timer); timer = setInterval(() => { rotate(); }, 1000); // 監聽是否在當前頁，并置為已讀 // document.addEventListener("visibilitychange", function () { // if (document.hidden) { //不處于當前頁面 // // do something // clearInterval(timer) // } else { // timer; // } // }); var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function () { if (!document[hiddenProperty]) { timer = setInterval(() => { rotate(); }, 1000); console.log(hiddenProperty); } else { clearInterval(timer) } } document.addEventListener(visibilityChangeEvent, onVisibilityChange); // document.addEventListener("visibilitychange", function () { // if (!document.hidden) { //處于當前頁面 // timer = setInterval(() => { // rotate(); // }, 1000); // console.log('active'); // } else { // clearInterval(timer); // console.log('hidden'); // } // }); }</script></html>新聞熱點
疑難解答
