源代码放在最后了
一.我们先看看效果图
1.当我们鼠标移动到不喜欢上面，不喜欢这个按钮就会随机移动到页面其他的位置。
2.当我们点击喜欢这个按钮就会弹出这样一个弹窗。
二.我们再来看看我们要用到的知识
1.HTML（将页面文字基本展现出来）
2.Css（修改美化HTML）
3.JavaScript（给网页添加动态效果）
我们用到的知识非常的基础一看就会，就算是0基础的小白也能做出同样的效果。
三.那我们开始制作吧
首先我们写html，非常简单
<body>
<h1>你喜欢我吗</h1>
<div class="btn ok">喜欢</div>
<div class="btn on">不好</div>
</body>
接下来写css
body{
//将页面变成粉色（pink粉色）
background-color: pink;
}
把h1的文字进行修饰
h1{
//文字居中
text-align: center;
//把文字向下移动100px，使得网页更美观
padding-top: 100px;
//将字体颜色变成白色
color: white;
//给文字下面加一个下边框，给文字和按钮一个距离
margin-bottom: 100px;
}
接下来是按钮的修饰
.btn{
//给一个绝对定位，让按钮可以出现在body的任何位置
position: absolute;
//设置宽高
width: 200px;
height: 50px;
//把按钮的角变成圆角
border-radius: 30px;
//给按钮一个边框，设成黑色，2px
border: solid black 2px;
text-align: center;
line-height: 40px;
background-color: aquamarine;
}
接下来是两个按钮（喜欢/不喜欢）样式的改变
.ok{
left: 30%;
}
//给ok元素加一个hover
.ok:hover{
//改变鼠标指针的样式（变成点击的鼠标样式）
cursor: pointer;
}
.on{
left: 60%;
background-color: chartreuse;
}
此时页面的样式基本做完，最后就剩下js了，给页面添加一个互动效果
//js是在script标签中书写
//首先获取一个on（也就是点击到不喜欢可以四处移动的那个按钮）
let on = document.querySelector('.on')
//给on添加一个事件，记得加一个函数，用mouseover鼠标移动，如果是手机端的可以吧mouesover替换成touchstart。
on.addEventListener("mouseover", function(){
//top是Y轴left是X轴，给这两个轴添加一个随机，也就是on按钮会在X/Y轴随机移动，*80是因为防止按钮跑到页面外面去，这样更保险。
this.style.top = Math.round(Math.random() * 80) + "%";
this.style.left = Math.round(Math.random() * 80) + "%";
})
//接下来是ok按钮了（按下ok按钮就会弹出“我就知道你喜欢我”）
//先获取一个ok标签，因为我们用的是class选择器，座椅在后面要加一个[0]
，表示第一个（计算机是从0开始计算的0表示是第一个）
let ok = document.getElementsByClassName('ok')[0]
//给它添加一个点击事件click，写一个函数function，用alert（alert是一个弹框），在里面写你想出现的字。
ok.addEventListener("click",function(){
alert("就知道会给我买，谢谢了！")
})
//我们的代码就完成了，之后能实现我们的效果点不到拒绝。
//快写给你最喜欢的人吧～～～
四.文件源码（可复制）
<!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>
body{
background-color: pink;
overflow: hidden;
}
h1{
text-align: center;
color: white;
margin-top: 200px;
}
.btn{
position: absolute;
top: 50%;
width: 100px;
height:40px;
background:aqua;
border-radius: 30px;
text-align: center;
line-height: 40px;
border: solid black 2px;
}
.ok{
left: 30%;
}
.ok:hover{
cursor: pointer;
}
.on{
left: 60%;
background-color: chartreuse;
}
</style>
</head>
<body>
<h1>你喜欢我吗</h1>
<div class="ww">
<div class="btn ok">喜欢</div>
<div class="btn on">不喜欢</div>
<script>
let on = document.querySelector('.on')
on.addEventListener("mouseover", function(){
this.style.top = Math.round(Math.random() * 80) + "%";
this.style.left = Math.round(Math.random() * 80) + "%";
})
let ok = document.getElementsByClassName('ok')[0]
ok.addEventListener("click",function(){
alert("就知道你喜欢我")
})
</script>
</div>
</body>
</html>
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
