導航:首頁 > 編程語言 > js剩餘時間

js剩餘時間

 發布時間：2025-01-03 11:15:07

❶ js顯示剩下的時間

<html>
<head>
<title></title>
<scripttype="text/javascript"language="javascript">
functiongetTime(){//js函數，定期執行的函數主體
vardateTime=newDate();//新建系統時間的對象
varhour=formatTime(dateTime.getHours());//獲取小時並格式化，格式化函數formatTime()，下同
varminute=formatTime(dateTime.getMinutes());//獲取分
varsecond=formatTime(dateTime.getSeconds());//獲取秒
//varmillisecond=dateTime.getMilliseconds();//獲取毫秒
varcode="當前時間是："+hour+":"+minute+":"+second;//+""+millisecond;//第一個div的內容(數字時鍾)
varcodeChinese="當前時間是："+formatChinese(hour)+"時"+formatChinese(minute)+"分"+formatChinese(second)+"秒";//第二個div的內容(中文時鍾)
document.getElementById("divTime").innerHTML=code;//第一個div內容填充
document.getElementById("divTimeChinese").innerHTML=codeChinese;//第二個div內容填充
document.getElementById("monDigitalClock").innerHTML=makeMonCode(hour.toString()+":"+minute.toString()+":"+second.toString())+blockEmpty();//+makeMonCode(millisecond.toString());
updateLatestTime();//更新剩餘時間
}
functionformatTime(num){//格式化數字，小於10時在數字前添加0
if(num<10){
return"0"+num;
}
else{
returnnum;
}
}
functionformatChinese(num){//中文格式處理
varstr=String(num);
if(str.length==1){//一位數的情況，直接返回中文
returnformatSingleNumber(str);
}
else{//兩位數的情況
varmid="十";
vartop=str.substr(0,1);//第一位
varbtn=str.substr(1,2);//第二位
return(formatSingleNumber(top)+mid+formatSingleNumber(btn)).replace("零十","零").replace("十零","十").replace("零零","零").replace("一十","十");//使用formatSingleNumber函數轉換成中文並將不符合中文數字表示方法的替換一下
}

}

functionformatSingleNumber(num){//單個數字轉化成中文
returnnum.replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六").replace("7","七").replace("8","八").replace("9","九").replace("0","零");
}
setInterval("getTime();",1000);//定時刷新，每毫秒刷新一次//模擬時鍾代碼
functionbuidlPointArea(num){//將數字對應的點陣拼接成圖案
varcode="<divclass='singleNumber'>";
for(vari=1;i<6;i++){
for(varj=1;j<5;j++){
code+=createSinglePoint(i+"_"+j,num);
}
}
code+="</div>";
returncode;
}


functioncreateSinglePoint(id,num){//數字對應的黑點
vararray0=newArray("1_1","1_2","1_3","2_1","2_3","3_1","3_3","4_1","4_3","5_1","5_2","5_3");//數字0的點陣，下同
vararray1=newArray("1_3","2_3","3_3","4_3","5_3");
vararray2=newArray("1_1","1_2","1_3","2_3","3_1","3_2","3_3","4_1","5_1","5_2","5_3");
vararray3=newArray("1_1","1_2","1_3","2_3","3_1","3_2","3_3","4_3","5_1","5_2","5_3");
vararray4=newArray("1_1","1_3","2_1","2_3","3_1","3_2","3_3","4_3","5_3");
vararray5=newArray("1_1","1_2","1_3","2_1","3_1","3_2","3_3","4_3","5_1","5_2","5_3");
vararray6=newArray("1_1","1_2","1_3","2_1","3_1","3_2","3_3","4_1","4_3","5_1","5_2","5_3");
vararray7=newArray("1_1","1_2","1_3","2_3","3_3","4_3","5_3");
vararray8=newArray("1_1","1_2","1_3","2_1","2_3","3_1","3_2","3_3","4_1","4_3","5_1","5_2","5_3");
vararray9=newArray("1_1","1_2","1_3","2_1","2_3","3_1","3_2","3_3","4_3","5_1","5_2","5_3");
varnumArr=newArray();
numArr[0]=array0;
numArr[1]=array1;
numArr[2]=array2;
numArr[3]=array3;
numArr[4]=array4;
numArr[5]=array5;
numArr[6]=array6;
numArr[7]=array7;
numArr[8]=array8;
numArr[9]=array9;
varcls="whitePoint";
for(vari=0;i<numArr[num].length;i++){
if(id==numArr[num][i]){
cls="blackPoint";
}
}
return"<divid='"+id+"'class='"+cls+"'></div>";
}

functionblockEmpty(){//空格代碼
return"<divclass='singleNumber'></div>";
}


functionblockM(){//冒號的代碼
varcode="";
code+="<divclass='singleNumber'><divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='blackPoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='blackPoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div>";
code+="<divclass='whitePoint'></div></div>";
returncode;
}


