導航:首頁 > 編程語言 > js倒計時自動隱藏

js倒計時自動隱藏

發布時間:2025-03-08 22:44:42

㈠ 求一個用js編寫的60秒倒計時,需要在頁面上顯示剩餘時間

var s = 60, t;
function times(){
s--;
document.form.time.value = s;
t = setTimeout('times', 1000);
if ( s <= 0 ){
s = 60;
clearTimeout(t);
}
}

times();

㈡ JS 倒計時問題,手機網頁後台運行時,js會暫停

如果我答得好請給我一點分

在html5中document新增了一個事件 visibilitychange,這個事件在頁面前台或後台切換時被觸發,你所說的問題就簡單了,它也有個對應的屬性visibilityState,用於檢測當前頁面的狀態值為hidden還是visible。

解法是,在hidden時記錄當前時間,在visible時用當前時間減去之前記錄的時間就為當前倒計時需要減去的時間,這也就不需要和後台溝通了,或者你直接在visible時刷新頁面也行,下面是小樣,你測試一下

varb=getTime();

functiongetTime()
{
returnDate.now();

}



document.addEventListener('webkitvisibilitychange',function()
{

if(document.webkitVisibilityState=='hidden')
{
b=getTime();

}else
{
document.body.appendChild(document.createTextNode('間隔:'+(getTime()-b)))

}




})
document.addEventListener('mozvisibilitychange',function()
{


if(document.mozVisibilityState=='hidden')
{
b=getTime();

}else
{
document.body.appendChild(document.createTextNode('間隔:'+(getTime()-b)))

}



})

㈢ JS實現簡單網頁倒計時器

要製作一個簡單的網頁倒計時器,可以使用javaScript實現。首先,我們編寫HTML代碼,創建一個用於顯示倒計時時間的div元素。

接下來,編寫JavaScript代碼。首先獲取當前時間,然後指定一個到期時間(例如2032年1月1日),計算當前時間和到期時間的時間差(以毫秒為單位)。接著判斷如果時間超了,停止倒計時。

已知總的秒數,通過取整數的方法計算天數、小時、分鍾和秒數。為了增加用戶體驗,將數字轉換成字元串,並在不足10的分秒中前補0。

定義一個空的字元串用於接收最後的倒計時字元串,並將其顯示在頁面上。最後,通過setInterval函數每1000毫秒更新一次倒計時。

總體的JavaScript代碼如下:

javascript
// 指定計時器到期時間,首先封裝函數
function antitime() {
var now = new Date(); // 獲取當前時間
var to = new Date(2032, 1, 1, 0, 0, 0); // 指定到期時間
var deltaTime = (to - now) / 1000; // 求時間差(秒)
// 判斷如果時間超了,停止倒計時
if (deltaTime <= 0) {
window.clearInterval(antitime);
}
// 計算天數、小時、分鍾和秒數
var d = Math.floor(deltaTime / 3600 / 24),
h = Math.floor(deltaTime / 3600 % 24),
m = Math.floor(deltaTime / 60 % 60),
s = Math.floor(deltaTime % 60);
// 補零
if (d < 10) d = '0' + d;
if (h < 10) h = '0' + h;
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
// 定義一個空的字元串
var timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時' + m + '分' + s + '秒';
document.getElementById('box').innerHTML = timer01;
}
// 開啟定時器,每1000毫秒更新一次
setInterval(antitime, 1000);

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持自由互聯。

㈣ 如何用javascript實現一小時倒計時

js代碼:fun.js
var timmerID = null;
function time() {
var time = document.getElementById("now");
var left = document.getElementById("left");
var t = time.value.split(":");
var hour = parseInt(t[0]);
var min = parseInt(t[1]);
min=min+1;
if(min==60){
hour=hour+1;
min=0;
if(hour==24){
hour=0;
}
}
time.value=hour+":"+min;
left.value = left.value-1;
if(left.value==0){
mystop();
alert("時間已到!");
}

}
function mystart() {
var left = document.getElementById("left");
left.value="40";
timmerID = window.setInterval("time()", 1000*60);
}
function mystop() {
window.clearInterval(timmerID);
}

html頁面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>time.html</title>

<script type="text/javascript" src="fun.js"></script>
</head>

<body>
時間起點:<input type="text" name="now" id="now" value="0:0"/><input type="button" value="開始" onclick="mystart();"><br>
剩餘時間:<input type="text" name="left" id="left" value="40" disabled="disabled"/>分鍾<br>
</body>
</html>

補充:這個javascript放在一個文件叫fun.js,在html頁面中要引用此文件,如:<script type="text/javascript" src="fun.js"></script> ,注意不要把路徑弄錯了,src後面的路徑按照實際的來,如果兩個文件在一個目錄下,就是如上這樣引用,當然也可以直接把全部的js內容放在html文件的頭部,如:<script type="text/javascript">
<!--javascript代碼-->
</script>

㈤ js設置DIV顯示時間並動態顯示時間倒計時多少秒,倒計時完了之後該層自動隱藏。

給你個思路:
1初始化時間,例如1小時5分鍾30秒(也可以讓用戶手動設置,這里略)
保存在全局變數中
var hour,minute,second;

2設置定時每隔1秒執行function xxx
setInterval(function xxx(){...},1000);

3編寫function用於每隔1秒更新時間,裡面判斷若倒計時為0時,隱藏div
function xxx(){
if(--second==0){
if(--minute==0){
if(--hour==0){
//隱藏div 設置style.display='none'
}
show(hour,minute,second);
second=60;
minute=60;
}
show(hour,minute,second);
second=60;
}
show(hour,minute,second);
}

function show(hour,minute,second){
var str_hour = hour<10?"0"+hour:""+hour;
var str_minute = minute<10?"0"+minute:""+minute;
var str_second = second<10?"0"+second:""+second;
//將這三個時分秒顯示到div中指定位置
}

閱讀全文

與js倒計時自動隱藏相關的資料

熱點內容
陌陌聊天群怎麼升級 瀏覽:189
如何管理秘密文件 瀏覽:200
linuxfork線程 瀏覽:548
javabean原理和機制 瀏覽:546
榮威rx5導航怎麼升級 瀏覽:116
同花順中各項數據都是什麼意思 瀏覽:532
lumion怎麼輸出視頻教程 瀏覽:736
GML文件格式轉換 瀏覽:120
數據線抗拉環怎麼用 瀏覽:300
為什麼蘋果6手機沒有網路設置密碼 瀏覽:187
ae文字教程 瀏覽:838
如何拉文件進去cad直接打開 瀏覽:400
飛傲x5二代固件升級 瀏覽:390
dll反編譯工具 瀏覽:400
初中考試卷app 瀏覽:22
微信登陸請檢查網路連接網路連接網路 瀏覽:294
win7怎麼讓隱藏的文件夾顯示出來 瀏覽:264
2m的cad文件打開修改特別卡 瀏覽:89
編程語言學習班哪裡好 瀏覽:990
5s文件管理 瀏覽:171

友情鏈接