您的位置:首页 > 职场人生

Web前端面试题-实现今年倒计时功能

2017-03-04 15:07 344 查看
 在网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”XX年还剩XX天XX时XX分XX秒”
<!DOCTYPEHTML>
<html>
<head>
<meta http-equiv=”Content-Type”content=”text/html;charset=UTF-8”>
<title>倒计时</title>
</head>
<body>
<input type=”text” value=”” id=”input”size=”500”>
</body>
</html>


最终的效果如下



参考答案如下:

<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息