1、HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/weibo.css"/>
    <title>微博发布框</title>
</head>
<body>
<div class="weibo_context">
    <div class="weibo_text">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <p id="weibo_textnum">还能输入<span id="weibo_number">140</span>字</p>
    </div>
    <a class="post" href="javascript:void(0)">发布</a>
</div>
</body>
<script type="text/javascript" src="js/weibo.js"></script>
</html>

2、CSS:

*{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.weibo_context{
    width: 600px;
    margin: 20px auto;
}
p{
    float: right;
}
.weibo_text{
    margin: 5px auto;
    float: left;
    top: 30px;
}
textarea{
    width: 590px;
    height: 150px;
    font-size: 16px;
    overflow: auto;
}
.post{
    display: block;
    color: #fff;
    float: right;
    border: 1px solid;
    width:80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    margin: 3px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 5px;
    background: #8bc528;
    cursor: pointer;
}
#weibo_number{
    font-size: 20px;
    font-family: "Bell MT";
}
#weibo_textnum{    /*没有输入则隐藏*/
    opacity: 0;
}

3、js:

/**
 * Created by Administrator on 16-5-23.
 */
window.onload = function(){
    //获取文本域输入框对象
    var ot = document.getElementsByTagName('textarea')[0];
    //获取文本域输入框的上下文环境对象
    var weibotext = document.getElementsByClassName('weibo_text')[0];
    //获取数字提示语句对象
    var weibotextnum = document.getElementById('weibo_textnum');
    //获取数字
    var weibotextnumber = document.getElementById('weibo_number');
//    console.log(weibotextnum);
    //获取提交按钮
    var obtn = document.getElementsByClassName('post')[0];
    //技巧点一：判断是否为ie
    var ie = !-[1,];
    ot.onfocus = function(){//聚焦时的样式编程
//        alert("我是聚焦的");
        ot.style.border = '1px solid #40e0d0';
        ot.style.boxShadow = '0px 0px 10px #5cacee';
        weibotextnum.style.opacity = 1;
        var num = Math.ceil(getLength(ot.value)/2);
        if(num == ''){
            obtn.style.background = '#7f7f7f';
        }
    };
    ot.onblur = function(){//失焦时的样式编程
        ot.style.boxShadow = '';
        weibotextnum.style.opacity = 0;
        obtn.style.background = '#8bc528';
    }
    if(ie){//技巧点三：文本框内容发生变化事件不是onchange，标准浏览器是oninput，ie是onpropertychange
        ot.onpropertychange = toChange;
    }else{
        ot.oninput = toChange;
    }
    obtn.onmouseover = function(){
        ot.blur();
        obtn.style.background = '#7ccd7c';
    }
    obtn.onmouseout = function(){
        obtn.style.background = '#8bc528';
    }
    obtn.onclick = function(){
        var num = Math.ceil(getLength(ot.value)/2);
        if(num==0||num>140){
            alert("不符合发布要求，请检查");
        }else{
            alert("发布成功");
            ot.value = '';//技巧点二：文本域的值value就是其内的文本
            weibotextnumber.innerHTML = '140';
        }
    }
    function toChange(){//字数变化时执行的回调函数
        var num = Math.ceil(getLength(ot.value)/2);
        if(num<=140){
            weibotextnum.innerHTML = '还能输入<span id=\"weibo_number\"></span>字';
            weibotextnumber = document.getElementById('weibo_number');//重新获取数字
            weibotextnumber.innerHTML = 140-num;
            weibotextnumber.style.color = '';
        }else{
            weibotextnum.innerHTML = '超出<span id=\"weibo_number\"></span>字,您可以转为<a href=\"\">长微博</a>发送';
            weibotextnumber = document.getElementById('weibo_number');//重新获取数字
            weibotextnumber.innerHTML = num-140;
            weibotextnumber.style.color = 'red';
        }
        if(ot.value == ''||num>140){//如果文本域输入框为空或输入字数大于140
            obtn.style.background = '#7f7f7f';//则提交按钮为灰色
        }else{
            obtn.style.background = '#8bc528';//否则，提交按钮为绿色
        }
    }
    function getLength(str){//计算输入内容长度的函数
        return String(str).replace(/[^\x00-\xff]/g,'aa').length;//技巧点三：/[^\x00-\xff]/g表示全局匹配汉字
    }
}

总结：

技巧点1：

//技巧点一：判断是否为ie
    var ie = !-[1,];

技巧点2：

ot.value = '';//技巧点二：文本域的值value就是其内的文本

技巧点3：

技巧点三：/[^\x00-\xff]/g表示全局匹配汉字

注意事项：

1、js元素事件写法都得是小写ot.onfocus或ot.onblur

js原生写的微博留言板有angularjs效果的更多相关文章

  1. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  2. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  3. html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  4. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  5. angular留言板

    今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang=" ...

  6. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  7. JS原生编写实现留言板功能

    实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...

  8. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  9. vue+egg.js+mysql一个前后端分离留言板项目

    一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...

随机推荐

  1. tcp 重组原理

    原文: http://blog.chinaunix.net/uid-21768364-id-4823449.html 1 ．引言TCP/IP 协议现在已经广泛的被应用.数据在网络上应用 TCP/IP ...

  2. Utils 工具 推送

    work_weipa_百度云推送 2014-09-05 17:55 7人阅读 评论(0) 收藏 举报 问题:怎么实现消息推送? 回答:下载sdk,根据文档操作即可 资料:http://develope ...

  3. VMware克隆CentOS虚拟机后固定IP的问题

    由于克隆虚拟机,VMware只是修改了虚拟机的名字等信息,并没有修改虚拟硬盘中的任何信息,导致克隆后网卡的MAC地址和操作系统中记录的mac地址不符,导致eth0启动不起来.操作系统记录了一个新网卡的 ...

  4. JSON & XML 简析

    转载自:http://my.oschina.net/aofe/blog/269260 JSON: XML: JSON格式说明: HTML & XML 的对比 HTML: XML: HTML5新 ...

  5. Qt5：Qt中一些函数功能介绍

    1  .setContentsMargins 该函数用于设置窗口客户区中,四周空白边框的尺寸 , 类似于 word 中的 页边距设置 2.canonical Path 返回文件路径的规范路径 , 也就 ...

  6. bat 常用命令

    基础部分:======================================================================一.基础语法: 1.批处理文件是一个". ...

  7. linux下OpenOffice与SwfTools环境安装

    一.安装所需要的库与组件 yum install gcc* automake zlib-devel libjpeg-devel giflib-devel freetype-devel 二.安装open ...

  8. Init.rc分析(刘举奎)

    http://www.360doc.com/content/14/0926/20/13253385_412582822.shtml

  9. armstrong's programming erlang 2nd

    Re: json handling map functions in erlang 17 I have not read Joes final book on the matter (several ...

  10. window下查看端口命令

    原文:http://blog.csdn.net/ldl22847/article/details/7181210 http://blog.csdn.net/xinxin19881112/article ...