Web实验四：留言板

编程刘亦菲是我瞎说的，好好努力少女！

已于 2024-04-30 22:19:00 修改

阅读量70

点赞数 3

分类专栏： Web作业文章标签：前端 css

于 2024-04-30 22:18:35 首次发布

本文链接：https://blog.csdn.net/landexiangmz/article/details/138358340

版权

Web作业专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图：

（我们老师要求比较奇特，要在下面加一个计时器。你们可以自行修改）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>


    <div class="container">
        <div class="comment-box">
             <div class="comment-form">
                <div class="header">新年好！留言板</div>
                <hr>
                <div>
                    <textarea name="" id="comment" cols="70" rows="5" placeholder="输入您的留言"></textarea>
                </div>
                <button id="btn-submit">留言</button>
            </div>
            <div>
                <h4 class="header">留言列表</h4>
               
                <ul id="comments">
                  
                    
                </ul>
            </div>
        </div>
    </div>
    <form name="form1" class="clock">
        <input type="button" id="showshow" value="showtime" onclick="get_time()" />
        <input type="text" name="time" id="time"/>
        <input type="button"  id = "stopstop" value="stoptime" onclick="clearTimeout(timeID)" />
    </form>
    <script src="./script.js"></script>
</body>
</html>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,600);

body {
    font-family: "Roboto", sans-serif;
    background: rgba(113, 182, 184, 0.97);
    background-image: url(images/01.jpg);
    background-size: cover;
    height: 100%;
    margin-bottom: 50px;
    align-items: center;
}

.container {
    display: flex;
    justify-content: center;
}

.comment-box {
    /* background: #fff; */
    margin-top: 50px;
    padding-top: 5px;
    border-radius: 5px;
    display: flex;
    background: linear-gradient(#f69191,#f8e8b7);
    flex-direction: column;
    width: 75%;
}

button {
    color: #fff;
    float: right;
    background: #b3382aeb;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 26px;
    padding: 12px 20px 12px 20px;
    border-radius: 5px;
    transition: all .2s ease;
}

button:hover {
    background: #672417e7;
}
strong{
    float: right;
}

.header {
    margin: 15px 20px;
    color: #1c1a1a;
    text-align: center;
    font-size: 27px;
    font-weight: 600;
}

textarea {
    margin: 5px 16px;
    outline: none;
    background: linear-gradient(#ffe8e8,#fff9ea);
    border: 0;
    padding: 10px;
    border-radius: 5px;
    width: 94%;
    resize: none;
}

h4 {
    margin: 10px 30px;
}

hr {
    border: 0;
    /* padding-top: 80px; */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

span.date {
    font-weight: 300;
    font-size: 12px;
    float: right;
    margin-right: 10px;
}

.comment-box p {
    margin: 0 30px 15px;
    font-weight: 300;
    color: #333;
    background: #dad1d1ee;
    padding: 30px 15px;
    word-wrap: break-word;
}

@keyframes A{
    to{
        opacity: 2;
    }
}

li {
    /* background: linear-gradient(#f8ffc8,#ffe0c0); */
    /* height: 50px; */
    animation: A 10s ease forwards;
    position: relative;
    padding-left: 4px;
    padding-top: 1px;
}

a {
    float: right;
    margin-right: 20px;
}

.clock {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

input {
    height: 30px;
}

#showshow {
    width: 75px;
    height: 30px;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    color: rgba(12, 12, 12, 0.915);
    background-color:#b3382aeb;
    border: 1px solid rgb(86, 86, 86);
}

button:hover{
    background-color:#672417e7 ;
}
#stopstop {
    width: 75px;
    height: 30px;
    margin-top: 2px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    color: rgba(12, 12, 12, 0.915);
    background-color: #b3382aeb;
    border: 1px solid rgb(86, 86, 86);
}

#time {
    width: 80px;
    border-radius: 4px;
    text-align: center;
}

script.js

var btn = document.querySelector('#btn-submit');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
    if (text.value == '') {
        alert('您没有输入内容');
        return false;
    }
    else {
        //1.创建元素
        var li = document.createElement('li');
        //2.添加元素  innerhtml能够识别html标签

        //保证最新的留言在第一个

        li.innerHTML = text.value + "<a href='javascript:;'>[删除]</a>" + "<hr>";
        ul.insertBefore(li, ul.children[0]);
        text.value = '';//将大文本框中已发布的留言删除
        //删除元素 删除的是当前链接的父亲
        var a = document.querySelectorAll('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                //node.removeChild(child) 删除的是li是当前a所在的li
                //li 是 this.parengNode
                ul.removeChild(this.parentNode);
            }
        }
    }
}

