const changeFormatToRussian = (num: string): string =>
num.replace(/^[0-9]/, '+7').replace(/[^+\d]/g, '');
我的函数格式化一个数字，但是在开头的 + 字符之后，您可以输入任何数字。那些。+3，+4不是+7代替，而是2,3,4代替。
body {
margin: 0;
padding: 0;
}
main.gallery {
height: 100vh;
overflow: hidden;
}
.gallery > .gallery__list {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-template-rows: repeat(6, 140px);
}
.gallery > .gallery__list > li:nth-child(4n) {
grid-column: span 2;
grid-row: span 2;
}
.gallery > .gallery__list > li:nth-child(8n) {
grid-column: span 2;
grid-row: span 2;
}
.gallery > .gallery__list > li > figure {
height: 100%;
width: 100%;
margin: 0;
border: 10px solid transparent;
}
.gallery > .gallery__list > li > figure:hover {
border: 10px solid green;
}
.gallery > .gallery__list > li > figure > img {
width: 100%;
height: 100%;
object-fit: cover;
}
ol,
ul {
list-style: none;
padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Static Template</title>
</head>
<body>
<main class="gallery">
<ul class="gallery__list">
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img
src="./img/1.jpg"
alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms"
/>
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="A first look at dunes" />
</figure>
</li>
<li>
<figure>
<img
src="./img/4.jpg"
alt="K2-138 6 Planets Artwork (Artist's Illustration) "
/>
</figure>
</li>
<li>
<figure>
<img src="./img/3.jpg" alt="Small Prominences" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Ezinu Crater" />
</figure>
</li>
<li>
<figure>
<img src="./img/3.jpg" alt="Polar Ice" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="Jupiter" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
<li>
<figure>
<img
src="./img/3.jpg"
alt="South Equatorial Belt Brown Barge Close-up"
/>
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="Jupiter" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="Jupiter" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img
src="./img/3.jpg"
alt="South Equatorial Belt Brown Barge Close-up"
/>
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="Jupiter" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
<li>
<figure>
<img
src="./img/1.jpg"
alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms"
/>
</figure>
</li>
<li>
<figure>
<img
src="./img/3.jpg"
alt="South Equatorial Belt Brown Barge Close-up"
/>
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="Jupiter" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img
src="./img/3.jpg"
alt="South Equatorial Belt Brown Barge Close-up"
/>
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" />
</figure>
</li>
<li>
<figure>
<img src="./img/3.jpg" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
<li>
<figure>
<img src="./img/3.jpg" />
</figure>
</li>
<li>
<figure>
<img src="./img/2.jpg" alt="A first look at dunes" />
</figure>
</li>
<li>
<figure>
<img src="./img/4.jpg" alt="Star Gaia 17pbi Seen by Spitzer" />
</figure>
</li>
<li>
<figure>
<img src="./img/3.jpg" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" />
</figure>
</li>
<li>
<figure>
<img src="./img/1.jpg" alt="Another Cloudy Day" />
</figure>
</li>
</ul>
</main>
</body>
</html>
你怎么能用网格做到这一点？
如何在单击按钮时在不更改 url 的情况下完全重绘组件并同时传输数据。喜欢 -
function handler (content) {
return <Component content={content}/>
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/favicon.ico">
<title>Отправка формы на почту </title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<style>
form {
background-color: #f9f9f9;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form action="mail.php" method="POST">
<legend>Заголовок формы</legend>
<div class="form-group">
<label for="">Введите ваше имя</label>
<input type="text" class="form-control" id="" name="user_name" placeholder="Например, Иван">
</div>
<div class="form-group">
<label for="">Введите номер телефона</label>
<input type="text" class="form-control" id="" name="user_phone" placeholder="+7 (999) 99 99 999">
</div>
<div class="form-group">
<label for="">Введите email</label>
<input type="text" class="form-control" id="" name="user_email" placeholder="mail@mail.ru">
</div>
<button type="submit" class="btn btn-primary">Отправить форму</button>
</form>
</div><!-- .col-sm-4 -->
</div> <!-- .row -->
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<?php
require_once('phpmailer/PHPMailerAutoload.php');
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';
$name = $_POST['user_name'];
$phone = $_POST['user_phone'];
$email = $_POST['user_email'];
$mail->isSMTP();
$mail->Host = 'smtp.yandex.ru';
$mail->Port = 25;
$mail->Username = 'mrkrojlik@yandex.ru';
$mail->Password = '';
$mail->addAddress('mrkrojlik@yandex.ru');
$mail->isHTML(true);
$mail->SMTPSecure = 'ssl';
$mail->Subject = 'Заявка с тестового сайта';
$mail->Body = '' .$name . ' оставил заявку, его телефон ' .$phone. '<br>Почта этого пользователя: ' .$email;
$mail->AltBody = '';
$mail->SMTPDebug = 2;
$mail->setFrom('mrkrojlik@yandex.ru', 'Сайт site.ru');
if(!$mail->send()) {
echo $mail->ErrorInfo;
} else {
header('location: thank-you.html');
}
?>
错误：2020-01-11 00:45:05 SMTP 错误：无法连接到服务器：(0) 2020-01-11 00:45:05 SMTP connect() 失败。https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting SMTP connect() 失败。https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting
jQuery(document).ready(function($) {
$(".ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg) {
if(msg == 'OK') {
result = '<p>Ваш заказ принят</p>';
$(".fields").hide();
} else {
result = msg;
}
$('.note').html(result);
}
});
return false;
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Заголовок</title>
</head>
<body>
<footer>
<h2>Контактная форма</h2>
<div class="form-container">
<div class="note"></div>
<div class="fields">
<form class="ajax-contact-form" action="">
<p><input type="text" name="name" value="" placeholder="Имя"></p>
<div class="row">
<div class="col"><input type="tel" name="tel" value="" placeholder="Телефон"></div>
<div class="col"><input type="email" name="email" value="" placeholder="E-mail"></div>
</div>
<label>Текст</label>
<textarea name="message" cols="40" rows="3"></textarea>
<input type="submit" name="submit" class="form-container__btn" value="Отправить">
</form>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="contactform.js"></script>
</body>
</html>
<?php
$post = (!empty($_POST)) ? true : false;
if($post)
{
$email = trim($_POST['email']);
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$tel = htmlspecialchars($_POST["tel"]);
$error = '';
if(!$name)
{
$error .= 'Пожалуйста введите ваше имя<br />';
}
// Проверка телефона
function ValidateTel($valueTel)
{
$regexTel = "/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true : false;
}
if(!$email)
{
$error .= "Пожалуйста введите email<br />";
}
if($email && !ValidateTel($email))
{
$error .= "Введите корректный email<br />";
}
if(!$error)
// (length)
if(!$message || strlen($message) < 1)
{
$error .= "Введите ваше сообщение<br />";
}
if(!$error)
{
$name_tema = "=?utf-8?b?". base64_encode($name) ."?=";
$subject ="Новая заявка с сайта BeActive.ru";
$subject1 = "=?utf-8?b?". base64_encode($subject) ."?=";
/*
$message ="\n\nСообщение: ".$message."\n\nИмя: " .$name."\n\nТелефон: ".$tel."\n\n";
*/
$message1 ="\n\nИмя: ".$name."\n\nТелефон: " .$tel."\n\nE-mail: " .$email."\n\nСообщение: ".$message."\n\n";
$header = "Content-Type: text/plain; charset=utf-8\n";
$header .= "From: Новая заявка <berestovayamaria@gmail.com>\n\n";
$mail = mail("berestovayamaria@gmail.com", $subject1, iconv ('utf-8', 'windows-1251', $message1), iconv ('utf-8', 'windows-1251', $header));
if($mail)
{
echo 'OK';
}
}
else
{
echo '<div class="notification_error">'.$error.'</div>';
}
}
?>
如何在按钮单击时更改背景图像？我只设法改变了背景颜色。我是 js 和一般网络的新手。
var colorArray = ["#0DC2FF", "#007DE8", "#0E5DFF", "#0C28EB", "#1600FF"];
var i = 0;
function changeColor(){
document.body.style.background = colorArray[i];
i++;
if( i >= colorArray.length) {
i = 0;
}
}.page {
width: 100%;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background: transparent;
border: 1px solid #000;
font-family: 'Montserrat', sans-serif;
color: #000;
font-weight: 900;
text-transform: uppercase;
padding: 1rem 3rem;
margin: 0 auto;
}
.button:hover {
background: #000;
color: #fff;
}
.button,
.button:active,
.button:focus {
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>JavaScript</title>
</head>
<body>
<div class="page">
<button class="button" onclick="changeColor();">Click</button>
</div>
<script src="app.js"></script>
</body>
</html>
如何对齐按钮，使其像第二张图片中一样？
body {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 2rem;
color: #fff;
background: #222 url("../Images/bg.png") center no-repeat;
-webkit-font-smoothing: antialiased;
}
.btn {
margin-left: 1.33rem;
text-decoration: none;
cursor: pointer;
color: #fff;
background: transparent;
font-size: 1.06rem;
padding: 1rem 4rem;
border: 1px solid #F80759;
border-radius: 5px;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Price */
.price__item:hover {
border: 1px solid #12C2E9;
}
.price__item:hover .price__count {
background: linear-gradient(to right, #E100FF, #F80759);
}
.price__item:hover .btn--price {
background: linear-gradient(to right, #E100FF, #F80759);
}
.price__inner {
text-align: center;
}
.price__title {
font-size: 1.2rem;
font-weight: 600;
color: #12C2E9;
margin-bottom: 0.73rem;
}
.price__suptitle {
font-size: 2rem;
color: #fff;
font-weight: 700;
}
.price__suptitle:after {
content: "";
display: block;
width: 4rem;
height: 0.3rem;
margin: 3.33rem auto;
background: linear-gradient(to right, #E100FF, #F80759);
}
.price__price {
display: flex;
justify-content: center;
}
.price__item {
margin: 2rem;
border: 2px solid #222;
}
.price__money {
margin: 1.5rem 6.66rem;
font-size: 1.6rem;
}
.price__span {
font-weight: 700;
font-size: 3.2rem;
}
.price__count {
font-size: 1.2rem;
background-color: #222;
padding: 15px 0;
width: 100%;
}
.price__text {
font-size: 0.93rem;
margin: 2rem 0 0 0;
}
.price__more {
color: #F80759;
}
.btn--price {
margin: 2rem;
border: 1px solid #222;
}
.btn--price:hover {
background: none;
}<div class="price">
<div class="container">
<div class="price__inner">
<h2 class="price__title">ВЫБИРАЙТЕ</h2>
<h1 class="price__suptitle">НАШИ УСЛУГИ</h1>
<div class="price__price">
<div class="price__item">
<div class="price__money">от<span class="price__span">1000</span>₽</div>
<div class="price__count">Создание игр</div>
<div class="price__text">
<p>Создание 2D игр на движке</p>
<p>Unity и языке</p>
<p>программирования JavaScript</p>
<p>под любые платформы и</p>
<p>даже браузер</p>
</div>
<button class="btn btn--price">Заказать игру</button>
</div>
<div class="price__item">
<div class="price__money">от<span class="price__span">500</span>₽</div>
<div class="price__count">Разработка и доработка сайтов</div>
<div class="price__text">
<p>Сайты услуг</p>
<p>Лендинги</p>
<p>Визитки</p>
<p>Информационные сайты</p>
<p>Тематические сайты</p>
<p>Блоги</p>
<div class="price__more">И многое другое</div>
</div>
<button class="btn btn--price">Заказать сайт</button>
</div>
<div class="price__item">
<div class="price__money">от<span class="price__span">100</span>₽</div>
<div class="price__count">Дизайн</div>
<div class="price__text">
<p>Логотипы</p>
<p>Дизайн сайта</p>
<p>Работа с фото</p>
<p>Персонажи игр</p>
<p>Дизайн интерфейса игр</p>
<div class="price__more">И многое другое</div>
</div>
<button class="btn btn--price">Заказать дизайн</button>
</div>
</div> <!-- ./price__price -->
</div> <!-- ./price__inner -->
</div> <!-- ./container -->
</div> <!-- ./price -->/* Reviews */
.reviews {
padding: 4.66rem 0;
background: #222 url("images/Reviews/reviews-bg.jpg") center no-repeat;
}
.reviews__inner {
text-align: center;
}
.reviews__title {
font-size: 1.2rem;
font-weight: 600;
color: #12C2E9;
margin-bottom: 0.73rem;
}
.reviews__suptitle {
font-size: 2rem;
color: #fff;
font-weight: 700;
}
.reviews__suptitle:after {
content: "";
display: block;
width: 4rem;
height: 0.3rem;
margin: 3.33rem auto;
background: linear-gradient(to right, #E100FF, #F80759);
}
.reviews__reviews {
display: flex;
}
.reviews__item {
display: flex;
background-color: #222;
margin: 0 2rem;
}
.reviews__content {
text-align: left;
margin: 0 1.5rem;
}
.reviews__name {
font-size: 1.2rem;
font-weight: 600;
text-transform: capitalize;
color: #12C2E9;
margin-bottom: 0.46rem;
margin-top: 2.13rem;
}
.reviews__prof {
font-size: 0.8rem;
margin-bottom: 2.33rem;
}<div class="reviews">
<div class="container">
<div class="reviews__inner">
<h2 class="reviews__title">Reviews</h2>
<h1 class="reviews__suptitle">WHAT OUR CLIENTS SAY</h1>
<div class="reviews__reviews">
<div class="reviews__item">
<div class="reviews__photo">
<img src="images/Reviews/2.png" alt="">
</div>
<div class="reviews__content">
<div class="reviews__name">Rebecca Morrison</div>
<div class="reviews__prof">Social Worker</div>
<div class="reviews__text">
<p>Curabitur interdum nulla ligula, ac iaculis est venon.
Quisque auctor, ex id posuere aliquam, lorem mauris venenatis sem, eu facilisis magna nibh. Praesent laoreet leo diam, ut suscipit purus malesuada laoreet. Aliquam erat volutpat.</p>
</div>
<div class="reviews__rating">★★★★★</div>
</div>
</div>
<div class="reviews__item">
<div class="reviews__photo">
<img src="images/Reviews/1.png" alt="">
</div>
<div class="reviews__content">
<div class="reviews__name">Daniel Bllomberg</div>
<div class="reviews__prof">Salesman</div>
<div class="reviews__text">
<p>Donec nec interdum turpis. Donec faucibus facilisis enim, ut fringilla urna elementum non. Mauris vel mauris ac tellus feugiat maximus. Sed augue enim, lacinia non dui ut, mollis vulputate felis. Vivamus consequat bibendum ullamcorper.</p>
</div>
<div class="reviews__rating">★★★★☆</div>
</div>
</div>
</div> <!-- ./reviews__reviews -->
</div> <!-- ./reviews__inner -->
</div> <!-- ./container -->
</div> <!-- ./reviews -->评论块向下扩展，但我希望它们的长度增加。
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
/* Team */
.team {
margin-bottom: 100px;
}
.team__inner {
text-align: center;
}
.team__title {
font-size: 1.2rem;
font-weight: 600;
color: #12C2E9;
margin-bottom: 11.2px;
}
.team__suptitle {
font-size: 2rem;
color: #fff;
font-weight: 700;
}
.team__suptitle:after {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 50px auto;
background: linear-gradient(to right, #E100FF, #F80759);
}
.team__team {
display: flex;
justify-content: center;
}
.team__item {
position: relative;
margin-left: 20px;
}
.team__item:hover .team__photo-about {
display: block;
}
.team__item:first-child {
margin-left: 0;
}
.team__photo {
max-width: 100%;
}
.team__photo-about {
display: none;
margin-bottom: 22px;
position: absolute;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
}
.team__name {
font-size: 1.2rem;
font-weight: 600;
color: #fff;
}
.team__prof {
font-size: 0.8rem;
color: #12C2E9;
}<div class="team">
<div class="container">
<div class="team__inner">
<h2 class="team__title">Meet</h2>
<h1 class="team__suptitle">OUR TRAINERS</h1>
<div class="team__team">
<div class="team__item">
<div class="team__photo">
<img src="images/Team/Trainer%201.jpg" alt="">
</div>
<div class="team__photo-about">
<h1 class="team__name">Letty Adams</h1>
<h2 class="team__prof">Fitness Trainer</h2>
</div>
</div>
<div class="team__item">
<div class="team__photo">
<img src="images/Team/Trainer%202.jpg" alt="">
</div>
<div class="team__photo-about">
<h1 class="team__name">Letty Adams</h1>
<h2 class="team__prof">Fitness Trainer</h2>
</div>
</div>
<div class="team__item">
<div class="team__photo">
<img src="images/Team/Trainer%203.jpg" alt="">
</div>
<div class="team__photo-about">
<h1 class="team__name">Letty Adams</h1>
<h2 class="team__prof">Fitness Trainer</h2>
</div>
</div>
<div class="team__item">
<div class="team__photo">
<img src="images/Team/Trainer%204.jpg" alt="">
</div>
<div class="team__photo-about">
<h1 class="team__name">Letty Adams</h1>
<h2 class="team__prof">Fitness Trainer</h2>
</div>
</div>
<div class="team__item">
<div class="team__photo">
<img src="images/Team/Trainer%205.jpg" alt="">
</div>
<div class="team__photo-about">
<h1 class="team__name">Letty Adams</h1>
<h2 class="team__prof">Fitness Trainer</h2>
</div>
</div>
</div> <!-- ./team__team -->
</div> <!-- ./team__inner -->
</div> <!-- ./container -->
</div> <!-- ./team -->
块爬出容器，如何修复？在“了解更多”字样之后，团队块移出容器。