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. 客户调查(client)

    客户调查(client) 题目描述 公司派你去和几位客户面谈,以了解他们对公司产品的意见.你逐个打电话与客户联系,得知他们一般都很忙,不过他们还是可以为你抽出一点时间.现在的问题是有些客户的时间有冲突 ...

  2. CALayer --> UIView

    一.CALayer和UIView的关系 UIView显示在屏幕上归功于CALayer 可以说:UIView依赖CALayer,又高于CALayer 通过调用drawRect方法来渲染自身的内容,调节C ...

  3. （转）多个mapreduce工作相互依赖处理方法完整实例（JobControl）

    多个mapreduce工作相互依赖处理方法完整实例(JobControl) 原文地址:http://mntms.iteye.com/blog/2096456?utm_source=tuicool&am ...

  4. python之路：进阶篇 内置函数

     li = [11, 22, 33] news = map(  li = [100, 2200, 3300] news = map(  [13, 24, 35] [11, 11, 11] [22, 4 ...

  5. 转 linux目录介绍

    以下用一个表格来罗列linux默认的目录或文件及其用途: 目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - / ...

  6. springMVC注解及优化

    1. 新建web project 2. 添加jar 3. 改写web.xml, 注意spring-servlet.xml的名字 <?xml version="1.0" enc ...

  7. JAVA基础---面向对象

    方法的重载Overload: 一个类中可以定义有相同的名字, 参数不同的多个方法. 调用时, 会根据不同的参数选择对应的方法. static: 在数据区, 可以计数,属于类,不属于对象: public ...

  8. gulp用法

    转载:http://segmentfault.com/blog/laopopo/1190000000372547 http://javascript.ruanyifeng.com/tool/gulp. ...

  9. CodeForces 617D Polyline

    无脑暴力判断. #include<cstdio> #include<cstring> #include<vector> #include<cmath> ...

  10. JMS连接WMQ及收发消息

    因为对JMS的了解也只算入门级,有些概念也很模糊,不过,卤煮会尽可能去介绍的.另外,sample code都调试过可以跑. 1.神马是JMS? jms即Java消息服务(Java Message Se ...