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

<!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. webpack构建多页面react项目（webpack+typescript+react）

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  2. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

  3. python全栈开发_day11_作用域，函数嵌套和闭包

    一:作用域 1)什么是作用域 作用域是规定一个变量可以作用的范围,运行和销毁的范围 2)作用域的分类 1.内置作用域built_in:随着解释器的运行而产生,解释器运行的终止而销毁. 2.全局作用域g ...

  4. WebFrom页面绑定数据过于冗长的处理方法

    嘛 这个是当时写完东西之后 功能没什么问题 但是由于页面绑定的数据太长 破坏了整体的样式(对于本人来说 样式就是浮云....) 所以测试就跟我说必须弄好看点 于是乎  我就找到了下面这种方法 因为我这 ...

  5. [转] Linux中的默认权限与隐藏权限（文件、目录）

    [From] https://blog.csdn.net/davidsky11/article/details/25424615 一个文件(或目录)拥有若干个属性,包括(r/w/x)等基本属性,以及是 ...

  6. confiparser模块

    什么是confiparser confiparser,翻译为配置解析,很显然,他是用来解析配置文件的, 何为配置文件? 用于编写程序的配置信息的文件 何为配置信息? 为了提高程序的扩展性,我们会把一些 ...

  7. 在线词云制作tagxedo

    最近在用python制作词云的时候发现了一个更加方便快捷很好玩的词云制作网站 http://www.tagxedo.com/app.html 所以今天就来大致介绍下是怎么使用的 1.先来介绍下tagx ...

  8. vue2.0修饰符sync用法

    如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入, 而子组件无法改变props里面的变量的值,但 ...

  9. Centos 7网卡设置

    #yum install net-tools.x86_64 #cd /etc/sysconfig/network-scripts/ #mv ifcfg-eno16780032 ifcfg-eth0 手 ...

  10. CentOS 6.5中配置RabbitMQ

    先配置erlang依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel 安装erlang 1 ...