使用JS写了一个时间表和倒计时
初始界面是这样的- 温文尔雅得体大方
当打开页面之后初始界面就是一个时间表，显示的是当前的时间；
输入空格之后~~~还是显示当前时间
当输入正确的时间格式之后 就开始计算倒计时工作了
这里输入的是今年的五一到现在放假的倒计时…嘿嘿
其实…这些都是小的操作 不骚 …不骚…
下面输入年月日时分秒 试试？
恭喜您！能看到这里说明您很有耐心 那么我将说明本文的中心思想与君一起探讨：
其实这个小玩意我今天写的时候有一个技术点是没有突破的，就是在setInterval定时器中的一个小点，
timeBack(new Date(), time2); // 在间隔定时器间隔1s之前先执行一次 免得打开网页有1s的空白时间
setInterval(timeBack, 1000,new Date(),time2) // 这里写的第3个参数是获取当前时间 但是这样直接传参会发现浏览器上面的数字不走动 也就是说定时器不起作用。
//setInterval(func,间隔的毫秒数[,函数的参数1，函数的参数2... 这里面的参数只会调用一次 但是函数是每隔1秒调用一次 所以可以把参数放到函数里])
function timeBack(time1, time2)
// 所以说正确的写法如下
setInterval(function(){
timeBack(new Date(),time2)
}, 1000)
客官您要是浏览到此的话 说明您是真的很有意思，不仅能看出你是非常有耐心的，还是非常用心的细心的老板，在下钦佩…送上代码一份，请笑纳 ！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
width: 100px;
height: 100px;
background: rgba(00, 00, 00, .7);
float: left;
border: 1px solid rgb(129, 31, 31);
color: seashell;
}
.big {
width: 408px;
height: 150px;
margin: 100px auto;
float: none;
text-align: center;
line-height: 100px;
font-size: 25px;
}
input {
float: left;
height: 44px;
width: 400px;
font-size: 20px;
}
span {
float: left;
height: 50px;
width: 50px;
font-size: 20px;
font-weight: 600;
line-height: 50px;
cursor: pointer;
}
</style>
<body>
<div class="big">
<input type="text" placeholder="输入要到达的时间开始倒计时...">
<!-- <span>确定</span> -->
<!-- 用于装倒计时的盒子 -->
<div class="day"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script>
var inp = document.querySelector('input');
var date = new Date();
var time2 = date.getFullYear().toString()+'-'+(date.getMonth()+1).toString()+'-'+date.getDate().toString();
console.log(time2);
inp.oninput = function () {
time2 = inp.value;
console.log(time2);
if(time2 == null || time2 == '' || time2==false){
time2 = date.getFullYear().toString()+'-'+(date.getMonth()+1).toString()+'-'+date.getDate().toString();
// alert('亲，要输入合法时间哦！');
}
}
var d = document.querySelector('.day');
var h = document.querySelector('.hour');
var m = document.querySelector('.minute');
var s = document.querySelector('.second');
timeBack(new Date(), time2);
setInterval(function(){
timeBack(new Date(),time2)
}, 1000) // setInterval(func,间隔的毫秒数[,函数的参数1，函数的参数2... 这里面的参数只会调用一次 但是函数是每隔1秒调用一次 所以可以把参数放到函数里])
function timeBack(time1, time2) {
var date1 = new Date(time1);
var date2 = new Date(time2);
var date1 = date1.getTime();
date2 = date2.getTime();
var date3 = date1 < date2 ? date2 - date1 : date1 - date2; // date3是前面两个时间的格林威治时间的时间差毫秒数
// 把date3 转化为 多少天 小时分钟秒就OK了
var day = parseInt(date3 / 1000 / 60 / 60 / 24);
day = day < 10 ? '0' + day : day;
d.innerHTML = day + '天';
var hours = parseInt((date3 - day * 24 * 60 * 60 * 1000) / 1000 / 60 / 60);
hours = hours < 10 ? '0' + hours : hours;
h.innerHTML = hours + '时';
var minutes = parseInt((date3 - day * 24 * 60 * 60 * 1000 - hours * 1000 * 3600) / 1000 / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
m.innerHTML = minutes + '分';
var seconds = parseInt((date3 - day * 24 * 60 * 60 * 1000 - hours * 1000 * 3600 - minutes * 60000) / 1000);
seconds = seconds < 10 ? '0' + seconds : seconds;
s.innerHTML = seconds + '秒';
var time3 = new Date(time2);
time2 = time3.getTime();// 拿到默认时间的格林威治的时间毫秒数
var time4 = new Date();
time1 = time4.getTime(); // 拿到当前时间到格林威治时间的毫秒数
if(time2<time1 || time2 == ''){
d.innerHTML = '当前时间 :';
d.style.fontSize = '18px';
h.innerHTML = hours + ' ';
m.innerHTML = minutes + ' ';
s.innerHTML = seconds + ' ';
}else{
d.style.fontSize = '25px';
}
// console.log(time1 + '到' + time2 + '有' + day + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒');
}
</script>
</body>
</html>
谢谢阅读 ：我的人生格言是【生命不息、折腾不止】
祝 各位用 霸王的程序员 头发密集茂盛。
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
