php表白页面,2020情人节表白页面(代码分享)

趁此单身汪伤心之日,作为一名前端程序猿的我也按捺不住了,撸个表白页面送给广大想表白的人儿。

话不多说,先看效果(网页地址):

8a0fdc5f889b8562647e6bcffb46144e.png

5d89b1e7f0889aec7430b7d89e318853.png

功能

一个网页输入名称,生成带参数的网址。

浏览器输入该网址,即可打开带有该名字的网页,图片轮播,还带有音乐哟

(简单实现,本文不是技术软文,而是小工具推荐啊啊哈哈)

(ps: 已经做了移动端适配,手机打开效果更加哦)

代码// name.html

输入名字

body {

min-height: 100vh;

background: linear-gradient(#1d2b64, #f8cdda);

color: #fff;

font-family: PingFangSC-Regular;

padding: 0;

margin: 0;

}

input {

display: inline-block;

width: 80%;

height: 32px;

line-height: 1.5;

padding: 4px 7px;

margin: 20px auto 0 auto;

font-size: 16px;

border: 1px solid #dcdee2;

border-radius: 4px;

color: #515a6e;

background-color: #fff;

background-image: none;

position: relative;

cursor: text;

-webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,

-webkit-box-shadow 0.2s ease-in-out;

transition: border 0.2s ease-in-out, background 0.2s ease-in-out,

-webkit-box-shadow 0.2s ease-in-out;

transition: border 0.2s ease-in-out, background 0.2s ease-in-out,

box-shadow 0.2s ease-in-out;

transition: border 0.2s ease-in-out, background 0.2s ease-in-out,

box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;

}

.button {

display: flex;

align-items: center;

justify-content: center;

position: relative;

z-index: 10;

width: 80%;

height: 40px;

background: rgba(89, 126, 247, 1);

border-radius: 44px;

font-size: 14px;

font-weight: 500;

color: rgba(255, 255, 255, 1);

line-height: 20px;

cursor: pointer;

}

.button-shadow {

width: 80%;

height: 40px;

background: rgba(106, 140, 253, 1);

border-radius: 44px;

opacity: 0.3081;

-webkit-filter: blur(4px);

filter: blur(4px);

margin-top: -36px;

}

#card {

width: 80%;

box-sizing: border-box;

padding: 20px 12px;

word-wrap: break-word;

}

@media screen and (min-width: 800px) {

.container {

width: 350px;

margin: 0 auto;

}

}

Happy Valentine's Day

window.onload = function() {

document.getElementById("btn").addEventListener("click", function() {

let name = document.getElementById("name").value;

if (name === "") {

alert("请输入姓名");

return;

}

let url =

"https://zxpsuper.github.io/Demo/valentine_day/index.html?name=" +

encodeURIComponent(encodeURIComponent(name));

document.getElementById("card").innerHTML = url;

});

};

style="display: flex;margin-top: 40px; flex-direction:column;align-items: center "

>

确定

复制以上网址发给他人吧

------------

//index.html

情人节快乐

img {

width: 100%;

}

body {

min-height: 100vh;

background: linear-gradient(#1d2b64, #f8cdda);

color: #fff;

font-family: PingFangSC-Regular;

padding: 0;

margin: 0;

}

.avatar {

width: 44px;

height: 44px;

border-radius: 50%;

border: 2px solid #fff;

}

.shadow {

position: absolute;

left: 0;

z-index: -1;

filter: blur(50px);

}

.btn-group {

display: flex;

margin-top: 40px;

justify-content: space-between;

align-items: center;

}

.btn-group div {

flex: 1;

text-align: center;

}

.sure {

padding: 14px 0;

background: linear-gradient(

180deg,

rgba(255, 127, 87, 1) 0%,

rgba(221, 40, 39, 1) 100%

);

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;

}

.cancel {

padding: 14px 0;

background: #eee;

color: #333;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

}

marquee {

background: none;

}

@media screen and (min-width: 800px) {

.container {

width: 350px;

margin: 0 auto;

}

}

style="position: relative; display: flex; align-items: center; margin-bottom: 10px"

>

小皮咖

1.png

2.png

3.png

4.png

5.png

6.png

7.png

src="http://att.chinauui.com/day_181211/20181211_8480d0323003455bd6de8CcQ3Eq28Mm9.mp3"

autoplay

loop

>

您的浏览器不支持 audio 标签。

确定

取消

function getQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) {

return r[2];

}

