導航:首頁 > 編程語言 > js原型倒計時

js原型倒計時

發布時間:2024-05-26 16:08:39

js倒計時代碼

<html>
<body>
離半夜12點還有<spanid="hour"></span>小時版<spanid="min"></span>分
</body>
<script>
functioncountdown(){
vartoday=newDate();
權varh=today.getHours();
varm=today.getMinutes();
h=23-h;
m=59-m;
m=checkTime(m)
document.getElementById("hour").innerHTML=h;
document.getElementById("min").innerHTML=m;
}
functioncheckTime(i){
if(i<10)i="0"+i;
returni;
}
setInterval("countdown()",50);
</script>
<html>

⑵ 製作倒計時有開始和暫停按鈕用js完整代碼實現

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<inputplaceholder="請輸入時間"id="inp">
<buttononclick="go()">start</button><buttononclick="stop()">stop</button><buttonid="jixu"onclick="jixu()"style="display:none;">continue</button>
<divid="result"></div>
<script>
vartime,
div=document.getElementById('result'),
stopState=false;
functiongo(){
time=document.getElementById('inp').value;
timeout();
}

functiontimeout(){
if(time==''){
alert('請輸入時間')
return;
}
setTimeout(function(){
time--;
div.innerText=time;
if(time!==0&&!stopState){
timeout();
}
},1000);
}

functionjixu(){
time=Number(document.getElementById('result').innerText);
document.getElementById('jixu').style.display='none';
stopState=false;
timeout();
}
functionstop(){
document.getElementById('jixu').style.display='';
stopState=true;
}
</script>
</body>
</html>

⑶ 如何用js顯示3分鍾倒計時並輸出指定數字

functiontimeshow(){
vartime=3;//s
varstart=window.setInterval(function(){
time=time-1;
console.log(time);
document.getElementById('show').innerHTML='計時開始,'+time+'秒後跳轉!';
if(time==0){
window.clearInterval(start);
document.getElementById('show').innerHTML='計時結束';
}
},1000);
}

⑷ 求一個倒計時js代碼,非常簡單的

邏輯如下:

1、先判斷兩個時間的時間差,當然如果得到的時間是13位時間戳的話你需要轉化一下

2、判斷時間夠一天顯示天數,夠一小時顯示小時數

相關代碼:

