祝福他人结婚纪念日快乐用什么代码

JavaScript034

祝福他人结婚纪念日快乐用什么代码,第1张

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!--

* @Author: your name

* @Date: 2021-04-09 15:18:51

* @LastEditTime: 2021-04-09 16:13:21

* @LastEditors: Please set LastEditors

* @Description: In User Settings Edit

* @FilePath: \结婚倒计时\index.html

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>结婚倒计时</title>

<link rel="stylesheet" href="css/styles.css" />

</head>

<body>

<div class="banner-container">

<div class="heading">

<h2>小柳 &小冯</h2>

<h3>我们要结婚了</h3>

<h5>2021年05月20日</h5>

</div>

<div class="countdown styled"></div>

<div class="copyrights">版权所有 © 2021.保留所有权利</div>

</div>

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="js/jquery.countdown.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

</body>

</html>

2.CSS代码

* {

margin: 0

padding: 0

list-style-type: none

}

a,

img {

border: 0

}

p {

color: #24298f

margin: 0 0 1em !important

font-size: 13px

}

body {

font-family: "Open Sans", Arial, sans-serif

font-size: 14px

font-weight: 300

line-height: 1.6em

color: #656565

-webkit-font-smoothing: antialiased

-webkit-text-size-adjust: 100%

background: #fff

transition: all 0.3s linear

-webkit-transition: all 0.3s linear

-moz-transition: all 0.3s linear

-o-transition: all 0.3s linear

}

.banner-container {

background-image: url("../images/bg.jpg")

background-repeat: repeat

background-size: cover

font-size: 14px

height: 100%

width: 100%

overflow: hidden

position: fixed

text-shadow: 1px 1px rgba(0, 0, 0, 0.3)

}

.heading {

position: absolute

top: 50%

left: 50%

transform: translate(-50%, -50%)

text-align: center

/* margin-top:250px*/

line-height: 60px

color: #ffffff

}

.heading h2 {

font-size: 60px

font-weight: normal

font-weight: 700

height: 140px

line-height: 80px

}

.heading h3 {

font-size: 28px

font-weight: 700

text-shadow: -1px -1px 5px rgba(0, 0, 0, 0.33)

}

.heading h5 {

font-size: 14px

}

.countdown {

position: absolute

top: 50%

left: 50%

transform: translate(-50%, -50%)

text-align: center

margin-top: 210px

line-height: 48px

}

.styled div span {

display: block

font-size: 16px

margin-top: 0

font-weight: normal

text-align: center

background: rgba(255, 255, 255, 0.06)

color: #fff

margin: 0 9px 8px 9px

height: 28px

line-height: 28px

}

.styled div {

display: inline-block

margin-left: 10px

font-size: 30px

font-weight: normal

text-align: center

height: 100px

text-shadow: none

vertical-align: middle

color: #f44336

margin: 10px 4px

height: auto

width: 112px

border: 1px dashed rgba(255, 255, 255, 0.46)

}

.copyrights {

position: absolute

top: 50%

left: 50%

transform: translate(-50%, -50%)

margin-top: 310px

font-size: 14px

color: #f44336

text-align: center

opacity: 0.6

}

登录后复制

三、精彩专栏

看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。

这样的有几种写法，一个就是发送请求给后台，传的数据是邮箱，然后获取用户名，域名，顶级域名，然后渲染到页面上，但是这得后台配合，第二个就是自己声明假的数据，就是一个数组，里面有多个对象,比如：

<input type="text" placeholder="请输入邮箱">

<button>开始分析</button>

<div>

用户名:<span class="username"></span></br>

域名:<span class="domain"></span></br>

顶级域名:<span class="top-domain"></span>

</div>

<script type="text/javascript">

var arr = [{email:"xx@163.com",username:"zhangsan",domain:"hao123",topDomain:".com"},{email:"yy@qq.com",username:"lisi",domain:"baidu",topDomain:".com"},{email:"zz@msn.com",username:"wangwu",domain:"taobao",topDomain:".com"}]

var inp = document.getElementsByTagName("input")[0]

var btn = document.getElementsByTagName("button")[0]

var username = document.getElementsByClassName("username")[0]

var domain = document.getElementsByClassName("domain")[0]

var topDomain = document.getElementsByClassName("top-domain")[0]

btn.onclick = function() {

var val = inp.value

username.textContent = ""

domain.textContent = ""

topDomain.textContent = ""

for (var i=0i<arr.lengthi++) {

if (val == arr[i].email) {

username.textContent = arr[i].username

domain.textContent = arr[i].domain

topDomain.textContent = arr[i].topDomain

}

}

}

</script>

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1、是一种解释性脚本语言（代码不进行预编译）。

2、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

3、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

4、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。