javascript 微博发布框

最新推荐文章于 2022-05-07 09:45:00 发布
最新推荐文章于 2022-05-07 09:45:00 发布
阅读量790 收藏
点赞数
分类专栏： Web前端 文章标签： Web前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012193330/article/details/41653147
版权

发布后的内容高度缓慢变大，透明度从0到100

js代码：

<script>
window.οnlοad=function(){
<span style="white-space:pre">	</span>var oTxt=document.getElementById('txts');
<span style="white-space:pre">	</span>var oBtn=document.getElementById('btn');
<span style="white-space:pre">	</span>var oUl=document.getElementById('ul1');
<span style="white-space:pre">	</span>var oLi=oUl.getElementsByTagName('li');
	oBtn.οnclick=function(){
	<span style="white-space:pre">	</span>var node=document.createElement('li');
		node.innerHTML=oTxt.value;
		oTxt.value='';
		if(oLi.length>0)
		{
			oUl.insertBefore(node,oLi[0]);
		}
		else{
			oUl.appendChild(node);
		}
		var iHeight=node.offsetHeight;
		node.style.height='0';
		startMove(node,{height:iHeight-8},function(){
			startMove(node,{opacity:100});
		});
	};
};
</script>

html代码如下： 

<style>
		
#ul1{
	width:400px;
	height:400px;
	margin:10px auto;
	padding:0px;
	border:1px solid #222222;
	overflow:hidden;
}
#ul1 li{
	width:360px;
	margin:0px auto;
	padding:4px;
	border-bottom:1px dashed #222222;
	list-style:none;	
	overflow:hidden;
	filter:alpha(opacity=0);
	opacity: 0;
	text-overflow: ellipsis;
}
</style>


<body>
<span style="white-space:pre">	</span><textarea id="txts" cols="40" rows="4" style="resize: none"></textarea>
	<input id="btn" type="button" value="发布" />
	<ul id="ul1">			
	</ul>
</body>


