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

<!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="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 发表说说 制作方法的更多相关文章

  1. Radmin Server-3.5 完美绿色破解版（x32 x64通用） 第三版 + 单文件制作方法

    Radmin Server v3.5 汉化破解绿色版(x32 x64通用) 第三版 下载链接: https://pan.baidu.com/s/1qYVcSQo 2016年7月8日更新第三版1.修复在 ...

  2. gif动图快速制作方法（附工具）

    现在写博客或是wiki的过程中,会经常引用到图片,特别是客户端经常与页面相关所以截图不可避.但是越来越多的效果仅仅一张图片是无法清楚的描述.并且博客或是wiki也是支持gif图的.gif图的制作方法有 ...

  3. 100m和1000m网线的常见制作方法

    100m和1000m网线的常见制作方法 100m和1000m网线的常见制作方法: 5类线(100m)的制作: a: 绿白(3).绿(6).橙白(1).蓝(4).蓝白(5).橙(2).棕白(7).棕(8 ...

  4. 《奥威Power-BI智能分析报告制作方法 》精彩回顾

     上次课我们简单介绍了奥威Power-BI的智能分析报告,并展示了报告与图表相结合的应用场景.图文分析报表的意义不只在于美观,更重要的是固定框架下的灵活性和追根究底的动态分析,有着很强的实用性.上节课 ...

  5. 12月07日《奥威Power-BI智能分析报告制作方法 》腾讯课堂开课啦

            前几天跟我一个做报表的哥们聊天,听着他一茬一茬地诉苦:“每天做报表做到想吐,老板看报表时还是不给一个好脸色.”我也只能搬出那一套“过程大于结果”的内心疗程赠与他,没想到他反而怒了:“做 ...

  6. 《奥威Power-BI智能分析报表制作方法》精彩回顾

    年的最后一个月,一年又快过去.工作和学习都不能耽误,本周三奥威公开课又如约与大家见面咯!不知老师教的图文报表在课后你们都有练习吗?趁热打铁,我们现在再次来温习一下吧. 本期分享的内容:<奥威Po ...

  7. 11月30日《奥威Power-BI智能分析报表制作方法》腾讯课堂开课啦

    这么快一周就过去了,奥威公开课又要与大家见面咯,上节课老师教的三种报表集成方法你们都掌握了吗?大家都知道,学习的结果在于实际应用,想要熟练掌握新内容的要点就在于去应用它.正是基于这一要点,每一期的课程 ...

  8. Xcode6.1标准Framework静态库制作方法。工程转Framework，静态库加xib和图片。完美解决方案。

    http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加x ...

  9. INNO 补丁制作技术, 打开 INNO 补丁制作方法的第一页

    INNO 补丁制作技术, 打开 INNO 补丁制作方法的第一页 作者:xin 日期:2005-09-23 字体大小: 小 中 大   VPatch 在 INNO 中的应用. VPatch 属于专为NS ...

随机推荐

  1. Ubuntu如何配置网桥 Ubuntu系统配置网桥详细教程

    注意:如果是在ubuntu桌面版本上使用,图形化控制与ifupdown配置不兼容.如果使用ifupdown来配置,需要禁止使用图形化控制. 本文经过本人结合网络内容亲身实践,配置通了ifupdown ...

  2. 日语N5学习

    副词与连接词 ~から: 从-(表示时间.场所起点) ~まで: 到-(表示时间.场所终点) と: 和(并列时用) えーと: 嗯 いっしょに: 一起 ちょっと: 一点儿 いつも: 经常.总是 ときどき: ...

  3. web服务的简单介绍及apache服务的安装

    一,web服务的作用:  是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档.可以放置网站文件,让全世界浏览:   可以放置数据让全世界下载.目前最主流的三个Web服务器是Ap ...

  4. $bzoj1011-HNOI2008$ 遥远的行星 其他

    题面描述 直线上\(N\)颗行星,\(X=i\)处有行星\(i\),行星\(j\)受到行星\(i\)的作用力,当且仅当\(i<=A_j\).此时J受到作用力的大小为\(F_{i\to j}=\f ...

  5. 描边shader（法线外拓）

    描边的思路是需要两个pass.第一个pass让顶点沿着法线方向延伸出去,使得模型变大一圈.第二个pass正常渲染,让正常渲染的模型挡在第一个pass之上,这样就会露出延伸出去的部分,延伸出去的就是我们 ...

  6. 微众api文档，身份证识别,ocr等人脸识别等

    https://cloud.tencent.com/document/product/655/14369 https://cloud.tencent.com/document/product/655/ ...

  7. selenium+Python（文件上传)

    文件上传操作也比较常见功能之一,上传功能没有用到新有方法或函数,上传过程一般要打开一个本地窗口,从窗口选择本地文件添加.所以,一般会卡在如何操作本地窗口添加上传文件只要定位上传按钮,通send_key ...

  8. MySQL移动数据目录出现权限问题

    MySQL移动数据目录出现权限问题 环境: ubuntu 14.04.4 LTS 现象 今天把/var/lib/mysql下的数据文件移动到其他目录下,之后发现启动mysql报错,并且mysql无法运 ...

  9. 【百度之星2014~复赛）解题报告】The Query on the Tree

    声明 笔者最近意外的发现 笔者的个人网站http://tiankonguse.com/ 的很多文章被其它网站转载,但是转载时未声明文章来源或参考自 http://tiankonguse.com/ 网站 ...

  10. ExtJs6编译之后上线报错无法查看到的解决方法

    最近Extjs编译后部署遇到了一个错误c is not a constructor,报错位置在app.js里,这根本没法找 解决方法:用命令sencha app build testing 编译之后, ...