留言板案例

最新推荐文章于 2022-08-27 16:47:43 发布
最新推荐文章于 2022-08-27 16:47:43 发布
阅读量224 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Adelam/article/details/108065294
版权 
 <style>
        *{margin:0;padding:0;}
        .cont{
            width:600px;
            height:500px;
            border:1px solid #cccc;
            margin:100px auto;
            position:relative;
        }
        .list{
            margin-left:100px;
            position: absolute;
            
        }
        .list li{
            list-style: none;
            width:400px;
            height:80px;
            background:rgb(177, 223, 235);
            border-radius: 5px;
            margin-bottom: 10px;
            border:1px solid yellowgreen;
            line-height: 80px;
            text-align: center;
            }
            .box{
               width:300px;
               height:140px;
               border-radius: 5px; 
               position:absolute;
               border:1px solid #000;
               background:#ccc;
               left:150px;
               bottom:40px;
               margin: 0;padding: 0;
               display: none;
            }
            .box p{
                text-align: center;
                height:20px;
                background:orange;
                line-height: 20px;
                border-radius: 5px;
            }
    
        .form *{
            border:none;
            padding:0;margin:0;
            float:left;
            height:80px;
            width:280px;
            margin-left:10px;
            margin-top: 5px;
        }
        .box input{
            width:80px;
            height:26px;
            border-radius: 5px;
            border:none;
            margin:5px;
            margin-left:45px;
        }
        #ok{
            background:orange;
        }
        #txt{
           outline:none;
           resize:none;
        }
       .btn1{
           width:16px;
           height:16px;
           border-radius: 3px;
           background:#ccc;
           position: absolute;
           right:0;
           top:0;
           text-align: center;
           line-height: 16px;
       }
       .black {
            width: 600px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(101, 101, 101, 0.6);
            opacity: 1;
            transition: all 1s;
            display: none;
        }
      
    </style>
</head>
<body>
    <div class="cont">
        <button id="btn">添加</button>
        <ul class="list">
            <li>人核工程与德国回复日俄</li>
            <li>无房户二无房户</li>
            <li>日本狗和头脑糊涂</li>
            <li>过让她和她</li>
            <li>额日哦韩国i哦让他</li>
        </ul>
        <div class="black">
        </div>
        <div class="box">
            <p class="title">弹出窗口               
            </p>
            <span class="btn1">x</span>
            <div class="form">
            <textarea name="" id="txt"></textarea>
        </div>
        <input type="button" value="确定" id="ok">
        <input type="button" value="取消" id="no">
        </div>
    </div>
    <script>
        var btn = document.querySelector("#btn")
        var box = document.querySelector(".box")
        var title = document.querySelector(".title")
        var cont = document.querySelector(".cont")
        var ok = document.querySelector("#ok")
        var no = document.querySelector("#no")
        var btn1 = document.querySelector(".btn1")
        var txt = document.querySelector("#txt")
        var lis = document.querySelectorAll(".list li")
        var black = document.querySelector(".black")
        
        btn.onclick = function(){
            box.style.display = "block"
            black.style.display = "block"
        }
        no.onclick = function(){
            box.style.display = "none"
            black.style.display = "none"
            txt.value = ""
        }
        btn1.onclick = function(){
            box.style.display = "none"
            black.style.display = "none"
            txt.value = ""
        }

        title.onmousedown = function(e){
           var e = e || window.event
          var disX = e.offsetX
          var disY = e.offsetY
          document.onmousemove = function(e){
             var e = e || window.event
             var left = e.clientX - cont.offsetLeft - disX
             var top = e.clientY - cont.offsetTop - disY
             if(left <= 0) left = 0
             if(top <= 0) top = 0
             if(left >= cont.offsetWidth - box.offsetLeft) left = cont.offsetWidth - box.offsetLeft
             if(top >= cont.offsetHeight - box.offsetHeight) top = cont.offsetHeight - box.offsetHeight
              box.style.left = left+ "px"
              box.style.top = top + "px"
          } 
          document.onmouseup = function(){
              document.onmousemove = null

              document.onmouseup = null
          }  
           stopDefault(e)  
                                                                                  
        }
          
        var num = 0
        ok.onclick = function(){
            if(txt.value.length >= 150){
                alert("不能超过150个字")
            }else{
                if(num < lis.length){
                    lis[num].innerHTML = txt.value
                }else{
                   lis[num - lis.length].innerHTML = txt.value
                }
            }
            txt.value = ""
            num++
            box.style.display = "none"
            black.style.display = "none"
            
        }

       
      
        function stopDefault(e){
              if(e.preventDefault){
                  e.preventDefault()
              }else{
                  e.returnValue = false
              }
          }
    </script>
