`

JS实现获取当前时间和倒计时功能

    博客分类:
  • JS
阅读更多

虽说这两个小功能,网上一抓一大把吧,但是呢:

1、自己从来没有好好写过类似功能,也没琢磨过;

2、网上虽有但每次都要找啊;

不如自己写个现成的,有需要了就来这里找,有问题了就来这里改进,顺道琢磨琢磨。废话不多说,上代码。

window.onload=function(){
	//showTime();//显示当前时间
	//countDownForDay();//天倒计时
	coutDownForDate();//天时分秒倒计时
}
//该方法用来显示时间
function showTime(){
	var now = new Date();//获取当前时间

	var year = now.getFullYear();//年
	var month = now.getMonth()+1;//月
	var day = now.getDate();//日
	
	//星期
	var week = now.getDay();
	var weekend = new Array();
	weekend[0]="日";
	weekend[1]="一";
	weekend[2]="二";
	weekend[3]="三";
	weekend[4]="四";
	weekend[5]="五";
	weekend[6]="六";

	var hour = now.getHours();//时
	var minute = now.getMinutes();//分
	var second = now.getSeconds();//秒

	//为分和秒补零
	minute = checkTime(minute);
	second = checkTime(second);

	document.getElementById("show").innerHTML="当前时间:"+year+"年"+month+"月"+day+"日"+" 星期"+weekend[week]+" "+hour+":"+minute+":"+second;
	setTimeout(showTime,500);//500毫秒执行一次
}

/**
*该方法用来解决“分秒为1位数以下时自动添加零变成2位数”的问题
*@param value:需要补零的值
*/
function checkTime(value){
	value = parseInt(value,10);
	if(value<10){
		value = "0"+value;
	}
	return value;
}

//天倒计时
function countDownForDay(){
	var startTime = new Date().getTime();
	var endTime = new Date("2016,12,31").getTime();
	var diff = endTime-startTime;//相差毫秒数
	//转换成天数
	diff = Math.ceil(diff/(24*60*60*1000));//1天=24小时 1小时=60分 1分=60秒 1秒=1000毫秒
	document.getElementById("show2").innerHTML="距离过年还有:"+diff+"天";
}
//日期倒计时
function coutDownForDate(){
	var startTime = new Date().getTime();//开始时间
	var endTime = new Date("2016/12/31,23:59:59");//结束时间
	var diffTime = parseInt((endTime-startTime)/1000,10);//得到两个时间差的秒数

	//根据秒数来计算天、时、分、秒
	var day = parseInt(diffTime/(24*60*60),10);//1天=24小时 1小时=60分 1分=60秒

	//1小时=60分 1分=60秒,diffTime/(60*60)=所有的秒数用小时来表示有多少个小时
	//再%24,整除部分(商)作为整天算到天的计时了,余数部分也就是小时的计时了
	//再取个整,被抹去的小时数会自动算到分里面,分中被抹去的会计算到秒中
	var hour = parseInt((diffTime/(60*60))%24,10);//小时
	var minute = parseInt((diffTime/60)%60,10);//分钟:先计算成总共有多少分钟,再取分钟的余数
	var second = diffTime%60;//秒:本来就是秒,直接获取最后剩下的秒就好了
	
	var timeOut=null;
	if(diffTime>0){//有差值才显示,否则不显示
		document.getElementById("show3").innerHTML="距离过年还有:"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
		//自动刷新
		timeOut = setTimeout(coutDownForDate,500);
	}else{
		document.getElementById("show3").innerHTML="去年已结束,新年已来临";
		clearTimeout(timeOut);
	}
}

 

分享到:
评论

相关推荐

    js获取服务端时间并倒计时

    在JavaScript(JS)编程中,实现获取服务器时间并进行倒计时是一项常见的需求,尤其在构建Web应用时。以下是对这个主题的详细说明: 首先,理解服务器时间和客户端时间的概念至关重要。服务器时间是服务器上计算机...

    Javascript实现商品秒杀倒计时(时间与服务器时间同步)

    由于秒杀涉及的时间和服务器时间的同步对于确保活动的公平性和准确性至关重要,因此,如何使用JavaScript实现与服务器时间同步的商品秒杀倒计时成为了本篇讨论的核心内容。 首先,需要明确在实现秒杀倒计时时应避免...

    javascript 实现网页 倒计时 代码

    本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能,并结合提供的`index.html`和`js`文件进行解析。 首先,我们需要理解JavaScript中的时间处理。JavaScript使用`Date`对象来表示日期和时间,它提供了...

    倒计时功能插件js

    本文将深入探讨“倒计时功能插件js”的相关知识点,帮助开发者理解如何利用JavaScript实现倒计时功能。 首先,倒计时功能是网页或应用中常见的一种交互元素,通常用于事件预告、促销活动等场景。在JavaScript中,...

    考试系统js时间倒计时

    "考试系统js时间倒计时"这个主题关注的就是如何利用JavaScript来实现考试页面上的时间倒计时功能。JavaScript是一种广泛用于网页交互和动态效果的编程语言,非常适合在网页上实时更新时间信息。 首先,我们需要理解...

    vue实现天时分秒倒计时效果.rar

    JavaScript的`Date`对象可以用于获取当前时间,然后通过减去目标结束时间来计算剩余时间。`setInterval`函数可以每秒执行一次,更新剩余时间并重新渲染视图。 6. **生命周期钩子**: Vue组件有多个生命周期钩子函数...

    利用VBA实现幻灯片播放的倒计时功能

    Start = Timer ' 获取系统当前时间 Do While js = True If Timer &gt;= Start + 1 Then ' 当前时间比记录时间多出1秒时 Start = Timer ' 更新记录时间 tt = tt - 1 ' 减少剩余时间 If tt &lt;= 0 Then js = False ...

    原生js实现简单的一款倒计时计时插件.zip

    这款名为"原生js实现简单的一款倒计时计时插件"的资源,提供了使用纯JavaScript实现的倒计时计时功能,无需依赖任何外部库,如jQuery等。下面将详细介绍这个插件的关键知识点以及如何运用它。 首先,倒计时计时的...

    JS做的环形倒计时

    1. **JavaScript时间处理**:JavaScript的Date对象是处理日期和时间的基础,可以获取当前时间,并计算目标时间与当前时间的差值。这个差值将被用来更新倒计时的显示。 2. **定时器(setInterval)**:为了实现倒...

    js实现倒计时

    创建一个Date对象可以获取当前系统时间,也可以指定一个特定的日期和时间。例如: ```javascript var targetDate = new Date('2023-12-31T23:59:59'); ``` 2. **计算时间差**:使用`getTime()`方法获取Date对象...

    js实现倒计时时分秒

    在网页中,JS可以用于实现各种动态效果,包括我们今天要讨论的主题——倒计时功能。倒计时在网页中应用广泛,如活动预告、考试倒计时等,能给用户带来实时的时间感知。 倒计时的基本原理是通过计算当前时间与目标...

    元旦倒计时html/元旦倒计时js/元旦节日祝福html源码【元旦倒计时效果很炫酷】

    在本文中,我们将深入探讨如何使用原生JavaScript来实现一个倒计时特效,特别是针对2023年的元旦。这个倒计时功能不仅限于元旦,通过调整代码,你可以将其应用到任何特定的节日或日期。我们将从以下几个方面展开讨论...

    JavaScript实现倒计时

    本篇文章将详细探讨如何使用JavaScript实现倒计时功能。 首先,我们需要理解倒计时的基本原理。倒计时通常涉及到两个关键时间点:起始时间和结束时间。结束时间是我们设定的目标时间,而起始时间则是当前时间。倒...

    结合cocos2d-js3.0结合cocos studio实现时钟倒计时功能

    总的来说,结合Cocos2d-js 3.0和Cocos Studio实现时钟倒计时功能,需要对JavaScript编程、Cocos2d-js框架以及Cocos Studio的基本操作有充分的理解。通过创建自定义类,利用Cocos2d-js的时间管理模块,我们可以轻松地...

    jquery JS 倒计时 可调节倒计时的时间,格式jquery JS 倒计时 可调节倒计时的时间,格式jquery JS 倒计时 可调节倒计时的时间,格式

    总的来说,通过jQuery结合JavaScript的Date对象和定时器,我们可以轻松创建一个可调节的倒计时功能,同时利用自定义函数或插件进行时间格式化,以满足各种需求。在实际开发中,确保代码的可读性和可维护性同样重要,...

    JS时间倒计时

    接下来,我们将深入探讨如何使用JavaScript实现时间倒计时。 首先,我们需要了解JavaScript中的Date对象。Date对象是JavaScript内置的对象,它提供了处理日期和时间的各种方法。例如,`new Date()` 创建一个表示...

    html5输入时间设置倒计时代码

    在这个例子中,我们首先定义了结束时间,然后获取当前时间并计算剩余秒数。如果剩余时间小于等于0,我们会更新倒计时元素的内容并清除定时器,表示倒计时结束。否则,我们会根据剩余时间计算天数、小时数、分钟数和...

    计时器(倒计时,正计时)demo

    本Demo以layui UI框架为基础,实现了一个可切换的计时器,支持倒计时和正计时两种模式。layui是一款优秀的前端UI框架,以其简洁、易用的设计理念深受开发者喜爱,它提供了丰富的组件和样式,方便快速构建美观的用户...

    jquery实现倒计时,支持多行分别无限循环倒计时

    - **Date对象**:JavaScript中的Date对象用于处理日期和时间,我们可以从中获取当前时间,并通过它计算未来的或过去的时间点。 - **定时器**:`setTimeout`和`setInterval`函数用于设置定时执行某段代码,前者只...

Global site tag (gtag.js) - Google Analytics