JS-发布微博案例

最新推荐文章于 2022-02-24 08:40:00 发布
最新推荐文章于 2022-02-24 08:40:00 发布
阅读量732 收藏 10
点赞数 1
分类专栏： 前端-js 文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47559177/article/details/120677354
版权

需求1：检测用户输入字数
需求2： 输入不能为空
需求3： 新增留言在这里插入图片描述

JS、css、html
主要运用 节点操作，日期对象，克隆节点
全部代码

<!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;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="w">
    <!-- 操作的界面 -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength 可以用来限制表单输入的内容长度 -->
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <!-- 微博内容列表 -->
    <div class="contentList">
      <ul id="list"></ul>
    </div>
  </div>

  <!-- 添加了hidden属性元素会直接隐藏掉 -->
  <li hidden>
    <div class="info">
      <img class="userpic" src="./images/9.6/03.jpg" />
      <span class="username">死数据:百里守约</span>
      <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
    </div>
    <div class="content">死数据:111</div>
    <span class="the_del">X</span>
  </li>

  <script>
    // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    let dataArr = [
      { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
      { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
      { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
      { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
      { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
    ]

    // 点击发布 创建元素
    // ① 获取点击元素按钮
    let send = document.querySelector('#send');
    let w = document.querySelector('.w');
    let lis = document.querySelector('#list');
    let tex = document.querySelector('#area')
    // let del = document.querySelectorAll('#list  .the_del');
    // 更改字数长度
    tex.addEventListener('input', function () {
      document.getElementById('useCount').innerHTML = this.value.length;

    })
    // 给按钮绑定事件
    send.addEventListener('click', function () {
      if (tex.value.length === 0) {
        return alert('不能为空!');
      }
      // 克隆li 新增一个元素
      let newLi = w.nextElementSibling.cloneNode(true);
      // 获得随机数

      let num = Math.floor(Math.random() * dataArr.length);
      newLi.children[0].children[0].src = dataArr[num].imgSrc;
      newLi.children[0].children[1].innerHTML = dataArr[num].uname;
      newLi.children[0].children[2].innerHTML = getTime();
      newLi.hidden = false;
      newLi.children[1].innerHTML = tex.value;
      /* 给x绑定事件  删除元素
        放到追加进ul的前面，这样创建元素的同时顺便绑定了事件
      */
      newLi.children[2].addEventListener('click', function () {
        lis.removeChild(this.parentNode);
      })
      // 追加
      lis.insertBefore(newLi, lis.children[0]);
      tex.value = '';
      document.getElementById('useCount').innerHTML = '0';
    }
    );

    //获取年月日方法
    function getTime() {
      // new一个时间对象
      let date = new Date();
      // 获取年月日 注意 月份是0~11
      let year = date.getFullYear();
      let moth = date.getMonth() + 1;
      let day = date.getDate();
      // 获取时分秒
      let hour = date.getHours();
      hour = hour > 10 ? hour : '0' + hour;
      let minute = date.getMinutes();
      minute = minute > 9 ? minute : '0' + minute;
      let seconde = date.getSeconds();
      seconde = seconde > 9 ? seconde : '0' + seconde;
      return year + '年' + moth + '月' + day + '日' + hour + ':' + minute + ':' + seconde;
    }
  </script>

</body>

</html>
桃_白白
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
免杀小结-
ZxC789456302的博客
09-26 5097
先来假设一下报毒过程,对于PE文件的检测，如果在CODE位置存在标志A，在DATA位置存在标志B，在资源位置存在标志C，同时满足这三个条件，那么杀软就会报毒，VirTest工作原理就是要找到引起报毒的最后一个标志，也就是C。最后，终极修改方法，找到访问数据的代码，直接修改代码访问数据的地址，数据也可以放到其他地址了，其实就如同修改源码一样修改，肯定没有修改源码那么容易（见后）。使用ResHacker对文件进行资源操作，找来多个正常软件，将它们的资源加入到自己软件，如图片，版本信息，对话框等。
蚊子传奇
能不忆江南？
08-05 1570
躺在床上翻来覆去睡不着，热。这时候，耳边嗡嗡作响，蚊子又来凑热闹心里本来就烦，决定起床灭蚊。拉开灯，借着白白的墙壁，我很容易找到了我床头的一只蚊子拿手拍死，刚一回头，对面的墙壁上又有一只，杀无赦。准备洗手，在门口又发现一只，顺势了结了它。三只。洗手回来，看见门框上又有两只，双手齐下，灭掉一只。再找，又发现另一只，几次都逮不着，心想，这只蚊子够灵在顺势又解决了两只蚊子后，又一次洗手七只.这次又回到屋
微博发布案例
zhazhali_fenqi的博客
01-11 475
需求1：检测用户输入字数 1. 注册input事件 2. 将文本的内容的长度赋值给对应的数值 3. 表单的maxlength属性可以直接限制在200个数之间 需求2： 输入不能为空 点击button之后判断 判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空 防止输入无意义空格, 使用字符串.trim()去掉首尾空格 console.log(’ str’) console.log(’ str '.trim()) 并将表单的value值设置为空字符串 同时下面红色为设置为0； 需求3：
js模拟微博发布消息
10-20
本文主要介绍了js模拟微博发布消息的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2021Android高级进阶学习资料，再不了解你就out啦
m0_57983661的博客
05-11 657
前文 本文希望通过揭开一些 React 隐藏的技术细节, 来辅助对官方文档中某些概念的理解 读者可以将本文看做对官方文档的补充 行文方式我采用的是提问-解答的方式, 即先根据官方文档给出的使用规则, 提出Why, 然后我们根据实际的调试再来解答这些Why, 最后系统的整理这些 Why 变成 How, 如果你们有更好的行文方式, 也欢迎留言讨论 另外为了阅读体验, 我不会粘贴过多的源码, 避免打断各位读者的思路. Android开发面试的几部分 1、基础知识 基础知识包括几个部分：Java（JDK、
JavaScript仿微博发布信息案例
10-21
主要为大家详细介绍了JavaScript仿微博发布信息案例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现模仿微博发布效果实例代码
10-26
这里我们探讨如何使用JavaScript（JS）来实现一个简单的模仿微博发布的功能。这个实例通过创建一个新的元素（li）并将用户输入的文本内容添加到列表中，然后使用动画效果展示新的微博发布。下面我们将详细解析实现这...
信息系统分析与设计-新浪微博桌面客户端java版开发文档.doc
06-12
- **需求分析**：识别用户需求，包括功能需求（如发布微博、查看动态、评论互动等）和非功能需求（如响应速度、界面友好性等）。 - **形式化说明技术**：使用图表流程图等工具，将需求转化为清晰的逻辑模型，便于...
原生JavaScript制作微博发布面板效果
11-23
javaScript实现微博发布面板效果.采用的js知识有： 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素，获取设置动态属性 基本思路： 当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则处理一下！ 获取到所有头像的src之后，存入到一个变量中，当点击头像时候，将头像的src赋予添加元素的img，动
JS实现微博发布消息
weixin_30367873的博客
03-22 490
效果:发布时高度慢慢增大，透明度也同时变为100 思路： 1、创建li 2、li的值是从文本框获取的 li.innerHtml=txt.value; 3、清空文本框 txt.value=''; 4、if判断如果没有内容的时候就appendChild插入，如果有内容就倒序插入。 5、用offsetHeight获取li高度，先把li高度设置为0，再通过运动框架设置li高度和透明度 ...
JavaScript仿微博输入框效果(案例分析)
01-19
这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果。 效果图： 代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>仿微博输入框效果</title> [removed][removed] </head> <body> <textarea name= id= cols=30 rows=10></textarea> <sapn>您还可以输入<strong xss=removed>140</strong>个字</sa
js实现微博发布小功能
01-19
微博发布功能，可发布可删除。样式没设置忽略，主要知识点及注意点： 1、动态添加节点标签。 2、内容为空时不能发布。 3、新发布的内容要在上面。 4、内容删除要同时删除掉节点。 5、为保持样式输入框要设置为不可拖拽。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> * {margin: 0;padding: 0;} .box{ border: 1px solid #000; width: 600px; height: auto; mar
js仿新浪微博消息发布功能
10-20
主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
从代理机制到Spring AOP，这篇给你安排得明明白白的
m0_63174618的博客
11-01 257
将明星的表演抽象成一个ShowService接口，包括了唱歌、跳舞的功能 public interface ShowService { // 歌唱表演 void sing(String songName); // 舞蹈表演 void dance(); } 明星类实现了ShowService接口： package com.fufu.aop; public class Star implements ShowService{ private String name; @Override public void
用原生js写一个微博发布框，留言框。
nevercurtain的博客
12-24 2925
本来这篇文章是昨晚发布的，但是昨天网上自己的网站出了一些问题。百度一下可能是因为配置的问题，但是自己对后端，以及命令行实在不懂。好吧那就把它先放着。等我学了php以及linux在回来解决吧。今天写一个类似微博发布框，或者留言框的东西。 类似下边这样，在文本域里边输入文字，然后发布下边会显示。点击删除会删掉文字，当然这些都没有连接数据库。只是简单的实现这个功能罢了。 思路：整体的思路 外边一个大盒
原生js实现简单微博发布功能Dom（节点操作）
敲代码不爱找bug的妹子
08-25 3312
现在很多人都在用微博，微博成为一种很普遍的分享，交流平台，以至于养成了每天睁开眼睛第一件事情和每天晚上闭上眼睛之前最后一件事就是要刷微博。博主一般就是潜水，默默的刷别人的微博，以至于到现在我的粉丝依旧是9个，特别稳定~~搞得本宝宝很焦灼...（有想要关注我的，可以私信哦~嘻嘻） 好啦，废话不多说，进入正题。。 （只是实现简单的节点操作，做的不好勿喷~~~）这个简单的功能主要分为三大部分：
Vue3.2 中的 setup 语法糖，保证你看的明明白白！
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-24 1989
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群vue3.2 到底更新了什么？根据原文内容的更新的内容主要有以下 5 块： 1.SSR：服务端渲染优化。@vue/server...
Javascript-for循环案例-打印1-100之间所有的数字
最新发布
06-06
好的，以下是 Javascript for 循环打印 1-100 之间所有数字的代码： ```javascript for (var i = 1; i ; i++) { console.log(i); } ``` 这个代码中，我们使用了 for 循环来遍历数字 1 到 100。每次循环，变量 i ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值