js中的定时器

最新推荐文章于 2024-04-04 01:06:56 发布

DiXionYu

最新推荐文章于 2024-04-04 01:06:56 发布

阅读量114

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/DiXionYu/article/details/127857242

版权

本文通过JavaScript展示了如何创建一个网页倒计时器，利用setTimeout和setInterval函数实现定时更新，展示距离特定日期的剩余天数、小时、分钟和秒数。代码中详细解释了各个步骤，包括获取当前时间、设定未来时间以及计算差值并格式化显示。

摘要由CSDN通过智能技术生成

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

<head>
<meta charset = “UTF-8”>
<title>Document</title>
<script type = “text/javascript”>
	Window.onload = function(){
		Var oDiv = document.getElementById(‘div1”);
		//实际开发中需要使用读取后台的时间，可以通过ajax来获取
		Var sNow = new Date();
		//未来时间11月30日晚24点
		Var sFuture = new Date(2022,10,30,24,0,0);
		//计算还剩多少秒
		Var sLeft = parseInt((sFuture – sNow)/1000);
		
		Var iDays = parseInt(sLeft/86400);
		Var iHours = parseInt((sLeft%86400)/3600);
		Var iMinutes = parseInt(((sLeft%86400)%3600)/60);
		Var iSeconds = parseInt(sLeft%60);
		
		Var sTr =’距离11月30日还剩：’+iDays +’天’+iHours+‘时’+ iMinutes +‘分’+ iSeconds +‘秒’;
		oDiv.innerHTML = sTr;
		
}
</script>
</head>

<body>
<div id = “div1”></div>
</body>

以倒计时作为例子作为参考，将后台获取的时间与设定的时间进行对比，获取处的数据以s本身作为存在，即sNow，再通过对sNow数据进行一系列的处理，最终完成获取来自倒计时的天数，小时，分，秒等需求数据，再进行使用定时器进行对数据在网页上的不断刷新，最终形成可以自动倒计时的网页数据。