倒计时以及简易留言功能

目录

前言

一、效果图及在线访问地址

二、思路

（一）倒计时                     

（二）留言功能

（三）准备工作

总结

---

前言

       通过简单的页面显示当前时间距离目标时间的差值，并实现简单的留言功能，最后部署到云服务器能够访问。若看完本篇文章之后有问题可以评论区交流或私信。

---

一、效果图及在线访问地址

 

Github源码地址：沈北漂

访问地址：到此一游

---

二、思路

       通过盒子布局，将页面分为倒计时和轮播图两部分，左边通过js显示时间，右边是通过css实现的轮播图。   

（一）倒计时                     

需要注意的地方：（1）布局分布，每个部分占比  

                             （2）轮播图通过css实现，注意时间，图片方向的设置，图片移动的距离                                        根据图片自身大小决定，每次移动一张图片的距离

                             （3） 字体颜色的设置 

                             （4）js实现时间显示时要注意格式的转换                     

  HTML部分主要代码：

    <!-- 一个字  一个倒计时 一个图片 -->
    <div class="welcome">
        <!-- 字 -->
        <div class="words">
            <!-- span标签设置字体颜色 -->
        <h2 id="h-1">Wel<span id="s-1">come</span> to <span id="s-2">2023</span> !</h2>
        <!-- <br> -->
        <h2 id="h-2">Let<span id="s-3">'s co</span>untd<span id="s-4">own</span>!</h2>
        <!-- 图标 -->
        <i class="iconfont"></i>
        </div>

        <!-- 倒计时 -->
        <div class="time">
            <!-- 日 时 分 秒 -->
            <div class="one">
                <div class="w days"></div>
                <i>Days</i>
            </div>
            <div class="one">
                <div class="w hours"></div>
                <i>Hours</i>
            </div>
            <div class="one">
                <div class="w minutes"></div>
                <i>Minutes</i>
            </div>
            <div class="one">
                <div class="w seconds"></div>
            <i>Seconds</i>
            </div>     
        </div> 

        <!-- 留言区 -->
        <div class="comment"> 
            <h4><a href="./html/comment.html">留  言  区 </a></h4>
        </div>
       
    </div>

    <!-- 轮播图 通过css实现，自动轮播，没有点击切换功能-->
    <div class="wo">
        <div class="container">
            <img src="./images/团圆.svg" alt=""/>
        </div>
    </div>

  css关键帧部分：

.container {
    animation: pictures 20s infinite linear;
    font-size: 0px;
}
/* 关键帧 */
@keyframes pictures {
    0%,20%{
        margin-left:0px;
    }
    20%,40%{
        margin-left:-800px;
    }
    40%,60%{
        margin-left:-1600px;
    }
    60%,80%{
        margin-left:-2400px;
    }
    80%,100%{
        margin-left:-3200px;
    }
    100% {
        margin-left: 0px;
    }
}

  js实现时间显示功能：

// 倒计时
const countDownTimer = () =>{
    // 设置目标时间
    const baseDate = new Date("January 1, 2023 00:00:00").getTime();  
    //获取目前时间  getTime()返回毫秒数
    const currentDate = new Date().getTime();
    //差值
    const timeDiff = baseDate-currentDate;
    
    // 格式转换 换成毫秒 
    const second = 1000;
    const minute = second * 60;
    const hour = minute * 60;
    const day = hour * 24;

    //计算差值 先求余数 再求模
    const dayText = Math.floor(timeDiff / day);
    const hourText =  Math.floor((timeDiff % day)/hour);
    const minuteText = Math.floor((timeDiff % hour)/minute);
    const secondText = Math.floor((timeDiff % minute)/second);
    
    document.querySelector('.days').innerHTML = dayText;
    document.querySelector('.hours').innerHTML = hourText;
    document.querySelector('.minutes').innerHTML = minuteText;
    document.querySelector('.seconds').innerHTML = secondText;

};

//调用函数 隔1秒执行
setInterval(countDownTimer,1000);

（二）留言功能

需要注意的地方：（1）布局分布，每个部分占比  

                             （2）css部分主要是盒子阴影，定位布局

                             （3）留言内容通过dom元素树动态显示

                             （4）留言内容提交时的内容完整性的判断  

                             （5）js获取元素内容时要注意获取的是整个对象，具体的值要通过.value                                        取得，判断内容后若内容不全则清空重新输入所有已填写的信息

留言功能实现思路

1.获取用户姓名与留言内容

2.判断值是否为空，如果为空，则提示信息

3.绑定提交按钮的点击事件

4.获取姓名，留言内容以及当前系统时间，拼接成指定的html标签

