快递单号查询、倒计时和发送短信效果

最新推荐文章于 2023-08-09 11:39:02 发布

Sole Memory°

最新推荐文章于 2023-08-09 11:39:02 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/Sole_Memory1/article/details/100186875

版权

1、倒计时效果
<style>
div {
margin: 200px;
}

span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2019-8-21 18:00:00');
countDown();

setInterval(countDown,1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}

var date = new Date();
console.log(date)
var date1 = + new Date();
console.log(date1)

</script>
</body>

2、发送短信效果代码
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var timer = 3;
btn.addEventListener('click',function(){
fn();
btn.disabled = true;
var time = setInterval(fn,1000);
function fn(){
if (timer == 0){
clearInterval(time);
btn.disabled = false;
btn.innerHTML = '发送';
timer = 3;
} else {
btn.innerHTML = '还剩'+ timer +'秒';
timer--;
}
}
})
</script>
</body>