//獲取時間,時間戳轉換,不是則不轉
varmydate1=newDate(parseInt(time1.replace("/Date(","").replace(")/","")));
varmydate2=newDate(parseInt(time2.replace("/Date(","").replace(")/","")));
//獲取剩餘秒數
vartimerc=dateDiff(mydate,'2015/05/1910:00:00')/1000;
functiondateDiff(date1,date2){
vardt1=newDate(Date.parse(date1));
vardt2=newDate(Date.parse(date2));
try{
returnMath.round((dt2.getTime()-dt1.getTime()));
}
catch(e){
returne.message;
}
}
//循環調用倒計時
functionadd(){//加時函數
--timerc;//時間變數自減1
varday=parseInt(timerc/86400);
varhour=parseInt((timerc%86400)/3600);
varmin=parseInt((timerc%3600)/60);
varsec=Number(parseInt(timerc%60/10)).toString()+Number(parseInt((timerc%10))).toString();
if(day>0){//如果不到5分鍾
$("#day").html(day+'天');//寫入天數
$("#hour").html(hour+'時');//寫入小時數
$("#min").html(min+'分');//寫入分鍾數
$("#sec").html(sec+'秒');//寫入秒數(兩位)
}
elseif(hour>0){
$("#hour").html(hour+'時');//寫入小時數
$("#min").html(min+'分');//寫入分鍾數
$("#sec").html(sec+'秒');//寫入秒數(兩位)
}

elseif(min>0){
$("#min").html(min+'分');//寫入分鍾數
$("#sec").html(sec+'秒');//寫入秒數(兩位)
}
elseif(sec!='00'){
$("#sec").html(sec+'秒');//寫入秒數(兩位)
}
else{
tiao(activity);returntrue;//時間到0調用函數
}
setTimeout("add()",1000);//設置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 倒計時實現代碼(時、分,秒)

JS實現倒計時(時、分,秒)
var
interval
=
1000;
function
ShowCountDown(year,month,day,divname)
{
var
now
=
new
Date();
var
endDate
=
new
Date(year,
month-1,
day);
var
leftTime=endDate.getTime()-now.getTime();
var
leftsecond
=
parseInt(leftTime/1000);
//var
day1=parseInt(leftsecond/(24*60*60*6));
var
day1=Math.floor(leftsecond/(60*60*24));
var
hour=Math.floor((leftsecond-day1*24*60*60)/3600);
var
minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
var
second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
var
cc
=
document.getElementById(divname);
cc.innerHTML
=
"腳本之家提示距離"+year+"年"+month+"月"+day+"日還有:"+day1+"天"+hour+"小時"+minute+"分"+second+"秒";
}
window.setInterval(function(){ShowCountDown(2010,4,20,'divdown1');},
interval);
[Ctrl+A
全選
注:如需引入外部Js需刷新才能執行]

⑺ JS 5秒倒計時的代碼怎麼寫時間要實時顯示在屏幕上的。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>js實現倒計時60秒的簡單代碼(推薦)</title>

<scripttype="text/javascript"src="js/jquery.js"></script>

</head>

<body>

<inputtype="button"id="btn"value="免費獲取驗證碼"onclick="settime(this)"/>

<scripttype="text/javascript">

varcountdown=60;

functionsettime(val){

if(countdown==0){

val.removeAttribute("disabled");

val.value="免費獲取驗證碼";

countdown=5;

}else{

val.setAttribute("disabled",true);

val.value="重新發送("+countdown+")";

countdown--;

setTimeout(function(){

settime(val)

},1000)

}

}

</script>

</body>

</html>

⑻ JS實現 倒計時程序,需求如下:當時間小於10分鍾時,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<input type="button" id="btn" value="免費獲取驗證碼" />
<script type="text/javascript">
var wait=5; //第一次時間設置時間(秒為單位)
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費獲取驗證碼";
wait = 5; //重新的時間設置時間(秒為單位)
} else {
o.setAttribute("disabled", true);
o.value="重新發送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},1000) ////1000就是1秒鍾提醒一次
if(wait<2){ //少於2秒鍾時,每次提醒一次提醒一次
alert('1'); //alert 提示框提醒
}
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>

注:alert 提示框提醒,不按確定時間會停止的!

⑼ js瀹炵幇璺濈2023騫5鏈1鏃ヨ繕鏈夊氬皯澶,灝忔椂,鍒,縐掔殑瀹炴椂鍊掕℃椂鏁堟灉錛

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鍊掕℃椂</title>
</head>
<body>
<div id="countdown"></div>
<script>
// 瀹氫箟鍊掕℃椂鎴姝㈡椂闂
const endTime = new Date('2023-05-01 00:00:00').getTime();
// 姣忕掓洿鏂頒竴嬈″掕℃椂
const countdown = setInterval(function() {
// 鑾峰彇褰撳墠鏃墮棿鎴
const nowTime = new Date().getTime();
// 璁$畻鏃墮棿宸錛堟縐掞級
const timeDiff = endTime - nowTime;
// 璁$畻鍓╀綑澶╂暟銆佸皬鏃舵暟銆佸垎閽熸暟銆佺掓暟
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
// 灝嗗掕℃椂鏄劇ず鍦ㄩ〉闈涓
document.getElementById('countdown').innerHTML = '璺濈2023騫5鏈1鏃ヨ繕鏈夛細' + days + '澶 ' + hours + '灝忔椂 ' + minutes + '鍒 ' + seconds + '縐';
// 緇撴潫鍊掕℃椂
if (timeDiff < 0) {
clearInterval(countdown);
document.getElementById('countdown').innerHTML = '鍊掕℃椂宸茬粨鏉燂紒';
}
}, 1000);
</script>
</body>
</html>

閱讀全文

與js原型倒計時相關的資料

熱點內容
數據區域下移一行該怎麼辦 瀏覽:679
華為賬號用qq注冊賬號 瀏覽:327
台達plc編程完成怎麼試運行 瀏覽:412
華為b137升級包下載 瀏覽:992
美團發布數據報告去哪裡看 瀏覽:146
js的隱藏div顯示 瀏覽:637
ps教程圖片轉換為粉筆字 瀏覽:816
下載網易雲音樂最新版本 瀏覽:165
原神的數據文件指什麼 瀏覽:725
解壓找不到合適文件夾什麼意思 瀏覽:461
iphone經營類 瀏覽:138
哪裡可以看到老齡化數據 瀏覽:644
小型門戶網站有哪些 瀏覽:563
簡書網站打不開怎麼辦 瀏覽:467
關於新能源汽車有哪些外文資料庫 瀏覽:271
word公式編輯器怎麼打開 瀏覽:419
為什麼電腦上的文件傳不了去 瀏覽:919
反詐騙app注冊日期怎麼查 瀏覽:159
周年店慶微信文章素材 瀏覽:154
網路語你是壞人怎麼說 瀏覽:788

友情鏈接