首页 > 代码库 > HTML 发表说说 制作方法
HTML 发表说说 制作方法
=======================================================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin:0; padding:0}
ul{ list-style:none}
.wrap{ width:500px;font-size:14px; margin:50px auto}
.countTxt{ display:block; text-align:right; padding-bottom:10px;}
.countTxt em{ font-size: 16px; font-weight: bold; font-style: normal; padding: 0 5px}
.countTxt .red{ color: red;}
textarea{ padding:10px; display:block; width:480px; resize:none; height:100px; border:1px solid #ccc; font-size:14px}
.commonBtn{ height:40px; width:100px; border:1px solid #ccc; margin:10px 0 0 380px}
hr{ margin:20px 0}
.talkList li{ border:1px solid #ccc; padding:35px 20px 20px; border-radius:10px; position:relative; margin-bottom:20px}
.talkList li p{min-height:50px; margin-bottom:10px; word-break:break-all}
.talkList li .toolsBar{ text-align:right}
.talkList li .toolsBar span{ margin-left:20px; cursor:pointer}
.talkList li time{ position:absolute; top:10px; right:15px; color:#ccc;}
</style>
</head>
<body>
<div class="wrap">
<form>
<span class="countTxt">您还可以输入<em>140</em>字</span>
<textarea></textarea>
<button type="button" class="commonBtn" disabled>发表说说</button>
</form>
<hr>
<ul class="talkList">
<!--<li>
<p>12234gjalkajajsdgasdg</p>
<div class="toolsBar">
<span>顶<b>0</b></span>
<span>踩<b>0</b></span>
</div>
<time></time>
</li>-->
</ul>
</div>
</body>
</html>
<script src="http://www.mamicode.com/js/jquery-1.11.3.min.js"></script>
<script>
function isChinese(str){//判断是不是中文 中文：true 字符：false
var reCh=/[u00-uff]/;
return !reCh.test(str);
}
$("textarea").keyup(function(){
var txtval=$(this).val();
$(".commonBtn").prop("disabled",txtval==""?true:false);//设定按钮
var str_length=0;//初始定义长度为0；
for(var i=0;i<txtval.length;i++){
if(isChinese(txtval.charAt(i))){str_length=str_length+2}//中文为2个字符
else{str_length=str_length+1}//英文为1个字符
}
str_length=Math.ceil(str_length/2);//中英文相加除2 向下取整数（一个中文 + 一个英文）
var count=140-str_length;
if(count<0){
$(".countTxt").html(‘超出<em class="red">‘+Math.abs(count)+‘</em>字‘);
$(".commonBtn").prop("disabled",true);
}else{
$(".countTxt").html("您还可以输入<em>"+count+"</em>字")
}
})
//--------------------------------------------------------
$(".commonBtn").click(function(){
var txt=$("textarea").val();
var inHTML="";
inHTML+=‘<li>‘+
‘<p>‘+txt+‘</p>‘+
‘<div class="toolsBar">‘+
‘<span>顶 <b>0</b></span>‘+
‘<span>踩 <b>0</b></span>‘+
‘</div>‘+
‘<time></time>‘+
‘</li>‘;
$(inHTML).prependTo(".talkList");
$("textarea").val("");
$(".commonBtn").prop("disabled",true);
count=140;
$(".countTxt").html("您还可以输入<em>"+count+"</em>字");
var oDate=new Date();//读取当前时间
var year=oDate.getFullYear();//读取年份
var month=oDate.getMonth();//读取月份
var today=oDate.getDate();//读取日期
var hours=oDate.getHours();//读取小时
var min=oDate.getMinutes();//读取分钟
$("time").text(year+"-"+(month+1)+"-"+today+" "+hours+":"+min);
$(".toolsBar span").eq(0).click(function(){
var i=$(this).children("b").text();
i++;
$(this).children("b").text(i);
})
$(".toolsBar span").eq(1).click(function(){
var i=$(this).children("b").text();
i++;
$(this).children("b").text(i);
})
})
</script>
HTML 发表说说 制作方法