js实现今年倒计时功能
【摘要】 在网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”XX年还剩XX天XX时XX分XX秒”
在网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”XX年还剩XX天XX时XX分XX秒”
【html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html;" />
<title>实现今年倒计时功能 </title>
<style>
input{
width: 100%;
height: 150px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<input type="text" id="input" />
</body>
</html>
【js】
<script>
//年还剩
var txt= document.getElementById("input");
setInterval(function () {
//获取系统当前时间
var now = new Date();
//实例化今年跨年时间
var targDate = new Date(now.getFullYear() + 1, 0, 1);
//跨年时间与此时此刻时间差（毫秒）
var long = targDate - now;
var leftDay = parseInt(long/ 1000 / 60 / 60 / 24);
long = long % (1000 * 60 * 60 * 24);
var leftHour =parseInt(long / 1000 / 60 / 60);
long = long % (1000 * 60 * 60);
var leftMinute = parseInt(long / 1000 / 60) ;
long = long % (1000 * 60 );
var leftSeconde = parseInt(long / 1000);
txt.value= now.getFullYear() +"年还剩" + leftDay
+ "天" +leftHour + "时"+leftMinute+"分"+leftSeconde+"秒";
}, 1000);
</script>
最终效果如下：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）