|
1.5秒后自动关闭的广告
<img src="img/113.jpeg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
2.倒计时
（倒计时是不断变化的，需要定时器来自动变化（setInterval）。三个盒子里面分别存放时分秒，利用innerHTML放入计算的时分秒；考虑刚刷新时有空白的情况，采取封装的方式解决。）
css部分
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;
}
body部分
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
js部分
<script>
// 1. 获取元素
var hour = document.querySelector('.hour');// 小时的黑色盒子
var minute = document.querySelector('.minute');// 分钟的黑色盒子
var second = document.querySelector('.second');// 秒数的黑色盒子
var inputTime = +new Date('2022-2-21 21:45:00'); // 返回的是用户输入时间总的毫秒数
countDown();// 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
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;
}
</script>
3.发送短信
（点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信）
（按钮点击之后，会禁用disabled为true；同时按钮里面的内容会变化，buttton里面的内容通过innerHTML修改；由于秒数发生变化的，需要用到定时器；定义一个变量，在定时器里面，不断递减；如果变量为0说明到了时间，需要停止定时器，并且复原按钮初始状态。）
<body>
手机号码：<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 60; // 定义剩下的秒数
btn.addEventListener('click',function(){
btn.disabled = true;
var timer = setInterval(function(){
if(time == 0){
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 60; //time需要重新赋值
}else{
btn.innerHTML = '还剩下'+time+'秒';
time--;
}
},1000)
})
</script>
</body>
4.时钟（显示当前的年月日，时分秒，要求自动变化）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 200px;
}
div {
display: inline-block;
width: 400px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="clock"></div>
<script>
// 1. 获取元素
var clock = document.querySelector('.clock');
countDown(); // 先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown,1000);
function countDown(){
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
month = month < 10 ? '0' + month : month;
var date = time.getDate();
date = date < 10 ? '0' + date : date;
var day = time.getDay();
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
var str = year + '年' + month + '月' + date + '日 ' + week[day] + ' ' + h + '时' + m + '分' + s + '秒';
clock.innerHTML = str;
}
</script>
</body>
</html>
|