HTML 发表说说制作方法

最新推荐文章于 2022-08-09 16:19:45 发布

会做饭的技术男

最新推荐文章于 2022-08-09 16:19:45 发布

阅读量347

点赞数 1

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjbj20jbaaaa.html

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

=======================================================================================================

<!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">

</ul>
</div>
</body>
</html>

<script src="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>

会做饭的技术男

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。