青天诀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现简单微博发布功能Dom（节点操作）
敲代码不爱找bug的妹子
08-25 3317
现在很多人都在用微博，微博成为一种很普遍的分享，交流平台，以至于养成了每天睁开眼睛第一件事情和每天晚上闭上眼睛之前最后一件事就是要刷微博。博主一般就是潜水，默默的刷别人的微博，以至于到现在我的粉丝依旧是9个，特别稳定~~搞得本宝宝很焦灼...（有想要关注我的，可以私信哦~嘻嘻） 好啦，废话不多说，进入正题。。 （只是实现简单的节点操作，做的不好勿喷~~~）这个简单的功能主要分为三大部分：
用原生js写一个微博发布框，留言框。
nevercurtain的博客
12-24 2934
本来这篇文章是昨晚发布的，但是昨天网上自己的网站出了一些问题。百度一下可能是因为配置的问题，但是自己对后端，以及命令行实在不懂。好吧那就把它先放着。等我学了php以及linux在回来解决吧。今天写一个类似微博发布框，或者留言框的东西。 类似下边这样，在文本域里边输入文字，然后发布下边会显示。点击删除会删掉文字，当然这些都没有连接数据库。只是简单的实现这个功能罢了。 思路：整体的思路 外边一个大盒
通过javascript实现微博发布
m0_62181310的博客
05-07 695
通过增加节点,随机用户名和头像,实现最终发布效果 <!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" cont.
原生JavaScript制作微博发布面板效果
11-23
javaScript实现微博发布面板效果.采用的js知识有： 正则表达式区分中英文字节、随机数生成等函数 淡入淡出、缓冲运动。闪动等动画函数 onfocus、onblur、oninput、onpropertychange等事件 动态添加元素，获取设置动态属性 基本思路： 当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则处理一下！ 获取到所有头像的src之后，存入到一个变量中，当点击头像时候，将头像的src赋予添加元素的img，动
js微博发布框的实现
weixin_30740581的博客
11-15 302
观察了微博发布框， 1.发现他的剩余文字是动态改变的， 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 　　1.onclick() //点击发布时触发 　　2.onmouseover()// 鼠标滑到 发布 触发 　　3.onmouseout() //鼠标离开 发布 时触发 　　4.onfocus(...
简单的仿新浪微博发布框
01-10
【标题】：“简单的仿新浪微博发布框” 在网页设计和开发中，模拟知名社交媒体平台的界面元素是一种常见的练习，有助于提升开发者的设计感和交互实现能力。本项目“简单的仿新浪微博发布框”就是一个很好的实例，...
jQuery新浪微博发布页面代码
06-24
**字数统计**：在微博发布框中，字数限制是一项基本需求。该代码通过jQuery监听输入事件，实时计算用户输入文字的数量，并在界面上显示剩余可输入字数，帮助用户避免超过微博的字数限制。这种功能的实现通常涉及到...
基于jQuery实现仿微博发布框字数提示
12-03
在本文中，我们将深入探讨如何使用jQuery来实现一个仿微博发布框字数提示的功能。这个功能主要用于限制用户在文本输入框（textarea）中输入的字符数，并实时显示剩余可输入的字数。以下是一个详细步骤的说明： 1. *...
原生js微博发布信息和删除信息功能
11-02
本项目“原生js微博发布信息和删除信息功能”旨在教你如何使用纯JavaScript来创建一个基础的微博功能，包括发布新信息和删除已有信息。这个功能对于任何社交网络平台来说都是至关重要的。 首先，我们需要了解...
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
基于javascript制作微博发布栏效果
11-23
本文为大家分享了做微博发布栏效果的过程，涉及到的知识点包括以下： 1.判断IE的方法：直接用  var ie=!-[1,];即可 2.连续发生事件的用法：  IE下：触发对象.onpropertychange  标准下：触发对象.oninput 3.焦点聚集和移开事件。onfocus和onblur 4.判断单字节（0-255之间）与双子节：正则表达式:/[^\x00-\xff]/g 代码如上： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
js的三种弹出框（alert、confirm、prompt）简单介绍
热门推荐
weixin_45727472的博客
06-29 1万+
1、alert()   alert 方法有一个参数，就是用户想弹出的内容，弹出框很简单，就一个显示功能。你可以点击确认关闭这个弹出框。   例如：alert(“hello woorld！”);    2、confirm()   这个方法要求用户选择。有确认有返回。confirm 方法的返回值为 true 或 false。   例如：var flag = confirm(“你快乐么？”);   点击确定，flag的值为true；点击取消则为false；    3、prompt()   这个弹出框相对于上面两个
JS-发布微博案例
m0_47559177的博客
10-09 742
需求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" /> <met
js仿微博发布，论坛发布
qq_26892503的博客
01-22 941
仿微博发布 ##上代码 // An highlighted block &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;
JavaScript制作微博发布栏效果
凡凡的博客
06-07 305
知识点包括以下： 1.判断IE的方法：直接用  var ie=!-[1,];即可 2.连续发生事件的用法：  IE下：触发对象.onpropertychange  标准下：触发对象.oninput 3.焦点聚集和移开事件。onfocus和onblur 4.判断单字节（0-255之间）与双子节：正则表达式:/[^\x00-\xff]/g http://www.w3.org/TR
用jQuery仿微博发布界面
耳东林夕
09-06 2635
当当当当，时隔这么久，我又回来了，今年给大家带来一个大家可能每天都要刷的微博网页版的仿制版，功能能实现，但是界面可能有些简陋，这就需要自己根据自己的爱好进行css设计了，下面开始贴代码。 HTML代码： &lt;div id="main"&gt; &lt;div id="form_box"&gt; &lt;h2&gt;有什么新鲜事想告诉大家？&lt;/h2&gt; &lt
美化上传文件框(上传图片框)
luoxuehui_blog的博客
01-25 8887
传统的表单控件十分简陋，可以说是很难看，那怎么办？ 方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图: 做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？ 那就使用代理的方法，点击上传就等于点击(上传文件表单控件) 废话不多说，直接上代码: html: 测试插件 body{font

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值