导航:首页 > 编程语言 > 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剩余时间相关的资料

热点内容
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
金牛合击版本 浏览：281

友情链接