Adela-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
留言板小案例
weixin_57762552的博客
03-08 1003
留言板案例，如图： 首先新建一个html文件，写好我们需要的内容。 一个文本域，但是这个文本域里面没有内容，然后需要提前给它设置好id以方便后面获取。 一个按钮，这个按钮是很重要的，因为JS部分的内容大部分是写在它的点击事件里的，所有需要提前给它设置好id以方便后面获取。 一个无序列表，这个无序列表里面是没有内容的，但它会在后面起到至关重要的作用，所有需要提前给它设置好id以方便后面获取。 为了美观和效果需要给留...
原生JS实现留言板案例
最新发布
weixin_43290826的博客
07-14 242
【代码】原生JS实现留言板案例。
JavaScript小案例-留言板案例
抗争小青年的博客
06-17 1518
留言后有时间显示，且有按键监听，按下光标定到输入框，按下留言发布。 html js css 效果
JavaScript实现留言板案例
11-20
在JavaScript实现留言板案例中，我们看到了一个简单的网页应用，它允许用户输入姓名和留言内容，并在页面上显示这些留言。这个应用主要涉及到HTML、CSS和JavaScript的交互，具体包括以下几个关键知识点： 1. **...
制作留言板案例代码
05-10
在这个"制作留言板案例代码"中，我们将会探讨如何构建一个完整的留言板系统，包括前端界面设计和后端数据处理。 首先，前端部分通常涉及到HTML、CSS和JavaScript。HTML（超文本标记语言）用于创建网页的基本结构，...
Django开发的简易留言板案例详解
09-19
主要介绍了Django开发的简易留言板,结合实例形式详细分析了基于Python框架Django开发留言板的具体文件结构、流程步骤与相关操作技巧,需要的朋友可以参考下
前端留言板案例 ,适合api初学者观看 js+webapis
04-18
前端留言板案例 ,适合api初学者观看 js+webapis实现########################################################################################################################################################...
留言板案例代码
06-30
本案例实现可折叠的留言板，一种是可折叠式的，另一种是浮动的留言板，下面分别价绍.
留言板源代码（后台与前台都有实例）
08-01
这个是.net实现的留言板源代码，有后台管理，前台页面
留言板 贴吧 问答实例
02-28
1.贴吧会员登录成功后将通过Cookies保存临时信息替换原来的session存储，解决登录超时与占用服务器 资源问题 2.帖子以及作者搜索功能更加完善完善 增加查看新帖以及最新回复功能（可以在后台禁止非会员查看） 3.多处验证码，登录，注册，发帖，回复...在后台任意开启关闭 防止暴力注册发帖 垃圾广告侵扰问题 4.贴吧分类以及子分类的任意排序，以及字符长度控制 避免标题过长使页面错位 5.自定义式的贴吧首页调用，只需点动鼠标就可实现任意版面的调用（替换了原来复杂的手工修改代码然后再通过JS调用模式） 6.根据网友建议修改退出登录后会返回退出前的那个页面 7.贴吧内文章 置顶、精华、热门回复、热门点击、会员排行自动调用（每个版块的调用条数可以在后台设置） 8.吧内短信息功能，贴吧好友可以互发信息 9.凡是在帖子以及其他页面显示会员用户名的都可以点击用户名查看用户详细资料（可以在后台禁止非会员查看） 10.个人中心的全新修改，增加若干新功能以及自己帖子主题以及回复内容的查看 11.无限级别分类轻松打造多样化贴吧 12.网页模板化，界面样式可以在后台随便修改，风格制作快速简单 13.会员注册页面结合JavaScript脚本人性化的提示增加用户体验（在程序内也使用了大量的JavaScript脚本） 14.是否允许会员的匿名功能（在后台有开关） 15.帖子回收站功能避免错误删除以及故意删除（可在回收站彻底删除） 16.增加IP屏蔽和禁止会员注册关键字功能 17.多处验证码，登录，注册，发帖，回复..............在后台任意开启关闭 18.广告功能，为个人网站盈利考虑放置多处广告位可填写任何广告代码 19.新的数据库备份功能，在线复制、在线压缩、在线备份、在线恢复 彻底解决木马改名运行漏洞 全新的后台界面以及简单容易的功能设置上手更容易 20.贴吧版权信息使用者可以自由修改 21.全新的贴吧投诉贴吧管理员申请，每个会员允许成为多个贴吧的吧主 22.重新设置的友情链接可以自由调动显示的先后顺序以及是否在新窗口打开链接 23.增加登陆日志功能记录贴吧的每一次登陆包括登陆成功与登陆失败 24.更改了密码找回方式增加问题回答找回密码功能 25.应部分网友要求增加了会员头像功能,使贴吧会员在吧内表现更加个性 26.全新的后台设计以及便捷下拉菜单的管理员管理方式使贴吧更加人性化
简易留言板
qq_40687516的博客
12-21 504
<!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-...
简单的’网页留言板‘案列
冉筱
08-27 652
简单的网页留言板，显示实时时间
jQuery实现留言板案例
明哥
03-17 4633
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.js"></scri.
JavaScript留言板效果代码实例
Return_KB的博客
01-10 4187
分享一段代码实例，它实现了简单的留言板效果。 这里主要演练的是对于dom元素的相关操作技巧，代码实例如下: 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048
js留言板案例
05-27
以下是一个简单的 JS 留言板案例： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS 留言板</title> </head> <body> <h1>JS 留言板</h1> <form> <input id="name" type="text" placeholder="姓名" required> <br> <textarea id="message" placeholder="留言" required></textarea> <br> <button type="submit">提交</button> </form> <hr> <ul id="messages"></ul> <script src="main.js"></script> </body> </html> ``` JS 代码： ```js const form = document.querySelector('form'); const nameInput = document.querySelector('#name'); const messageInput = document.querySelector('#message'); const messagesList = document.querySelector('#messages'); let messages = []; form.addEventListener('submit', function(event) { event.preventDefault(); const name = nameInput.value; const message = messageInput.value; const timestamp = Date.now(); const newMessage = { name, message, timestamp }; messages.push(newMessage); displayMessages(); form.reset(); }); function displayMessages() { messagesList.innerHTML = ''; for (const message of messages) { const li = document.createElement('li'); const date = new Date(message.timestamp); const dateString = date.toLocaleString(); li.innerHTML = `<strong>${message.name}:</strong> ${message.message} ${dateString}`; messagesList.appendChild(li); } } ``` 该案例使用了 HTML、CSS 和 JavaScript 技术，实现了一个基本的留言板功能。用户可以输入姓名和留言，并提交到留言板上。留言板会显示所有已提交的留言，包括留言者姓名、留言内容和留言时间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值