JS模拟留言板

最新推荐文章于 2021-11-29 19:15:00 发布

tt_vip

最新推荐文章于 2021-11-29 19:15:00 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/tt_vip/article/details/103556411

版权

本文将介绍如何利用JavaScript创建一个基本的留言板功能，包括添加留言、显示留言和删除留言等操作，通过DOM操作和事件监听来实现动态交互。

摘要由CSDN通过智能技术生成

<!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">
    <title>模拟留言板</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style: none;}
        html,body{width: 100%;height:100%;}
        #btn{border: none;color: teal;background-color: wheat;width: 100px;height:100px;position: absolute;top:100px;}
        ul{margin:0 auto;text-align: center;width: 500px;}
        ul li{width:600px;height: 50px;font:16px/50px "";margin-bottom: 10px;background-color: pink;color:skyblue;}
        #mc{width: 100%;height:100%;background-color:rgba(134, 123, 123, 0.5);position: absolute;top:0;display: none;}
        #div{background-color: rgb(236, 132, 236);width:600px;height:300px;position: absolute;top:150px;left:430px;text-align: center;display: none;}
        #div p{background:wheat;}
        #btn2{width:22px;height:22px;background-color: tomato;float: right;border: none;}
        #txt{width:500px;height:200px;margin-top: 10px;}
        #btn3{float: left;margin-top: 210px;background-color: green;}
        #btn4{float: right;margin-top: 210px;background-color: red;}
    </style>
</head>
<body>
    <ul id="ul">
    </ul>
    <input type="button" value="添加" id="btn"/>
    <div id="mc"></div>
    <div id="div">
        <p>弹出窗口<input type="button" value="×" id="btn2"/></p>
        <textarea id="txt"></textarea>
        <input type="button" value="确定" id="btn3"/>
        <input type="button" value="取消" id="btn4"/>
    </div>

</body>
<script>
    var p=document.querySelector("p");
    var ul=document.getElementById("ul");
    var mc=document.getElementById("mc");
    var div=document.getElementById("div");
    var btn=document.getElementById("btn");
    var txt=document.getElementById("txt");
    var btn2=document.getElementById("btn2");
    var btn3=document.getElementById("btn3");
    var btn4=document.getElementById("btn4");

    btn.onclick=function(){
        mc.style.display="block";
        div.style.display="block";
    }
    btn2.onclick=function(){
        mc.style.display="none";
        div.style.display="none";
    }
    btn3.onclick=function(){
        var li = document.createElement("li");
        li.innerHTML = txt.value;
        if(txt.value==""||txt.value.length>150){
            alert("内容不允许为空 不允许大于150个字");}
            else{
        ul.appendChild(li);
        txt.value = "";}
    }
    btn4.onclick=function(){
        txt.value = "";
    }
    p.onmousedown=function(e){
		var newX=e.clientX;//获取当前鼠标落下的x坐标
        var newY=e.clientY;//获取当前鼠标落下Y的坐标
		var left = p.offsetLeft;//获取当前元素的左边距
        var top = p.offsetTop;//获取当前元素的上边距
			 document.onmousemove = function(e) {
					var movedX = e.clientX;//获取当前鼠标移动的X坐标
                    var movedY = e.clientY;//获取当前鼠标移动的Y坐标
					var resultX = movedX-newX+left;//坐标等于移动的距离减去一开始的距离加上左边距
                    var resultY = movedY-newY+top;//坐标等于移动的距离减去一开始的距离加上上边距
					div.style.marginLeft= resultX + "px";
                    div.style.marginTop= resultY + "px";
				}
			document.onmouseup = function() {
				document.onmousemove = null;
			}
		}

</script>
</html>