“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

前言

大家好，我是不吃鱼d猫，春节即将来临，大家有没有给朋友们写贺卡的习惯，作为前端的小小白，给大家用css+js实现一张电子贺卡，给你的小朋友们送上最好的祝福吧。

电子贺卡生成流程

首页详情

首先在生成电子贺卡页面生成写下祝福语，如下图所示，中间的祝福语框其实是随机的，点击抽取才暂停，详情可见上一篇文章，

点击生成按钮：会将拿到的数据传到我们的数据库中了，用ajax的get请求方式发送。这里我们用阿帕奇数据库管理系统

点击查看按钮：会跳转到我们的电子贺卡列表的页面，如下图所示

列表详情

微信图片_20220121000959.png

这里的列表页是拿到数据库中的值俩进行渲染的，也是用ajax来发送请求，拿到数据库的数据。数据库中有多少条数据，我们也就渲染多少条数据。哈哈哈，样式写的不好看。我们在点击列表的时候，跳转到对应的贺卡。

贺卡内容

如何实现

css部分

css部分也不多说，里面注意的是卡片的翻转，需要创造3D空间 transform-style: preserve-3d;输入移入后，卡片沿着Y轴旋转transform: rotateY()，这里需要注意的是，旋转的位置要确认transform-origin。当然需要加上过渡属性transition，这样才有动画的效果。

js部分

我们这里还是主要运用了点击事件click和移入onmouseover移出onmouseout事件。

移入贺卡（移入事件），贺卡翻开

 oBoxs.onmouseover = () => {
            oBox.style.cssText = 'transform: rotateY(-180deg)'
        }
复制代码

移出贺卡（移出事件），贺卡合上

 oBoxs.onmouseout = () => {
            oBox.style.cssText = 'transform: rotateY(0deg)'
        }
复制代码

最关键的点击事件，点击生成按钮，发送数据到数据库中，在这里我们通过get的请求方式。原生js中存在一个对象用于在后台与服务器交换数据XMLHttpRequest，我们在用的时候，只需要实例化一下就可以了，就是new一下

//mousedown为鼠标抬起事件
  oRes.onmousedown = () => {
            oRes.style.cssText = 'bottom:51px'
            let name = document.querySelector('.inp1').value
            let name_1 = document.querySelector('.inp2').value;
            let sele = document.querySelector('select').value;
            let cont = oCont.innerHTML;
//判断输入不能为空
            if (name == "" || name_1 == "" || sele == "" || cont == "") {
                alert("输入不能为空哦")
            } else {
                console.log(name, name_1, sele, cont);
                //发送数据
                let xhr = new XMLHttpRequest();
                xhr.open("get", "./card.php?name=" + name + "&name_1=" + name_1 + "&cont=" + cont + "&sele=" + sele, true);
                xhr.onload = function() {
                    // console.log(JSON.parse(xhr.responseText));
                }
                xhr.send();
                alert("已经成功添加，请点击查看")
            }

        }
复制代码

在js中就是发送数据，请求数据进行渲染，不过为了页面优化问题，还是尽量减少dom操作。因为重建dom树，渲染树也会重新渲染。影响页面的响应速度。

php部分

php作为一门后端语言，咱们作为前端的小小白，还是需要了解一下，基本的增删改查的sql语句还是要记住的。

将数据存储到数据库中

通过php执行sql语句，存储数据

<?php
$name=$_GET['name'];
$name_1=$_GET['name_1'];
$cont=$_GET['cont'];
$sele=$_GET['sele'];

//通过php连接数据库
$link=mysqli_connect("localhost","root","root","2114");
//写sql语句
$sql="INSERT INTO card(name,name_1,cont,sele) VALUES('{$name}','{$name_1}','{$cont}','{$sele}')";
//通过php执行sql
$res=mysqli_query($link,$sql);

?>
复制代码

查询数据库中所有的数据

如下所示。电子贺卡的表明为card，需要将查询得到的结果集转成JSON字符串给前端。得到数据后，再将JSON字符串转成对象或者数组JSON.parse(xhr.responseText)。

//连接数据库
$link=mysqli_connect("localhost","root","root","2114");
//sql
$sql="SELECT * FROM card";
//执行sql
$res=mysqli_query($link,$sql);
$arr=[];
while($one=mysqli_fetch_assoc($res)){
    $arr[]=$one;
}
echo json_encode($arr);
复制代码

还是那句话，再追求功能的同时，大家不要忘记基础的css部分，起码写页面能游刃有余。

虎年来啦，来给你的小朋友们生成‘电子贺卡’吧。

前言