web前端HTML+CSS+JS留言板整蛊网站愚人节作业代码

儿鱼

已于 2024-08-22 17:31:13 修改

阅读量1.2k

点赞数 2

分类专栏： web 文章标签：前端 css html

于 2022-07-01 22:44:29 首次发布

本文链接：https://blog.csdn.net/qq_44920229/article/details/125566791

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

玩法介绍

输入用户名：admin
密码：123456
单机大标题Login登录成功跳转到留言板界面。（鼠标移动到“login”按钮，按钮会移动，点击不到。）
2，留言板输入框无论输入任何内容都会显示为“愚人节快乐！”。
3，左上角有一个“不要过来哦”的提示信息，鼠标移到上面会出现一张恐怖图片。

登录界面
在这里插入图片描述
留言界面

部分代码:
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">
  <title>留言板</title>
  <link rel="stylesheet" href="css/work.css">
</head>


<body>
  <div class="container">
    <div class="login-wrapper">
      <div g> <input rows="10" cols="70" placeholder="请输入文字：" id="text" oninput="change()" type="text" name="username"
          placeholder="username" class="input-item">
      </div>
      <button id="btnfb">发布</button>
      <ul></ul>

    </div>
    <div id="a1">
      不要过来哦
    </div>
  </div>
</body>

</html>
<script src="js/work.js"></script>

css

* {
    margin: 0;
    padding: 0;
}

ul{
margin-top: 40px;
}
li {
    width: 300px;
    padding: 5px;
    background-color: #eee;
    font-size: 15px;
    margin: 10px 0;
    list-style: none;
}

li a {
    float: right;
}

html {
    height: 100%;
}

body {
    height: 100%;
}



.container {
    height: 100%;
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-wrapper {
    background-color: #fff;
    width: 358px;
    height: 700px;
    border-radius: 15px;
    padding: 20px 50px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}

.input-item {
    display: block;
    width: 100%;
height: 50px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

.input-item:placeholder {
    text-transform: uppercase;
}

#btnfb{
    text-align: center;
    width: 40%;
    padding: 5px;
    margin-left: 95px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
    position: absolute;
}

#a1{
    margin-top: -700px;
    width: 10px;
    height: 1px;
    background: #f8c3f6;

  }
  #a2{
    margin-top: -700px;
    width: 10px;
    height: 1px;
    background: #f8c3f6;
 right: 10px;
 top: 10px;

  }
 img{
           
            width: 100px;
            height: 100px;
        }


var b = 0;

function change() {
    b++;
    var aa = ("愚人节快乐！");
    var c = b % aa.length + 1;
    var f = document.getElementById("text");
    f.value = "";
    for (var i = 0; i < c; i++) {

        f.value += aa[i];
    }
}
//1、获取元素
var txt = document.querySelector("input");
var btn = document.querySelector("button");
var ul = document.querySelector("ul");
//2、给button绑定点击事件
btn.onclick = function () {
    var as = document.querySelectorAll("a");
    if (txt.value == "") {//当文本框中没有文字时，提示
        alert("您没有输入内容")
    }

    else {
        var li = document.createElement("li");
        li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"
        txt.value = "";
        ul.insertBefore(li, ul.children[0]);
        var as = document.querySelectorAll("a");
   
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                ul.removeChild(this.parentNode);
            }
        }


    }
}

var t = document.getElementById("a1");

var title = document.getElementById("title");
t.onmouseover = function () {
    t.style.width = "500px";
    t.style.height = "500px";
    t.style.backgroundImage = 'url(imges/3.gif)';
    t.innerHTML="";
}

t.onmouseout = function () {

    t.style.width = "10px";
    t.style.height = "100px";
    t.style.background = '#f8c3f6';
    t.innerHTML="不要过来哦";
}