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,一经查实,立即删除!

相关文章

matlab玫瑰,网上收到的用matlab画玫瑰花的代码怎么不行啊,报告错误,求大神

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼function plot_rosedraw_main(450,90);function draw_main(x,y)%粉红色玫瑰arcdata{1}[65 -60 150 350 866 -54 300 470 865 -56 30 230 1064 -57 300 490 17];ellipsedata{1}[73 -30 250 450 27 4059 -30 100 290 27 4065 -40 140…

设计类职业

设计类分: 1、视觉(2D 3D 2、声音 3、活动 很多时候是三种组合在一起,伴随不同行业延伸发展。 八类设计人才成职场红人 由于人才紧缺,以下八类设计人才已成为职场红人,未来发展前景看好。 1、产品设计师 工业生产型企业…

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 中有一个值最小的元素和一个值最大的元素。分别称为 最小值 和 最大值 。你的目标是从数组中移除这两个元素。 一次 删除 操作定义为从数组的 前面 移除…

php怎么获取分类数,php 两种获取分类树的方法

php 两种获取分类树的方法1./*** 获取分类树* param array $array 数据源* param int $pid 父级ID* param int $level 分类级别* return string*/function getCategory($array, $pid 0, $level 0){//声明静态数组,避免递归调用时,多次声明导致数组覆盖static $list [];foreac…

Java中正数与负数操作、的区别

以下为个人理解,有不对的地方请提出 Java中,>>、>>>都是在数字的二进制的补码中进行的 正数的补码为本身 如33的二进制表示为 00000000 00000000 00000000 00100001 补码为 00000000 00000000 00000000 00100001 负数的补码为符号位即最高…

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

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

Core Data系列三——基本使用

本文分两个部分,第一部分为使用Xcode IDE来建立data model以及nsmanagedobject subclass, 第二部分为代码中对数据库进行CURD的操作 Xcode操作步骤 创建Data Model: New File->iOS->Core Data->Data Model 建立entity建立entity的attribute建立entity之间的…

matlab仿真模拟随机过程,基于MATLAB的随机过程仿真.pdf

基于MATLAB的随机过程仿真.pdf< YSPRACTICE 系统实践基于MATLAB的随机过程仿真◆陈建华 彭淑燕 王 伟 李海燕摘要&#xff1a;为了改善随机过程课程教学中存在的数学概念抽象难懂&#xff0c;学生理解不透彻的情况&#xff0c;将基于MATLAB的随机过程仿真引入到教学中。根据…

python web开发 HTML基础

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

php程序设计案例教程 程序题,PHP程序设计案例教程

目录第1章PHP概述与运行环境搭建11.1PHP入门11.1.1PHP的发展史21.1.2PHP的优点31.1.3PHP的运行机制41.2PHP扩展库51.2.1标准扩展库51.2.2外部扩展库61.3Web服务器61.3.1Apache服务器61.3.2IIS服务器71.4PHP运行环境的搭建71.5综合案例——创建第一个PHP程序10目录第1章PHP概述与…

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

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

python web开发 CSS基础

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