用jquery仿做发微博功能示例


Posted in Javascript onApril 18, 2014

源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>发布框</title> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<!-- 
功能描述:当点击输入框时,提示的文字会去掉;当光标离开时,如果没有输入任何内容,提示的文字会恢复;如果有输入文字,将会计算并显示剩余的字数 
--> 
<script type="text/javascript"> $(function(){ 
$("#content").focus(function(){ 
if ($(this).val()==this.defaultValue) { 
$(this).val(""); 
//alert($(this).length-1); 
} 
}).blur(function(){ 
if ($(this).val()=='') { 
$(this).val(this.defaultValue); 
} 
}) 
$("#content").keyup(function(){ 
//alert($(this).val().length); 
var words_num = 140 - $(this).val().length; 
if (words_num < 0) { 
//被误导了 这样是不会有 return 值的 
//$("font").text(function(words_num){ 
// return "<font color='red'>"+words_num+"</font>"; 
//}); 
$("font").css('color','red').text(words_num); 
}else{ 
$("font").text(words_num); 
//alert(words_num); 
} 
}) 
}); 
$(function(){ 
$("#send").click(function(){ 
$.post("post3.php", { 
// username : $("#username").val() , 
content : $("#content").val() 
}, function (data, textStatus){ 
// var username = data.username; 
var content = data.content; 
// var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; 
var txtHtml = "<div><h3>"+content+"</h3></div>"; 
$("#resText").html(txtHtml); // 把返回的数据添加到页面上 
},"json"); 
}) 
}); 
</script> 
</head> 
<body> 
<fieldset style="width:800px; margin-left:300px;"> 
<legend style="font-sixe:16px; font-weight:600">发布框</legend> 
<form action="#" id="form1"><!--enctype="multipart/form-data"--> 
您还可以输入<span id="num" style="font-size:28px;font-weight:800"><font color="green">140</font></span>个字 
<textarea cols="96" rows="8" id="content">随便写点东西吧.</textarea> 
<input type="button" id="send" value="发布"/> 
</form> 
</fieldset> 
<div>你发送的信息是:</div> 
<div id="resText"> 
</div> 
</body> 
</html>

效果图:
用jquery仿做发微博功能示例 
遇到的问题:

主要就是jquery库的问题:使用jquery-1.3.1.js这个文件,能实现功能,但是使用jquery-1.7.1.min.js这个文件,就没有效果!害我花了很多时间去源代码找问题!!

Javascript 相关文章推荐
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
微信小程序实现文字跑马灯
May 26 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
实例说明为什么不要行内使用javascript
Apr 18 #Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 #Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
JQuery each()嵌套使用小结
Apr 18 #Javascript
JavaScript编程的10个实用小技巧
Apr 18 #Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 #Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python的时间模块datetime详解
2017/04/17 Python
python实现日常记账本小程序
2018/03/10 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
新闻学专业个人求职信写作
2014/02/04 职场文书
党支部承诺书范文
2014/03/28 职场文书
合同协议书格式
2014/04/18 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年团队工作总结
2014/11/24 职场文书
员工辞职信范文
2015/03/02 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
导游词之唐山景点
2019/12/18 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书