用jquery仿做发微博功能示例

前端技术 2023/09/04 JavaScript
源代码：
复制代码 代码如下:

<!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-1.3.1.js这个文件，能实现功能，但是使用jquery-1.7.1.min.js这个文件，就没有效果！害我花了很多时间去源代码找问题！！

本文地址：https://www.stayed.cn/item/8981

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案