用JavaScript打造的三种简单实用倒计时实例
最编程
2024-02-23 15:53:48
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时间倒计时</title>
<style>
input {
width: 50px;
height: 20px;
border: 1px solid black;
background-color: red;
text-align: center
}
.time1 span {
display: inline-block;
width: 40px;
height: 20px;
text-align: center
}
</style>
</head>
<body>
<form>目的日期：
<input type="text" id="year"><span>年</span>
<input type="text" id="month"><span>月</span>
<input type="text" id="day"><span>日</span>
<input type="text" id="hour"><span>时</span>
<input type="text" id="minute"><span>分</span>
<input type="text" id="second"><span>秒</span>
<input type="button" value="确定" onclick="show()">
</form>
<div class="time1">还剩时间：
<span id="1"></span>天
<span id="2"></span>时
<span id="3"></span>分
<span id="4"></span>秒
</div>
<script>
function show() {
//获取目的日期
var myyear = document.getElementById("year").value; //年
var mymonth = document.getElementById("month").value - 1; // 月
var myday = document.getElementById("day").value; // 日
var myhour = document.getElementById("hour").value; //时
var myminute = document.getElementById("minute").value; //分
var mysecond = document.getElementById("second").value; //秒
// 记录输入的时间
var time = Number(new Date(myyear, mymonth, myday, myhour, myminute, mysecond));
// var time = new Date(myyear, mymonth, myday, myhour, myminute, mysecond).getTime();
//获取当前时间
var nowTime = Date.now();
// var nowTime=new Date().getTime();
//获取时间差
var timediff = Math.round((time - nowTime) / 1000);
//获取还剩多少天
var day = parseInt(timediff / 3600 / 24);
//获取还剩多少小时
var hour = parseInt(timediff / 3600 % 24);
//获取还剩多少分钟
var minute = parseInt(timediff / 60 % 60);
//获取还剩多少秒
var second = timediff % 60;
//输出还剩多少时间
day >= 0 ? document.getElementById("1").innerHTML = day : 0;
hour >= 0 ? document.getElementById("2").innerHTML = hour : 0;
minute >= 0 ? document.getElementById("3").innerHTML = minute : 0;
second >= 0 ? document.getElementById("4").innerHTML = second : 0;
var cle = setTimeout(show, 1000); //计时器
timediff == 0 && clearInterval(cle)
}
</script>
</body>
</html>
上一篇： 用js实现倒计时