JavaScript仿微博输入框效果(案例分析)

这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿微博输入框效果</title>
<script src="jquery.js"></script>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<sapn>您还可以输入<strong style="color:red">140</strong>个字</sapn>
</body>
<script>
//给文本域响应键盘按下事件
$('textarea').keyup(function(){
var maxLength = 140;
var len = $(this).val().length;
$('strong').text(maxLength-len);
//判断输入是否超过140个数
if(parseInt($('strong').text()) < 0){
$('strong').text(0);
//截取前140个字符并重新塞到文本域中
var content = $(this).val().substring(0,140);
$(this).val(content);
}
});
</script>
</html>

以上所述是小编给大家介绍的JavaScript仿微博输入框效果(案例分析),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • avalonjs实现仿微博的图片拖动特效

    avalonjs实现仿微博的图片拖动特效

    效果: HTML: <div id='post_img' ms-controller='post_img'> <ul id='post_img_inner' ms-mousemove='onmousemove'> <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_ite

  • JS实现模仿微博发布效果实例代码

    JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • js实现仿微博滚动显示信息的效果

    js实现仿微博滚动显示信息的效果

    相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等. 在首页登陆微博时,我们可以看到一栏"大家正在说",它滚动显示着当前每个人发送的微博:刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果. 我们细细观察了微博的"大家正在说",它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的. 图1 微博"大家正在说&q

  • js仿微博动态栏功能

    js仿微博动态栏功能

    知识有限,目前只写了发布动态的功能,没有写兼容,后面再慢慢完善.嘿嘿 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博</title> <style> body, p, img, ul, li { margin: 0; padding: 0; } body { bac

  • avalon js实现仿微博拖动图片排序

    avalon js实现仿微博拖动图片排序

    下文针对仿微博图片随意拖动,调整图片的顺序,讲解的很详细,文章肯定还有欠缺的地方,欢迎提出批评改正.废话不多说了,看具体内容吧. 点击此处进入源码下载 什么是拖动图片排序? 就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序. 可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响应式的等高等宽的若干div容器,里面则是等比例缩放的响应式图片. 下面说下要求. 1.当然首先图片要可以拖动. 2.图片移出其原本的位置,拖动到目标位置并且未松开鼠标完成拖动

  • 一个仿微博登陆邮箱提示框js开发案例

    一个仿微博登陆邮箱提示框js开发案例

    最近在好好的研究JS,通过一个仿邮箱登录提示框的案例加深下对面向对象的理解!啥都别说,先上图: 功能:实现正则匹配显示相符的内容.键盘事件.鼠标事件 简单布局: <div id="login"> <h2>仿微博登录</h2> <div class="detail"> <input type="text" placeholder='邮箱/会员账号/手机号' autocomplete='off'

  • JS实现仿微博可关闭弹出层效果

    JS实现仿微博可关闭弹出层效果

    本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE

  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

    现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;

  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • javascript的理解及经典案例分析

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间.让这些特殊效果提高网页的可观性. javascript现在可以再网页上做很多很多事情,网页特效,操作dom,html5游戏(基于html5和JavaScript的结合),动画等等特效,还可以实现拉去后台数据(通过ajax),不仅可以做前台还可以做后

  • Android仿微信输入框效果的实现代码

    Android仿微信输入框效果的实现代码

    仿微信输入框效果图: 输入框: <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:background="@drawable/weixin_edit

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • JavaScript仿京东放大镜效果

    JavaScript仿京东放大镜效果

    本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码,供大家参考,具体内容如下 案例分析 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 就是显示与隐藏 移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等. 求大图片的移动距离公式 代码 <!DOCTYP

  • JavaScript组合设计模式--改进引入案例分析

    本文实例讲述了JavaScript组合设计模式--改进引入案例.分享给大家供大家参考,具体如下: 对于组合设计模式: (1)组合模式中把对象分为两种(组合对象,和叶子对象)  (2)组合对象和叶子对象实现:同一批操作  (3)对组合对象执行的操作可以向下传递到叶子节点进行操作  (4)这样就会弱化类与类之间的耦合  (5)他常用的手法是把对象组合成属性结构的对象 根据组合模式的这些特性我们改写代码如下: 由于用到了接口检验所以我们先引入接口文件代码 //定义一个静态方法来实现接口与实现类的直接检

  • javascript仿XP关机效果的弹出窗口功能

    不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去. 不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉

  • 利用Javascript仿Excel的数据透视分析功能

    利用Javascript仿Excel的数据透视分析功能

    什么是数据透视分析? 数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用. 接下来使用Excel介绍了什么是数据透视分析和数据透视表. 下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势. 申明:所有数据都是自己编造的,无任何参考价值. Excel 数据透视表和数据透

  • javascript仿百度输入框提示自动下拉补全

    javascript仿百度输入框提示自动下拉补全

    本文实例讲解了javascript输入框自动下拉补全操作,仿百度.谷歌搜索框提示,具体内容如下 效果图: 具体代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

随机推荐