用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复制文本框和表格的代码
Apr 01 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
实例说明为什么不要行内使用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
在字符串中把网址改成超级链接
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php URL编码解码函数代码
2009/03/10 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
python opencv实现图像配准与比较
2021/02/09 Python
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
大专生的学习自我评价
2013/12/04 职场文书
会计演讲稿范文
2014/05/23 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS