サマー○ォーズ時計 tomon9086 Follow 2017-04-21 00:11:33 License: MIT License Fork0 Fav0 View388 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 41 lines HTML 41 lines CSS 51 lines サマー○ォーズ時計 var Vector3 = gr.lib.math.Vector3; gr.registerComponent("Earth", { attribute: { rev: { default: false, converter: "Boolean" } }, $mount: function() { this.__bindAttributes(); this.r = 0; console.log(this.rev); }, $update: function() { this.node.setAttribute("rotation", "0, " + this.r + ", " + 30); this.r += 1 / 10; } }); gr.registerNode("earth", ["Earth"], { geometry: "sphere", scale: "5,5,5", position: "0,0,0", rotation: "0,0,0", texture: "http://jsrun.it/assets/o/Y/O/2/oYO2O.png" }, "mesh"); gr.registerComponent("Clockbg", { attribute: {}, $mount: function() { }, $update: function() { } }); gr.registerNode("clockbg", ["Clockbg"], { geometry: "quad", scale: "4,1,0", color: "rgba(200,200,200,1)", position: "0,0,10", rotation: "0,0,0", }, "mesh"); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Clock</title> <link href="https://fonts.googleapis.com/css?family=Heebo:700|Montserrat:700|Work+Sans:700|Yantramanav:700" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/grimoirejs-preset-basic@1.8.5/register/grimoire-preset-basic.min.js"></script> </head> <body> <div class="grimoire_container"> <script type="text/goml"> <goml height="fit"> <scene> <camera class="camera" position="0,0,20" /> <earth id="earth" /> <earth id="earth" color="rgba(111,111,111,1)" scale="-5,5,5" position="0,0,-0.01" rev="true" texture="http://jsrun.it/assets/u/7/7/O/u77Or.png" /> </scene> </goml> </script> </div> <div class="timezone"> <p id="timezone">JPN</p> </div> <div class="clock"> <p id="clock">00:00:00:00</p> </div> <script type="text/javascript"> document.getElementById("timezone").innerHTML = new Date().toString().match(/\(([A-Za-z\s].*)\)/)[1]; setInterval(function() { var date = new Date(); var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var msc = date.getMilliseconds() < 100 ? "0" + (date.getMilliseconds() / 10|0) : date.getMilliseconds() / 10|0; var display = hour + ":" + min + ":" + sec + ":" + msc; document.getElementById("clock").innerHTML = display; }, 10); </script> </body> </html> サマー○ォーズ時計 .grimoire_container { position: absolute; width: 100%; height: 100%; } .timezone { display: flex; justify-content: center; align-content: center; background-color: rgba(111,111,111,0.15); position: absolute; top: 38%; left: 50%; margin-top: -17px; margin-left: -50px; width: 100px; height: 35px; } .timezone p { margin: 0; font-weight: bold; font-size: 30px; /*font-family: 'Montserrat', sans-serif;*/ /*font-family: 'Work Sans', sans-serif;*/ /*font-family: 'Yantramanav', sans-serif;*/ font-family: 'Heebo', sans-serif; } .clock { background-color: rgba(111,111,111,0.15); position: absolute; top: 50%; left: 50%; margin-top: -35px; margin-left: -250px; width: 500px; height: 70px; display: flex; justify-content: center; align-content: center; } .clock p { margin: 0; font-weight: bold; font-size: 70px; letter-spacing: 5px; /*font-family: 'Montserrat', sans-serif;*/ /*font-family: 'Work Sans', sans-serif;*/ font-family: 'Yantramanav', sans-serif; /*font-family: 'Heebo', sans-serif;*/ } var Vector3 = gr.lib.math.Vector3; gr.registerComponent("Earth", { attribute: { rev: { default: false, converter: "Boolean" } }, $mount: function() { this.__bindAttributes(); this.r = 0; console.log(this.rev); }, $update: function() { this.node.setAttribute("rotation", "0, " + this.r + ", " + 30); this.r += 1 / 10; } }); gr.registerNode("earth", ["Earth"], { geometry: "sphere", scale: "5,5,5", position: "0,0,0", rotation: "0,0,0", texture: "http://jsrun.it/assets/o/Y/O/2/oYO2O.png" }, "mesh"); gr.registerComponent("Clockbg", { attribute: {}, $mount: function() { }, $update: function() { } }); gr.registerNode("clockbg", ["Clockbg"], { geometry: "quad", scale: "4,1,0", color: "rgba(200,200,200,1)", position: "0,0,10", rotation: "0,0,0", }, "mesh"); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Clock</title> <link href="https://fonts.googleapis.com/css?family=Heebo:700|Montserrat:700|Work+Sans:700|Yantramanav:700" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/grimoirejs-preset-basic@1.8.5/register/grimoire-preset-basic.min.js"></script> </head> <body> <div class="grimoire_container"> <script type="text/goml"> <goml height="fit"> <scene> <camera class="camera" position="0,0,20" /> <earth id="earth" /> <earth id="earth" color="rgba(111,111,111,1)" scale="-5,5,5" position="0,0,-0.01" rev="true" texture="http://jsrun.it/assets/u/7/7/O/u77Or.png" /> </scene> </goml> </script> </div> <div class="timezone"> <p id="timezone">JPN</p> </div> <div class="clock"> <p id="clock">00:00:00:00</p> </div> <script type="text/javascript"> document.getElementById("timezone").innerHTML = new Date().toString().match(/\(([A-Za-z\s].*)\)/)[1]; setInterval(function() { var date = new Date(); var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var msc = date.getMilliseconds() < 100 ? "0" + (date.getMilliseconds() / 10|0) : date.getMilliseconds() / 10|0; var display = hour + ":" + min + ":" + sec + ":" + msc; document.getElementById("clock").innerHTML = display; }, 10); </script> </body> </html> .grimoire_container { position: absolute; width: 100%; height: 100%; } .timezone { display: flex; justify-content: center; align-content: center; background-color: rgba(111,111,111,0.15); position: absolute; top: 38%; left: 50%; margin-top: -17px; margin-left: -50px; width: 100px; height: 35px; } .timezone p { margin: 0; font-weight: bold; font-size: 30px; /*font-family: 'Montserrat', sans-serif;*/ /*font-family: 'Work Sans', sans-serif;*/ /*font-family: 'Yantramanav', sans-serif;*/ font-family: 'Heebo', sans-serif; } .clock { background-color: rgba(111,111,111,0.15); position: absolute; top: 50%; left: 50%; margin-top: -35px; margin-left: -250px; width: 500px; height: 70px; display: flex; justify-content: center; align-content: center; } .clock p { margin: 0; font-weight: bold; font-size: 70px; letter-spacing: 5px; /*font-family: 'Montserrat', sans-serif;*/ /*font-family: 'Work Sans', sans-serif;*/ font-family: 'Yantramanav', sans-serif; /*font-family: 'Heebo', sans-serif;*/ } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Author tomon9086 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/WWmD/js"></script> 実行画面をスマートフォンで確認できます。お父さん QR - App Store Grimoire.js Discussion このコードについて質問してみる！ Tags Grimoire.js
