顯示分數資料
This commit is contained in:
parent
006a0351d2
commit
52b6981bfd
16
index.html
16
index.html
@ -17,14 +17,16 @@
|
||||
</div>
|
||||
|
||||
<div id="score-area">
|
||||
<div id="boss-hp">
|
||||
<div id="boss-hp-num">
|
||||
<p>0%</p>
|
||||
<p>1400000000 / 0000000000 </p>
|
||||
</div>
|
||||
<div id="boss-hp-area">
|
||||
<span class="progressbar" style="width: 100%"> </span>
|
||||
<div id="boss-hp-num">
|
||||
<p><span id="boss-hp-rate">0%</span></p>
|
||||
<p><span id="boss-hp">0</span> / <span id="boss-max-hp">1400000000</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="overkill-bonus">
|
||||
100
|
||||
<div id="overkill-bonus-area" class="hide">
|
||||
<span class="progressbar" style="width: 100%"> </span>
|
||||
<div id="overkill-bonus-num"><span id="overkill-bonus">1400000000</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
81
query.js
81
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;
|
||||
}
|
||||
43
style.css
43
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user