function initsay() {
    var li = document.createElement('li');
    li.innerHTML = "新年快乐！！！" + "<a href='javascript:;'>[删除]</a>" + "<hr>";
    ul.insertBefore(li, ul.children[0]);
    var a = document.querySelectorAll('a');
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function () {
            ul.removeChild(this.parentNode);
        }
    }
}


var flag = true;//判断时间是否停止
if (flag) {
    var t = window.setInterval("showTime()", 1000);
}
function startTime() {
    if (!flag) {
        flag = true;
        t = window.setInterval("showTime()", 1000);
    }
}
function stopTime() {
    if (flag) {
        flag = false;
        window.clearInterval(t);
    }
}
function get_time() {
    var today = new Date();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var sec = today.getSeconds();
    var timestr = "";
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    sec = sec < 10 ? "0" + sec : sec;
    timestr = hour + ":" + minute + ":" + sec;
    document.form1.time.value = timestr;
    timeID = setTimeout("get_time()", 1000);
}


var snowmax = 50
var snowcolor = ["#FFDA65", "#00AADD", "#aaaacc", "#a0c4ff", "#ccccdd", "#caffbf", "#bbf7f9", "#ffc6ff", "#ffd6a5"]
var snowtype = ["Times", "Arial", "Verdana"]
var snowletter = "❉"
var sinkspeed = 0.8
var snowmaxsize = 35
var snowminsize = 10
var snowingzone = 1


var snow = []
var marginbottom
var marginright
var timer
var i_snow = 0
var x_mv = []
var crds = []
var lftrght = []
var browserinfos = navigator.userAgent
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/)
var ns6 = document.getElementById && !document.all
var opera = browserinfos.match(/Opera/)
var browserok = ie5 || ns6 || opera

function randommaker(range) {
    rand = Math.floor(range * Math.random())
    return rand
}

function initsnow() {
    if (ie5 || opera) {
        marginbottom = document.body.scrollHeight
        marginright = document.body.clientWidth
    } else if (ns6) {
        marginbottom = document.body.scrollHeight + 300
        marginright = window.innerWidth
    }
    var snowsizerange = snowmaxsize - snowminsize

    for (var i = 0; i <= snowmax; i++) {
        crds[i] = 0;
        lftrght[i] = Math.random() * 15;
        x_mv[i] = 0.03 + Math.random() / 10;
        snow[i] = document.getElementById("s" + i)
        snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]
        snow[i].size = randommaker(snowsizerange) + snowminsize
        snow[i].style.fontSize = snow[i].size + 'px';
        snow[i].style.color = '#ffffff'
        snow[i].style.zIndex = 1000
        snow[i].sink = sinkspeed * snow[i].size / 5
        if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
        if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
        if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
        if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
        snow[i].posy = randommaker(2 * marginbottom)
        // snow[i].posy = randommaker(2*marginbottom-marginbottom-2*snow[i].size)
        snow[i].style.left = snow[i].posx + 'px';
        snow[i].style.top = snow[i].posy + 'px';
    }
    movesnow()
}

function movesnow() {
    for (var i = 0; i <= snowmax; i++) {
        crds[i] += x_mv[i];
        snow[i].posy += snow[i].sink
        snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px';
        snow[i].style.top = snow[i].posy + 'px';

        if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
            if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
            if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
            if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
            if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
            snow[i].posy = 0
        }
    }
    var timer = setTimeout("movesnow()", 50)
}

for (var i = 0; i <= snowmax; i++) {
    document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>")
}
if (browserok) {
    window.onload = function () {
        initsnow();
        initsay();
    }
}