用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 相关文章推荐
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
keras K.function获取某层的输出操作
2020/06/29 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
电力安全事故反思
2014/04/27 职场文书
公司委托书格式
2014/08/01 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2015年度保密工作总结
2015/04/24 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python