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

<!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. vi基本状态

    vi状态退出并保存:shift+ZZ vi readme.txt 进入VIM编辑器,可以新建文件也可以修改文件 如果这个文件,以前是没有的,则为新建,则下方有提示为新文件. 按ESC键 跳到命令模式, ...

  2. FlutterToast 使用

    参看 FlutterToast 开源库 https://github.com/PonnamKarthik/FlutterToast

  3. 项目版本不同导致Eclipse报错问题——关于在JDK1.7环境中，运行JDK1.8环境下编写的项目

    本人电脑环境配置的是JDK1.7,朋友的是JDK1.8 ,我把她编的java文件导入到我电脑里的Eclipse(LUNA版本)的时候,项目出现一个红色叹号,当然运行是肯定出错了.SO我就开始了解决之旅 ...

  4. SQL基础语法select|insert|update|delete(增删改查) 简单使用

    以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select  字段名  from  表名 此种查询只列出你所需要查询的字段, ...

  5. HttpClient登陆后获取并携带cookies发起请求

    最近项目中,用到了登陆后获取并携带cookies发起请求的业务场景,现总结写出来备忘一下. 1.定义存取cookies信息的全局变量 public class HttpUtil { /** * 用来存 ...

  6. 移动工程后，打开ROM核无配置信息

    问题: 从他人处下载的ISE工程,打开dw51的ROM IP核,无配置信息,为block memory generator的初始配置,并显示无法找到coe文件 原因:ROM配置过程中的部分内容丢失导致 ...

  7. Case When ELSE END语句

    一.简介.Case  When   ELSE   END共有两种用法: 说实话,这种就是数据库版的switch语句,但是只是形式上很像,实际上还是有差别的!!! Create Table Test6( ...

  8. 关于sql通配符检索问题-【.NET】

    确定给定的字符串是否与指定的模式匹配.模式可以包含常规字符和通配符字符.模式匹配过程中,常规字符必须与字符串中指定的字符完全匹配.然而,可使用字符串的任意片段匹配通配符.与使用 = 和 != 字符串比 ...

  9. npm 配置

    设置代理 $ npm config set proxy http://server:port $ npm config set https-proxy https://server:port 如果代理 ...

  10. （微信小程序）二 ： 创建一个页面。

    首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...