//created by Rithea window.onload=()=>{ var body=document.body; body.style.background='#000'; function cube(w,h,unit){ var c =document.createElement('div'); c.style.position='absolute'; c.style.width=w+unit; c.style.height=h+unit; c.style.transformStyle='preserve-3d'; for(var i=0;i<6;i++){ var f=face(100,100,'%'); //f.style.border='solid 1px #000'; //f.style.boxShadow='0 0 1px #000' f.style.background=i===0? '#ddd':i===1? '#eee':i===2? '#777':i===3? '#888':i===4? '#fff':'#555'; f.style.transform=i===0? `translateZ(${w/2}${unit})`: i===1? `translateZ(-${w/2}${unit})`: i===2? `translateX(-${w/2}${unit}) rotateY(90deg)`: i===3? `translateX(${w/2}${unit}) rotateY(90deg)`: i===4? `translateY(-${w/2}${unit}) rotateX(90deg)`:`translateY(${w/2}${unit}) rotateX(90deg)`; c.appendChild(f); } return c; } function face(w,h,unit){ var f=document.createElement('div'); f.style.position='absolute'; f.style.transformStyle='preserve-3d'; f.style.width=w+unit; f.style.height=h+unit; return f; } var cb=cube(280,280,'px'); cb.style.transform='scale3d(.7,.7,.7) translate(-70%, -50%) rotateX(-30deg) rotateY(45deg)'; cb.style.top='50%'; cb.style.left='50%'; var subcb=cb.children; for(var i=0;i{ var d=new Date(); var h=d.getHours(); var m=d.getMinutes(); var s=d.getSeconds(); h=(h>9? '':'0')+h; m=(m>9? '':'0')+m; s=(s>9? '':'0')+s; var subc=document.getElementsByClassName('subcube'); var h0indexs=[181,182,183,190,191,192,199,200,201,208,209,210,217,218,219]; var h1indexs=[185,186,187,194,195,196,203,204,205,212,213,214,221,222,223]; var m0indexs=[106,105,104,115,114,113,124,123,122,133,132,131,142,141,140]; var m1indexs=[102,101,100,111,110,109,120,119,118,129,128,127,138,137,136]; var s0indexs=[19,20,21,28,29,30,37,38,39,46,47,48,55,56,57]; var s1indexs=[23,24,25,32,33,34,41,42,43,50,51,52,59,60,61]; var h0=[],h1=[],m0=[],m1=[],s0=[],s1=[]; h0indexs.forEach(v=>h0.push(subc[v])); h1indexs.forEach(v=>h1.push(subc[v])); m0indexs.forEach(v=>m0.push(subc[v])); m1indexs.forEach(v=>m1.push(subc[v])); s0indexs.forEach(v=>s0.push(subc[v])); s1indexs.forEach(v=>s1.push(subc[v])); var arr=[h0,h1,m0,m1,s0,s1]; var tArr=h+m+s; for(var v=0;v

3D Digital Clock in Cube