return null;

}

window.onload = function() {

let name = getQueryString("name");

document.getElementById("name").innerHTML = decodeURIComponent(

decodeURIComponent(name)

);

};

818d18eaca825a91a609ce912b5fdc37.png

最后祝大家情人节快乐!!

相关标签:情人节

本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 2086. 从房屋收集雨水需要的最少水桶数(贪心)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的字符串 street 。street 中每个字符要么是表示房屋的 ‘H’ ,要么是表示空位的 ‘.’ 。 你可以在 空位 放置水桶,从相邻的房屋收集雨水。 位置在 i - 1 或者 i 1 的水桶可以收集位置为 i 处房…

LeetCode 2087. 网格图中机器人回家的最小代价(脑筋急转弯)

文章目录1. 题目2. 解题1. 题目 给你一个 m x n 的网格图,其中 (0, 0) 是最左上角的格子,(m - 1, n - 1) 是最右下角的格子。 给你一个整数数组 startPos ,startPos [startrow, startcol] 表示 初始 有一个 机器人 在格子 (startrow, start…

PAM+4+matlab,基于PAM4调制的400G光模块

PAM4是400G光模块的主要调制方式,有多模和单模两种类型。基于PAM4调制的400G光模块电口侧以8x50G PAM4调制,光口侧则有8x50G PAM4和4x100G PAM4两种调制类型。多模光模块400G多模光模块常见的有SR8和SR4.2接口,皆使用8x50G PAM4调制。400G SR…

LeetCode 2089. 找出数组排序后的目标下标

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums 以及一个目标元素 target 。 目标下标 是一个满足 nums[i] target 的下标 i 。 将 nums 按 非递减 顺序排序后,返回由 nums 中目标下标组成的列表。 如果不存在目标下标,返回一…

DJANGO,获取当前用户名,用户组名,用户组权限

样例,为下一步自定义用户权限作一下代码准备: def get_context_data(self, **kwargs):if self.request.user.is_authenticated():current_user_set self.request.userprint current_user_setcurrent_group_set Group.objects.get(usercurrent_user_set…

php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...

本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法。分享给大家供大家参考,具体如下:var valuesfunction(object) {var values [];for (var property in object)values.push(object[property]);return values;}//写成标准的方法(数…

LeetCode 2090. 半径为 k 的子数组平均值(滑窗)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的数组 nums ,数组中有 n 个整数,另给你一个整数 k 。 半径为 k 的子数组平均值 是指:nums 中一个以下标 i 为 中心 且 半径 为 k 的子数组中所有元素的平均值,即下标在 i …

大龄屌丝自学笔记--Java零基础到菜鸟--036

GUI:继承体系、事件监听机制、适配器模型、Netbeans 1、继承体系 2、事件监听机制 事件源--事件定义(接口)--事件处理(实现类)--事件监听 3、适配器模型 接口(很多方法)--抽象适配器类&#xff…

LeetCode 2091. 从数组中移除最大值和最小值(一次遍历)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的数组 nums ,数组由若干 互不相同 的整数组成。 nums 中有一个值最小的元素和一个值最大的元素。分别称为 最小值 和 最大值 。你的目标是从数组中移除这两个元素。 一次 删除 操作定义为从数组的 前面 移除…

LeetCode 2092. 找出知晓秘密的所有专家(并查集)

文章目录1. 题目2. 解题1. 题目 给你一个整数 n ,表示有 n 个专家从 0 到 n - 1 编号。 另外给你一个下标从 0 开始的二维整数数组 meetings ,其中 meetings[i] [xi, yi, timei] 表示专家 xi 和专家 yi 在时间 timei 要开一场会。 一个专家可以同时参加…

python web开发 HTML基础

文章目录1. 简介2. 标签元素属性3. 表格4. 列表ol 有序ul 无序自定义列表5. 表单输入域标记 input选择域标记 select, option文字域标记 textarea6. 综合练习learning from 《python web开发从入门到精通》 1. 简介 HTML 是描述网页的一种标记语言,Hyper Text Mar…

美团大众点评合并:背后技术力量的对比回顾

美团网和大众点评网在10月8日中午联合发布声明,宣布达成战略合作,两者将共同成立一家新公司。两者也在InfoQ及其组织的大会上进行过多次分享,我们将对美团和大众点评使用的技术进行回顾,来看看这两家电商巨头的技术实力。 美团和大…

python web开发 CSS基础

文章目录1. 基础知识2. ID,Class 选择器3. CSS盒子模型4. 嵌入CSS样式4.1 内联样式表4.2 内部样式表4.3 外部样式表learning from 《python web开发从入门到精通》 1. 基础知识 CSS ,Cascading Style Sheet 层叠样式表,标记语言&#xff0c…

python web开发 JavaScript基础

文章目录1. script 标签2. 字面量、变量3. 数据类型4. 运算符5. if 条件6. switch分支7. for循环8. while循环9. break, continue10. 函数11. JS事件12. 引入JS的两种方式12.1 HTML页面嵌入12.2 引入外部JS文件learning from 《python web开发从入门到精通》 JavaS…

python web开发 jQuery基础

文章目录1. 引入 jQuery2. 基本语法3. jQuery 选择器3.1 元素选择器3.2 #id 选择器3.3 .class 选择器4. jQuery事件5. 获取内容和属性5.1 获取内容5.2 获取属性learning from 《python web开发从入门到精通》 jQuery 是一个轻量级的 JavaScript 函数库包含 元素选取&#xff0…

python web开发 Bootstrap框架基础

文章目录1. 安装2. Bootstrap 5 基本应用learning from 《python web开发从入门到精通》 Bootstrap 是最受欢迎的 前端组件库&#xff0c;用于 HTML&#xff0c;CSS&#xff0c;JavaScript 开发的 开源工具集 1. 安装 使用 CDN 引用 <link href"https://cdn.jsdeli…

window.cookie

本地测试cookie用火狐来测试 首先cookie是document上的一个属性。 先弹出一个cookie alert(document.cookie); //弹出是空的 设置cookie&#xff0c;格式是有一定要求的&#xff0c;格式是&#xff0c;名字值 这样的格式 所以设置的时候&#xff0c;这样设置 document.cook…

python web开发 网络编程 TCP/IP UDP协议

文章目录1. TCP/IP协议1.1 IP协议1.2 TCP协议2. UDP协议3. Socket4. TCP编程4.1 创建TCP服务器4.2 创建TCP客户端4.3 简易聊天工具5. UDP编程5.1 创建UDP服务器5.2 创建UDP客户端learning from 《python web开发从入门到精通》 1. TCP/IP协议 大家都用同样的协议 protocol&am…

python web开发 网络编程 HTTP协议、Web服务器、WSGI接口

文章目录1. HTTP协议2. Web服务器3. 静态服务器创建 web_server.py4. WSGI 接口4.1 CGI 通用网关接口4.2 WSGI4.3 定义 WSGI 接口4.4 运行 WSGI 服务learning from 《python web开发从入门到精通》 1. HTTP协议 应用层最主要的协议&#xff1a;HTTP协议&#xff08;HyperText…

android 75 新闻列表页面

new.xml <?xml version"1.0" encoding"UTF-8" ?> <newslist><news><title>黑马52期就业快报</title><detail>热烈祝贺黑马52期平均薪水突破13k</detail><comment>15687</comment><image>ht…