functionmakeMonCode(totalCode){//生成模擬的數字時鍾代碼
varfinalCode="";
for(vari=0;i<totalCode.length;i++){//每個字元分別轉換
if(isNaN(totalCode[i])){//非數字字元，例子中只有冒號
if(totalCode[i]==":"){
finalCode+=blockM();//冒號的代碼，用blockM()函數生成
}
}
else{
finalCode+=buidlPointArea(totalCode[i]);//數字的代碼，用buildPointArea()函數生成
}
}
returnfinalCode;
}
functionupdateLatestTime(){//更新剩餘時間
varsetHour=document.getElementById("sltHour").value;//獲取選擇的小時值
varsetMin=document.getElementById("sltMin").value;//獲取選擇的分值
varsetSecond=document.getElementById("sltSecond").value;//獲取選擇的秒值
vartime=newDate();//獲取系統時間
varnowHour=time.getHours();//當前時間小時值
varnowMin=time.getMinutes();//當前時間分值
varnowSecond=time.getSeconds();//當前時間秒值
varviewHour=setHour-nowHour;//剩餘小時
varviewMin=setMin-nowMin;//剩餘分鍾
varviewSecond=setSecond-nowSecond;//剩餘秒
if(viewSecond<0){//剩餘秒小於0時，借位
viewSecond+=60;
viewMin-=1;
}
if(viewMin<0){//剩餘分小於0時，借位
viewMin+=60;
viewHour-=1;
}
if(viewHour<0){//剩餘小時小於0時，借位
viewHour+=24;
}

document.getElementById("divLatestTime").innerHTML="剩餘時間為："+viewHour+"時"+viewMin+"分"+viewSecond+"秒";//填充
if(viewHour==0&&viewMin==0&&viewSecond==0){//到點提示
alert("到點了！");
}
}
functioncreateSelect(){//生成選擇框代碼
varcode="";
code+="請選擇鬧鍾時間：<selectid='sltHour'onchange='updateLatestTime()'>";
for(vari=1;i<25;i++){
code+="<optionvalue='"+i+"'>"+i+"</option>";
}
code+="</select>時";
code+="<selectid='sltMin'onchange='updateLatestTime()'>";
for(vark=1;k<61;k++){
code+="<optionvalue='"+k+"'>"+k+"</option>";
}
code+="</select>分";
code+="<selectid='sltSecond'onchange='updateLatestTime()'>";
for(varj=1;j<61;j++){
code+="<optionvalue='"+j+"'>"+j+"</option>";
}
code+="</select>秒";
document.getElementById("divAlert").innerHTML=code;
}

</script>
<styletype="text/css">
body{
background-color:#FFFFFF;
}

.clsTime{
width:600px;
height:50px;
font-size:30px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
}

.whitePoint{
width:10px;
height:10px;
background-color:#FFFFFF;
margin:0px;
padding:0px;
float:left;
}

.blackPoint{
width:10px;
height:10px;
background-color:#000000;
margin:0px;
padding:0px;
float:left;
}

.clsMonDigitalClock{
margin-left:auto;
margin-right:auto;
width:480px;
height:50px;
background-color:#FFFFFF;
}

.singleNumber{
width:40px;
height:50px;
float:left;
font-size:8px;
}

.clsAlert{
width:400px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}