5.将标签追加到留言表中

 HTML部分主要代码：

  <div class="box">
        <!-- 图片区 -->
        <div class="picture">
           <!-- 背景图片 -->

           <!-- 留言输入 -->
           <div class="user">
            <!-- <div class="form-group"> -->
                <ul>昵称：</ul>
                <input type="text" style="width:200px"id="userName"/>
            <!-- </div> -->
            <!-- <div class="form-group"> -->
                <ul>留言内容：</ul>
                <textarea style="width: 202px; height: 70px;" id="content"></textarea>
                <br>
                <button class="btn" id="sendBtn" onclick="showMessage()">到此一游</button> 
           <!-- </div> -->
          </div>
        </div>

        <!-- 展示区 -->
        <div class="mes-show" id="mes-shows">
              <!-- 时间 名字  内容 -->
            <div id="showing">
                <!-- 展示模板-->
                <!-- <div class="person">
                    <span id="write-date">October 12, 2016</span>
                    <h2 id="showName"><a href="#">name</a></h2>
                    <p id="comments">&nbsp;&nbsp;&nbsp;&nbsp; How two simple exercises changed my life?</p>
                </div> -->
            </div> 
            <div></div>
        </div>
        
    </div>

 css部分主要是针对展示区内容：

.picture {
    position: fixed;
    width: 32.8%;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    background: url(../images/背景.svg) no-repeat;
    background-size: 100% ;
    background-repeat: no-repeat;
    background-position: center center;
    /* 盒子阴影 */
    box-shadow: 10px 10px 10px #dce2eb,
                -10px -10px 10px  #f7f8f8;
}

.user {
    width: 132px;
    height: 332px;
    position: relative;
    left: 35%;
    top: 59%;
    background-color:transparent;
}

.mes-show {
    position: absolute;
    width: 62.8%;
    left: 37%;
    margin: 0;
}

button {
    width: 100px;
    height: 30px;
    margin-left: 40px;
    opacity: 0.7;
    border-radius: 15px;
    background-color: rgb(149, 165, 166);
}
button:hover{
    cursor: pointer;
    
    background-color: rgb(46, 204, 113);
}

#person {
    height: 110px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 35px;
    box-shadow: 10px 10px 10px #dce2eb;
    border-bottom: #e5e9f0 solid 3px;
}

#write-date {
    float: right;
    color: #698e97;
    margin-right: 30px;
}
a {
    color: #2f2f2f;
    text-decoration: none;
}
a:hover {
    font-size: 1.2em;
}

#comments {
    color: #4e5050;
}

 js部分是第一次实践：

// 发送留言
//获取信息 
var userName = document.getElementById('userName');
var comment = document.getElementById('content');
var showDate = formatDate();
var showing = document.getElementById('showing');

function showMessage() {
           //验证信息
           if (userName.value !=="" && comment.value !== "") {
                  // 展示信息
                  createDom();
            } else {
                  alert("请输入完整信息！");
            }
            // 清空输入框
            forBlank();
} 

//展示  创建新元素并添加到dom树
function createDom() {
      //创建元素
      var container = document.createElement("div");
      container.id = "person";
      var timeS =document.createElement("span");
      timeS.id = "write-date";
      timeS.innerHTML = showDate;
      var titleH = document.createElement("h2");
      titleH.id = "showName";
      titleH.innerHTML = userName.value;
      var a = document.createElement("a");
      a.href = "#";
      // a.innerHTML = userName.value;
      var messageS = document.createElement("p");
      messageS.id = "comments";
      messageS.innerHTML = comment.value;

      //添加元素
      showing.appendChild(container);
      container.appendChild(titleH);
      container.appendChild(timeS);
      timeS.appendChild(a);
      container.appendChild(messageS);
}     

// 清空输入框
function forBlank() {
      userName.value = "";
      comment.value = "";
      document.getElementById('userName').innerHTML = userName.value;
      document.getElementById('content').innerHTML = comment.value;
}
//格式化时间
function formatDate(){
      //获取系统当前时间
      var  date = new  Date();
      return  date;
}

（三）准备工作

（1）图片是通过阿里云字体图标库下载的矢量图

（2）网页图标通过阿里云字体图标库下载的图标，然后通过在线转换工具比特虫转换成 .ico 格式

（3）准备一台云服务器以及相关工具软件

       通过部署到与服务器上，能够让人访问，这一部分我初次涉及，通过别人的教程以及自己百度解决在这过程中遇到的问题。

服务器配置安全组开放端口，注意是出入两个方向都要配置

---

 通过FileZilla与服务器进行文件传输，连接服务器成功后上传文件到指定位置

 通过Xshell连接服务器，部署tomcat，通过IP地址访问

 服务器部署相关教程链接：阿里云服务器 部署tomcat服务器，生成一个自己的网页

                                            从零开始用阿里云服务器搭建网页

                                            Linux环境中配置了tomcat后在浏览器中无法访问的解决办法

                                            阿里ECS云服务器买来之后必做的几个操作

                                            Linux常用基本命令大全

                                            FileZilla使用教程

---

总结

        这一次的练手相当于是我目前基础阶段的一次总结，并且涉及到了一部分服务器的知识，拓宽了我的知识技能面，受益匪浅。在整个过程中，出现问题和解决问题是让我进步最快的，实践出真知，这也为我之后的学习提供了一定的方向。