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. BASE64-客户端（js）加码-服务器端（c#）解码，URL传递“汉字参数”解决方法

    HttpUtility.UrlEncode 在 Encode 的时候, 将空格转换成加号('+'), 在 Decode 的时候将加号转为空格, 但是浏览器是不能理解加号为空格的, 所以如果文件名包含了 ...

  2. C#入门经典（2-重置窗体布局，界面介绍，错误列表）

  3. nullable,kindof,泛型新特性

    文章来自: http://blog.csdn.net/majiakun1/article/details/46530245 Overview 自 WWDC 2015 推出和开源 Swift 2.0 后 ...

  4. CentOS6.5 安装snort

    本机CentOS6.5最大化安装,以下安装所需组件也是最大化安装之后仍需自己安装的. 1.安装libpcap与libpcap-devel yum -y install libpcap* 2.安装lib ...

  5. OCR图片识别引擎

    OCR引擎 OCR(Optical Character Recognition)是指使用扫描仪或数码相机对文本资料进行扫描成图像文件,然后对图像文件进行分析处理,自动识别获取文字信息及版面信息的软件. ...

  6. Qt5：无边框窗口拖动

    在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...

  7. Chapter 1 First Sight——5

    "He's in a wheelchair now," Charlie continued when I didn't respond, 他现在在轮椅上了,没等我回答查理斯就继续说 ...

  8. 基于Verilog HDL 各种实验

    菜鸟做的的小实验链接汇总:           1.基于Verilog HDL 的数字时钟设计 2.乘法器 3.触发器(基本的SR触发器.同步触发器.D触发器) 4.基于Verilog HDL的ADC ...

  9. JS检测图片的大小

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  10. ecstore中kvstore之memcached

    memcached的安装 详细见 http://blog.csdn.net/motian06/article/details/17558831 memcached扩展的安装 详细见 http://bl ...