.clsLatestTime{
width:400px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<bodyonload="createSelect();">
<divid="divTime"class="clsTime">loading....</div>
<divid="divTimeChinese"class="clsTime">loading....</div>
<divid="monDigitalClock"class="clsMonDigitalClock"></div>
<divid="divAlert"class="clsAlert"></div>
<divid="divLatestTime"class="clsLatestTime"></div>

</body>
</html>

之前做著玩的，有你說到的功能，有興趣看看。代碼存為html即可。

❷ 求一個用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計算時間

這兩句有問題，Date對象不能這樣相減吧？
var diffTime = (nowTime - checkDate)/thesecond;
diffTime=0-diffTime;

應該這樣
var diffTime =nowTime.getTime() - checkDate.getTime();

得到差值後，判斷正負這些就不多說了，說一下怎麼獲得這個差值是多少天、小時、分鍾和秒。

註：下面的dTime是 new Date(diffTime);

天數可以用你上面的方法計算得到，不過你那方法沒有取整。取整的話，就是這樣：
var dDays = parseInt(dTime.getTime() / 3600 * 24 * 1000);

然後就剩下時分秒了，我們注意到，new Date(0)是"Thu Jan 01 1970 08:00:00 GMT+0800"，所以再減去八個鍾就是 1970年1月1日 零時了。所以將上面的diffTime減去八個鍾的毫秒數再放到new Date()裡面，再獲取到的時分秒就是剩餘的時間了：

var dHours = dTime.getHours();
var dMinutes =dTime.getMinutes();
var dSeconds = dTime.getSeconds();

你可以看下我的另一個回答
http://..com/question/135976703.html

❹ js編程編一個程序，求當前時間距離元旦的剩餘時間，在input文本框中顯示出來。

<!DOCTYPEhtml>
<html>
<head>
	<title>cc-vue.js</title>
	<styletype="text/css">
	</style>
	<script>
		//生成2019年元旦日期函數
		function_yd(){
			varyd=newDate();
			//2019-01-01
			//Year
			yd.setYear(yd.getFullYear()+1);
			//Month
			yd.setMonth(0);
			//Day
			yd.setDate(1);
			//Time
			yd.setHours(0,0,0,0);
			returnyd;
		}
		
		/**
		*計算當前時間距元旦時間間隔
		*/
		functionyd_cal(){
			vaript=document.getElementById('ipt');
			varnow=newDate();
			varts=_yd().getTime()-now.getTime();
			var_d=ts/(24*60*60*1000);
			//console.log('天:'+parseInt(_d));
			var_h=(_d-parseInt(_d))*24;
			//console.log('小時：'+parseInt(_h));
			var_m=(_h-parseInt(_h))*60;
			//console.log("分鍾："+parseInt(_m));;
			var_s=(_m-parseInt(_m))*60;
			//console.log("秒："+parseInt(_s));;

			ipt.value=""+parseInt(_d)+"天"+parseInt(_h)+":"+parseInt(_m)+":"+parseInt(_s)+""
		}
	</script>
</head>
<bodystyle="margin:20px;">
	<divstyle="width:100%;height:40px;background-color:#fff">
		<labelfor="ipt"style="font-size:.8em">當前距元旦時間間隔：</label>
		<inputtype="text"value=""placeholder="元旦時間間隔"disabledid="ipt">
		<inputtype="button"value="計算"onclick="yd_cal()"/>
	</div>
</body>
</html>

❺ 求做一個JAVASCRIPT倒計時器，能計算並顯示到某一天的剩餘時間。。。

<div class="timercon">
距離活動結束還有
<div id="timer">計算中。。。</div>
</div>
<script type="text/javascript" src="timer.js"></script><!--src 中改成你實際的地址-->
從這行以下 保存為 timer.js 放在你要放的位置，不包括這行說明 然後更新上面的 src
function TimeTo(dd){
var t = new Date(dd),//取得指定時間的總毫秒數
n = new Date().getTime(),//取得當前毫秒數
c = t - n;//得到時間差
if(c<=0){//如果差小於等於0 也就是過期或者正好過期，則推出程序
document.getElementById('timer').innerHTML ='活動已經結束';
clearInterval(window['ttt']);//清除計時器
return;//結束執行
}
var ds = 60*60*24*1000,//一天共多少毫秒
d = parseInt(c/ds),//總毫秒除以一天的毫秒 得到相差的天數
h = parseInt((c-d*ds)/(3600*1000)),//然後取完天數之後的餘下的毫秒數再除以每小時的毫秒數得到小時
m = parseInt((c - d*ds - h*3600*1000)/(60*1000)),//減去天數和小時數的毫秒數剩下的毫秒，再除以每分鍾的毫秒數，得到分鍾數
s = parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000);//得到最後剩下的毫秒數除以1000 就是秒數，再剩下的毫秒自動忽略即可
document.getElementById('timer').innerHTML = '<p style="margin-top:5px;"> <b>'+d+'</b> 天 <b>'+h+'</b> 小時 <b>'+m+'</b> 分</p><p class="ss"><b>'+s+'</b> 秒</p>';
//最後這句講定義好的顯示 更新到 ID為 timer的 div中
}
(function(){
window['ttt']=setInterval(function(){
TimeTo('2011/1/1 00:00:00');//定義倒計時的結束時間，注意格式
},1000);//定義計時器，每隔1000毫秒 也就是1秒 計算並更新 div的顯示
})();
從這行以上保存為 timer.js 不包括這行說明

閱讀全文

與js剩餘時間相關的資料

熱點內容
在電腦上如何找到資料庫 瀏覽：124
stc89c52控制舵機程序 瀏覽：128
購物app里如何查看籃球鞋碼數 瀏覽：443
java設計網站 瀏覽：356
應用程序的位置 瀏覽：587
蘋果app能面對面傳嗎 瀏覽：857
印章篆刻工具 瀏覽：390
我的世界超頻升級如何更改數據 瀏覽：973
統贏編程為什麼編不了 瀏覽：677
cad自動保存的文件有一把小鎖 瀏覽：353
怎麼把圖片打開成壓縮文件 瀏覽：148
42e5ers創維怎麼升級 瀏覽：847
javasettoarray 瀏覽：390
每天無症狀感染者數據哪裡看 瀏覽：183
excel如何設置某列數據不重復 瀏覽：313
微信消息轟炸機電腦版 瀏覽：287
下列選項屬於資料庫軟體 瀏覽：49
其他系統文件在哪裡 瀏覽：321
大數據可以從哪些方面助力奧運會 瀏覽：75
尤里復仇區域網網路彈回來 瀏覽：595

友情鏈接