流氓广告
页面打开在左下角有一个广告框点击关闭的时候可以关闭关闭一定时间以后自动还弹出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流氓广告</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
background-color: gold;
position: fixed;
right: 0;
bottom: 100px;
}
#box2 {
width: 30px;
height: 30px;
background-color: chartreuse;
text-align: center;
line-height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">X</div>
我是流氓广告
</div>
<script>
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
box2.onclick = function() {
box1.style.display = 'none';
setTimeout(function() {
box1.style.display = 'block';
}, 2000)
}
</script>
</body>
</html>
移动元素
页面中有两个按钮还有一个元素当点击第一个按钮时让该元素向右不停的移动 点击第二个按钮时该元素停止这个过程可以重复
附加: 当多次点击第一个时 仅需点击一次第二个按钮 元素应停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>
// 获取元素
var box = document.getElementById("box");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 定义i变量 用于记录运动了几次 也就是走了多少步
var i = 0;
// 用于保存定时器 方便在另一个按钮中清除
var timer;
// 设置一个锁
var lock = true;
btn1.onclick = function() {
if (lock === false) {
return;
}
lock = false;
// 开启定时器
timer = setInterval(function() {
// 计数器累加
i++;
// 改变定位值
box.style.left = 2 * i + "px";
}, 20);
}
btn2.onclick = function() {
lock = true;
// 清除定时器
clearInterval(timer)
}
</script>
</body>
</html>