顯示資料微調

This commit is contained in:
Yuan Chiu 2016-07-30 01:51:41 +08:00
parent 52b6981bfd
commit 4d03437480
3 changed files with 41 additions and 27 deletions

View File

@ -20,21 +20,22 @@
<div id="boss-hp-area">
<span class="progressbar" style="width: 100%">&nbsp;</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>
<p><span id="boss-hp-rate">100%</span></p>
<p><span id="boss-hp">1400000000</span> / <span id="boss-max-hp">1400000000</span> </p>
</div>
</div>
<div id="overkill-bonus-area" class="hide">
<span class="progressbar" style="width: 100%">&nbsp;</span>
<div id="overkill-bonus-num"><span id="overkill-bonus">1400000000</span></div>
<span class="progress-harf" style="width: 50%">&nbsp;</span>
<div id="overkill-bonus-num"><span id="overkill-bonus">0</span></div>
</div>
</div>
</div>
</div>
<footer>
<div id="scaedule-area">
<p id="scaedule-text">準決</p>
<div id="schedule-area">
<p id="schedule-text">瘋雷亞CXD比</p>
<p id="mode-text">BOSS Mode</p>
</div>

View File

@ -7,14 +7,14 @@ 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);
//}
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({
@ -32,13 +32,14 @@ function queryResult() {
var overKillMaxBonus = data.feed.entry[0].gsx$overkill總分數.$t;
var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t;
var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100;
var scheduleText = data.feed.entry[0].gsx$狀況一.$t;
// 測試用
// alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
// console.log(data);
// 顯示
display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
},
error: function(data){
@ -48,8 +49,9 @@ function queryResult() {
});
}
function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
// 介面對應
var mScheduleText = document.getElementById('schedule-text');
var mModeText = document.getElementById('mode-text');
var mBossScoreArea = document.getElementById('boss-hp-area');
var mBossHpRate = document.getElementById('boss-hp-rate');
@ -67,7 +69,7 @@ function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillB
mOverkillBonus.innerHTML = overKillBonus;
$('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%");
mScheduleText.innerHTML = scheduleText;
// OverKill
if(bossHp == 0) {
mModeText.innerHTML = 'OverKill Mode';

View File

@ -1,3 +1,5 @@
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
html, body, #page {
width: 100%;
height: 100%;
@ -7,6 +9,7 @@ html, body { padding: 0; }
body {
background-color: #2a2c41;
font-family: 'cwTeXHei', sans-serif;
}
/* ------------------------------------------------------------------------- */
@ -30,7 +33,7 @@ body {
position: absolute;
bottom: 0rem;
width: 100%;
overflow: hidden;
/* overflow: hidden;*/
}
#levinessa-logo img{
@ -52,8 +55,8 @@ body {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
margin-bottom: 0.5rem;
padding-bottom: 0;
padding-top: 0;
padding-bottom: 0.25em;
padding-top: 0.25em;
transition: all 3s ease;
}
@ -72,11 +75,14 @@ body {
#boss-hp-num {
position: relative;
}
#boss-hp-area .progressbar, #overkill-bonus-area .progressbar {
position: absolute;
left: 0px;
top: 0em;
}
#boss-hp-area .progressbar {
background: rgba(195, 21, 21, 1);
position: absolute;
line-height: 2em;
left: 0px;
line-height: 2.5em;
}
@ -86,11 +92,16 @@ body {
#overkill-bonus-num {
position: relative;
}
#overkill-bonus-area .progress-harf {
border-right: 3px solid rgba(95, 227, 22, 1);
position: absolute;
line-height: 2.2em;
left: 0;
top: -0.225em;
}
#overkill-bonus-area .progressbar {
background: rgba(95, 227, 22, 1);
position: absolute;
line-height: 1em;
left: 0px;
line-height: 1.5em;
}
#score-area {
@ -107,13 +118,13 @@ footer {
padding-top: 1.2em;
}
#scaedule-area {
#schedule-area {
position: absolute;
text-align: center;
width: 92%;
}
#scaedule-text {
#schedule-text {
font-size: 2.3rem;
}
#mode-text {