原生JavaScript制作微博发布面板效果

作者：Magic淘 | 来源：互联网 | 2022-01-25 23:43

这篇文章主要为大家详细介绍了原生JavaScript制作微博发布面板效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Javascript实现微博发布面板效果.采用的js知识有：

正则表达式区分中英文字节、随机数生成等函数
淡入淡出、缓冲运动。闪动等动画函数
onfocus、onblur、oninput、onpropertychange等事件
动态添加元素，获取设置动态属性

基本思路：

当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则处理一下！

获取到所有头像的src之后，存入到一个变量中，当点击头像时候，将头像的src赋予添加元素的img，动态创建日期对象，手机型号，姓名存到数组，采用生成随机数的方式获取，当文本框有了内容并且选取头像后，可以发布成功，发布时候淡出效果，创建一个li，添加li的时候不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头，这是需要判断一下，当有元素时候采用 insertBefore方法，当没有元素时候采取appendChild。

html代码,因为不是同一天做的，后续的后头添加的，所以js代码的可读性不是很好，请谅解。不过尽量注释的很明白了，如有疑问请留言！

下面附源码下载地址！




 
 
 
 


 
  
   有什么新鲜事想告诉大家？
   把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博
  
  
  
   小提示:请先选择头像 再进行发布
   发布
  
 
 
  <
  
   
    
    
    
    
    
    
    
    
    
    
    
    
    
      
  

  >
 
 
  
   
    
     
    
    白超华
    今天又过去了，今天过得怎么样？梦想是不是越远了？
    
     03-10 20:30 来自 Xperia Z6 
    
    
   
   
    
     
    
    金庸
    飞雪连天射白鹿，笑书神侠倚碧鸳。金庸小说中涌现出无数金句，九阳真经写到：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。当你想到金庸时，你会想到哪句话呢？转发，祝金老福如东海，寿比南山！
    
     03-10 20:24 来自 iPhone 6s plus 
        
   
   
    
     
    
    财经网
    【李克强来到新疆团：我要和每位代表握握手】10日上午，李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。？
    
     03-10 20:10 来自 8848 钛金手机

源码下载：微博发布面板

希望本文所述对大家学习Javascript程序设计有所帮助。

推荐阅读

js
互联网思维中的3个段子，9大分类和19条法则

本文介绍了互联网思维中的三个段子，涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例，探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验，三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]

蜡笔小新 2023-12-10 14:58:10
range
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
io
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
js
Linux环境变量$PATH的作用及使用方法

本文介绍了Linux环境变量$PATH的作用及使用方法。$PATH是一个由多个目录组成的变量，用冒号分隔。当执行一个指令时，系统会按照$PATH定义的目录顺序搜索同名的可执行文件，如果有多个同名指令，则先找到的会被执行。通过设置$PATH变量，可以在任何地方执行指令，无需输入绝对路径。 ... [详细]

蜡笔小新 2023-12-10 15:26:56
io
Unity3D引擎的体系结构和功能详解

本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具，用于创建交互式3D应用程序。它由游戏引擎和编辑器组成，支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费，适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]

蜡笔小新 2023-12-10 11:01:31
io
webpack二刷之二、loader资源模块加载器

loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件，也就是说它会把打包过程中所有遇到的 ... [详细]

蜡笔小新 2023-10-17 21:26:42
int
asp中如何嵌入python的简单介绍

本文目录一览：1、如何在IIS中执行Python脚本 ... [详细]

蜡笔小新 2023-10-17 19:41:52
io
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
io
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
get
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
get
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
string
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
int
Windows7企业版怎样存储安全新功能详解

本文介绍了电脑公司发布的GHOST WIN7 SP1 X64 通用特别版 V2019.12，软件大小为5.71 GB，支持简体中文，属于国产软件，免费使用。文章还提到了用户评分和软件分类为Win7系统，运行环境为Windows。同时，文章还介绍了平台检测结果，无插件，通过了360、腾讯、金山和瑞星的检测。此外，文章还提到了本地下载文件大小为5.71 GB，需要先下载高速下载器才能进行高速下载。最后，文章详细解释了Windows7企业版的存储安全新功能。 ... [详细]

蜡笔小新 2023-12-10 14:45:37
io
javascript入门·表单与表单元素总结（表单验证）

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]

蜡笔小新 2023-10-15 18:44:55

Magic淘

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章