简单的JS倒计时小程序

最新推荐文章于 2024-04-27 10:32:51 发布

freeline_FLY

最新推荐文章于 2024-04-27 10:32:51 发布

阅读量2.3k

点赞数

分类专栏： JS 文章标签： date input xhtml button html

本文链接：https://blog.youkuaiyun.com/freeline_FLY/article/details/7283516

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

这是一个使用JavaScript编写的简单倒计时小程序，用户可以输入年、月、日、小时和分钟，点击开始按钮后，程序将计算并显示从设定时间到当前时间的剩余时间。通过获取用户输入的日期时间，与当前时间进行比较，计算出天数、小时数、分钟数和秒数，并实时更新在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>倒计时</title>
<script type="text/javascript" language="javascript">
function time(){

	//取出用户输入的时间，然后拼接字符串
	var y=document.getElementById("year").value;
	var mo=document.getElementById("month").value;
	var d=document.getElementById("day").value;
	var h=document.getElementById("hour").value;
	var m=document.getElementById("minute").value;
	var str=mo+"/"+d+"/"+y+" "+h+":"+m+":00";
  var myDate=new Date(str);
  var now=new Date();

	//把用户输入的时间和当前时间都转换成毫秒数，然后相减
  var date=myDate.getTime()-now.getTime();
  var day=Math.floor(date /(1000*60*60*24));
  var hour=Math.floor(date /(1000*60*60))-(day*24);
  var minute=Math.floor(date/(1000*60)-(hour*60)-(day*24*60));
  var second=Math.floor(date /1000)-(hour*60*60)-(minute*60)-(day*24*60*60);

	//输出倒计时
  document.getElementById("text").innerHTML="距"+y+"年"+mo+"月"+d+"日"+h+"："+m+"还有:"+day+"天"+hour+"小时"+minute+"分"+second+"秒";

	//每秒调用一次函数
  setTimeout("time();",1000);
  }
</script>
</head>
<body>
	<input type="text" id="year" />年
	<input type="text" id="month" />月
	<input type="text" id="day" />日
	<input type="text" id="hour" />: 
	<input type="text" id="minute" />
	<input type="button" value="开始倒计时" οnclick="time()"/>
	<div id="text"></div>
</body>
</html>