超火表白页面《点不到拒绝》

源代码放在最后了

一.我们先看看效果图

1.当我们鼠标移动到不喜欢上面，不喜欢这个按钮就会随机移动到页面其他的位置。

2.当我们点击喜欢这个按钮就会弹出这样一个弹窗。

二.我们再来看看我们要用到的知识

1.HTML（将页面文字基本展现出来）

2.Css（修改美化HTML）

3.JavaScript（给网页添加动态效果）

我们用到的知识非常的基础一看就会，就算是0基础的小白也能做出同样的效果。

三.那我们开始制作吧

首先我们写html，非常简单

<body>

<h1>你喜欢我吗</h1>

</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>

<head>

<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>

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>

超火表白页面《点不到拒绝》相关推荐

超火表白代码，心心（html+css）
作品介绍纯html的源码,打开使用啦! 效果图效果地址:http://luoyujin0511.gitee.io/wr 部分代码 <!--* @Author: your name* @Dat ...
c#超火表白小程序（含代码教程）
即使倾其所有,我也想跌跌撞撞的闯入你的眼眸以你之名,冠我之姓,吾之爱汝,唯愿执子之手,与子偕老,可好? 做一个简单有趣的表白小程序吧! 一.窗体设计此程序用到三个控件: Picture_Box控件 ...
c#超火表白程序（详细版）
先创建一个窗体应用程序 2.打开工具箱,添加按钮. Label显示文本,pictureBox显示图片,Button按钮各控件可在右侧修改属性 3. 右击控件,进入属性修改Text的值接下来,修改 ...
情侣博客源码php,分享超炫的表白页面和爱的纪念日源码
昨晚弄到三点就是为了DIY这2个页面,想给老婆一个浪漫的惊喜. 预览地址: 是别人的源码,没什么好说的,直接贴上作者说明: 一.超炫表白页面: 作者原话:为了预热情人节,麦葱二次开发了个表白程序.程序 ...
android纪念日源码,分享超炫的表白页面和爱的纪念日源码
预览地址: 是别人的源码,直接贴上作者说明: 一.超炫表白页面: 作者原话:为了预热情人节,麦葱二次开发了个表白程序.程序放在BAE上面,因为本地写这个原因,生成的页面过段时间就找不到了,导致链接页面 ...
最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...
html5七夕表白放烟花动画特效最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效
html5七夕表白放烟花动画特效最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...
【表白神器】Python超火隐藏表白图你能看出来吗？【附源码】
导语浪漫至死不渝,温柔绝对屈服. -马上国庆了-没啥送的-那就送大家一些表白的代码吧- 大兄弟小姐妹们,大家好! 我是准时上线更新代码+讲故事的程序媛小姐姐! 整理了一款超火的『隐藏表白代码 ...
「表白神器」Python超火隐藏表白图你能看出来吗？「附源码」
导语浪漫至死不渝,温柔绝对屈服. -马上国庆了-没啥送的-那就送大家一些表白的代码吧- 大兄弟小姐妹们,大家好! 我是准时上线更新代码+讲故事的程序媛小姐姐! 整理了一款超火的『隐藏表白代码』希 ...

超火表白页面《点不到拒绝》

超火表白页面《点不到拒绝》相关推荐

最新文章

热门文章

超火表白页面 《点不到拒绝》

超火表白页面 《点不到拒绝》相关推荐

最新文章

热门文章

超火表白页面《点不到拒绝》

超火表白页面《点不到拒绝》相关推荐