一次性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dn{
height: 100px;
width: 100px;
background-color: aqua;
display: none;
}
</style>
</head>
<body>
<div id="dn" class="dn"></div>
<input type="button" id="dd" value="点击清除器">
<input type="button" id="tt" value="点击回复">
</body>
</html>
<script>
const show = () => {
document.getElementById("dn").style.display='block'
}
//第一种
//const timeout1 = window.setTimeout(show,3*1000);
//第二种
const timeout2 = window.setTimeout('show()',3*1000);
//第三种
/*const timeout3 = window.setTimeout(()=>{
document.getElementById("dn").style.display='block'
},3*1000);*/
let dd=document.getElementById("dd");
dd.onclick=()=>{
window.clearTimeout(timeout2);
}
let tt=document.getElementById("tt");
tt.onclick=()=>{
window.setTimeout(show,3*1000);
}
</script>
周期定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dn{
background-color: crimson;
}
</style>
</head>
<body>
<div id="dn" class="dn"></div>
<input type="button" id="dd" value="点击清除器">
</body>
</html>
<script>
let width=0;
let height=0;
const timeout3 = window.setInterval(()=>{
document.getElementById("dn").style.width=width+'px';
document.getElementById("dn").style.height=height+'px';
width++;
height++;
},10);
let dd=document.getElementById("dd");
dd.onclick=()=>{
window.clearTimeout(timeout3);
}
</script>
表单效验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.msg{
color: red;
}
.login{
font-size: 32px;
text-align: center;
color: green;
background-color: yellow;
position: fixed;
top: 0;
left: 600px;
display: none;
}
</style>
</head>
<body>
<form id="f" action="#" method="post" >
用户名：<input type="text" id="username" name="username"><span id="usernamespan" class="msg"></span> <br>
密密码：<input type="password" id="password" name="password"><span id="passwordspan" class="msg"></span> <br>
<button type="button" id="btn">提交</button>
</form>
<div id="login" class="login">恭喜你登录成功</div>
</body>
</html>
<script>
let username = document.getElementById('username');
let password = document.getElementById('password');
let btn = document.getElementById('btn');
btn.onclick = () => {
//提交之前清空
for (let c of document.getElementsByClassName("msg")) {
c.innerHTML = '';
};
if(username.value == ''){
document.getElementById('usernamespan').innerHTML = '请输入用户名';
return;
}
if(password.value == ''){
document.getElementById('passwordspan').innerHTML = '请输入密码';
return;
}
//提交
//document.getElementById('f').submit();
document.getElementById('login').style.display = 'inline';
window.setTimeout(() => {
document.getElementById('login').style.display = 'none';
},3*1000)
}
</script>
图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.img{
width: 100%;
height: 200px;
background-color: cadetblue;
display: flex;
}
.ck{
width: 50px;
height: 100%;
background-color: azure;
}
</style>
</head>
<body>
<div class="img">
<div class="ck">
<img src="images/prev.png" alt="" height="100%" width="100%">
</div>
<div style="flex: 1">
<img src="images/00.jpg" alt="" width="100%" height="100%" id="loop">
</div>
<div class="ck">
<img src="images/next.png" alt="" height="100%" width="100%">
</div>
</div>
</body>
</html>
<script>
let loop=document.getElementById("loop");
let index=1;
window.setInterval(()=>{
loop.src='images/0'+index+'.jpg';
index++;
if (index>9){
index=0;
}
},2000)
</script>
广告效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.gg{
width: 300px;
height: 200px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gg" class="gg"></div>
</body>
</html>
<script>
let gg=document.getElementById("gg");
window.setTimeout(()=>{
gg.style.display='block';
},3000)
gg.onclick=()=>{
window.open('http://4366uu.8faa7.com/120894/?bd_token=xXrn' +
'qY8H3M6mL2RV5GaSS6civiYXLaBd@e3v159YRaghzNle8WehTx4fiQo51b' +
'yg0&bd_vid=12182905947692843479');
}
</script>
