From 52b6981bfd6b4a3f38416f4b566280485ba43127 Mon Sep 17 00:00:00 2001 From: Yuan Chiu Date: Fri, 29 Jul 2016 19:44:17 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E5=88=86=E6=95=B8=E8=B3=87?= =?UTF-8?q?=E6=96=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 16 ++++++----- query.js | 83 ++++++++++++++++++++++++++++++++++++++++-------------- style.css | 43 +++++++++++++++++++++++++--- 3 files changed, 110 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index e9d58d4..e358083 100644 --- a/index.html +++ b/index.html @@ -17,14 +17,16 @@
-
-
-

0%

-

1400000000 / 0000000000

-
+
+   +
+

0%

+

0 / 1400000000

+
-
- 100 +
+   +
1400000000
diff --git a/query.js b/query.js index acdada9..bac8fd5 100644 --- a/query.js +++ b/query.js @@ -1,5 +1,20 @@ -var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1wr8qbkLGUkmrscj7CPeFml9FlfQCxBKBKzkc2v7lIK8/ohu83m6/public/values?alt=json"; -var updateFreSec = 60; +// 正式用 +//var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1wr8qbkLGUkmrscj7CPeFml9FlfQCxBKBKzkc2v7lIK8/ohu83m6/public/values?alt=json"; +// 測試用 +var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1bA_RNgWbS8_K_4UJ5wUkzZd98gNHz2zKj8E0NYxVWhY/ohu83m6/public/values?alt=json"; + +var updateFreSec = 10000; + +// set timeout +queryResult(); +//var tid = setTimeout(queryTimeoutAdp, updateFreSec); +//function queryTimeoutAdp() { +// queryResult(); +// tid = setTimeout(queryTimeoutAdp, updateFreSec); // repeat myself +//} +//function abortTimer() { // to be called when you want to stop the timer +// clearTimeout(tid); +//} function queryResult() { $.ajax({ @@ -10,9 +25,21 @@ function queryResult() { beforeSend: function() { }, success: function(data){ - // 隱藏處理中畫面 - alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t); - console.log(data); + // 資料擷取 + var bossMaxHp = data.feed.entry[0].gsx$boss總血量.$t; + var bossHp = data.feed.entry[0].gsx$boss剩餘血.$t; + var bossHpRate = (bossHp / bossMaxHp) * 100; + var overKillMaxBonus = data.feed.entry[0].gsx$overkill總分數.$t; + var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t; + var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100; + + // 測試用 +// alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t); +// console.log(data); + + // 顯示 + display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate); + }, error: function(data){ // 隱藏處理中畫面 @@ -21,23 +48,37 @@ function queryResult() { }); } -function display_data() { +function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) { + // 介面對應 + var mModeText = document.getElementById('mode-text'); + var mBossScoreArea = document.getElementById('boss-hp-area'); + var mBossHpRate = document.getElementById('boss-hp-rate'); + var mBossMaxHp = document.getElementById('boss-max-hp'); + var mBossHp = document.getElementById('boss-hp'); + var mOverkillScoreArea = document.getElementById('overkill-bonus-area'); + var mOverkillBonus = document.getElementById('overkill-bonus'); + + + // 介面顯示數值 + mBossHpRate.innerHTML = Math.ceil(bossHpRate * 100) / 100 + "%"; + mBossHp.innerHTML = bossHp; + mBossMaxHp.innerHTML = bossMaxHp; + $('#boss-hp-area .progressbar').width(bossHpRate+"%"); + mOverkillBonus.innerHTML = overKillBonus; + $('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%"); + + + // OverKill + if(bossHp == 0) { + mModeText.innerHTML = 'OverKill Mode'; + $(mOverkillScoreArea).removeClass("hide"); + } + else { + mModeText.innerHTML = 'BOSS Mode'; + $(mOverkillScoreArea).addClass("hide"); + } } function clean_data() { - // 顯示出來 - mSpan_nickname.innerHTML = res_nickname; - mSpan_tel.innerHTML = res_tel; - mSpan_email.innerHTML = res_email; - // mSpan_avatar.innerHTML = res_avatar; - mSpan_pay_method.innerHTML = res_pay_method; - mSpan_pay_status.innerHTML = res_pay_status; -} - -var form_input = document.getElementById('input-form'); - -form_input.onsubmit = function(e) { - e.preventDefault(); - queryResult(); - return 0; + } \ No newline at end of file diff --git a/style.css b/style.css index b05ddfa..51ea7bc 100644 --- a/style.css +++ b/style.css @@ -33,8 +33,9 @@ body { overflow: hidden; } -#levinessa-logo { +#levinessa-logo img{ color: white; + margin-bottom: -1rem; /* float: left;*/ } @@ -45,19 +46,52 @@ body { font-size: 2rem; } -#boss-hp, #overkill-bonus { +#boss-hp-area, #overkill-bonus-area { + position: relative; + width: 100%; padding-top: 0.2rem; padding-bottom: 0.2rem; margin-bottom: 0.5rem; + padding-bottom: 0; + padding-top: 0; + transition: all 3s ease; } -#boss-hp { +#overkill-bonus-area.hide { + height: 0px; + overflow: hidden; + margin-top: 0; + margin-bottom: 0; + font-size: 0; + transition: all 3s ease; +} + +#boss-hp-area { background: rgba(195, 21, 21, 0.35); } +#boss-hp-num { + position: relative; +} +#boss-hp-area .progressbar { + background: rgba(195, 21, 21, 1); + position: absolute; + line-height: 2em; + left: 0px; +} -#overkill-bonus { + +#overkill-bonus-area { background: rgba(95, 227, 22, 0.35); } +#overkill-bonus-num { + position: relative; +} +#overkill-bonus-area .progressbar { + background: rgba(95, 227, 22, 1); + position: absolute; + line-height: 1em; + left: 0px; +} #score-area { @@ -89,6 +123,7 @@ footer { #cxd-logo-area { float: right; + margin-top: -0.5rem; } #cxd-logo { border: 1px soild white;