問題討論區


【JavaScript 語法】問題討論區


【問題】 JavaScript(jQuery) 秀出每個商品的時間倒數畫面



JavaScript(jQuery) 秀出每個商品的時間倒數畫面
會員一級
註冊日期:
2013/6/10 20:28
留言: 1
我想從MySQL資料庫中抓取每個商品的 下架時間 讓JavaScript 去執行 並把每個商品的倒數畫面都秀出來


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.3");
</script>
<script src="http://jquery.offput.ca/js/jquery.timers.js" type="text/javascript"></script>
</head>

<body>
<?
include("server.php");        //這是連資料庫的檔案
$sql = "select * from commodity";
$query = mysql_query($sql);
while($row = mysql_fetch_array($query)) //用迴圈顯示每個商品的名稱以及下架時間
{
?>
<script type="text/javascript">
var startDate = new Date();
var endDate = new Date('<? echo $row['downtime']; ?>'); //代入每個商品的下架時間
var spantime = (endDate - startDate)/1000;

$(document).ready(function () {
$(this).everyTime('1s', function(i) {
spantime --;
var d = Math.floor(spantime / (24 * 3600));
var h = Math.floor((spantime % (24*3600))/3600);
var m = Math.floor((spantime % 3600)/(60));
var s = Math.floor(spantime%60);

if(spantime>0){
$(".day").text(d+"天");
$(".hour").text(h+"時");
$(".min").text(m+"分");
$(".sec").text(s+"秒");
}else{ // 避免倒數變成負的
$(".day").text(0);
$(".hour").text(0);
$(".min").text(0);
$(".sec").text(0);
}
});
});
</script>
<p><? echo $row['c_name']; ?></p> //用迴圈跑出所有商品名稱
<div class="day"></div>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<?
} //while 迴圈結束
?>
</body>
</html>

javascript 的執行 是在網頁開啟後 就會每秒更新一次,並把值寫入所要加入的<div>內
我大概知道是因為PHP跑完後才會執行JavaScript 所以 var endDate 只會跑出最後一個商品的下架日期並套用到每個用while 迴圈新增的<div>中

但我還是不太會做修正

我要如何解決這個問題呢?

麻煩您了 謝謝

2013/6/10 20:42
 


回覆: JavaScript(jQuery) 秀出每個商品的時間倒數畫面
會員一級
註冊日期:
2013/7/18 10:47
留言: 1
還有一個BUG,商品有多少個一次就扣商品數的秒數。

2013/7/18 11:41
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 1 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS