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. qemu -hda /dev/sdc -m 1024 -vga std

    同事拿了个烂u盘让我给他做个启动盘,用cp *.iso /dev/sdc怎么也启动不了. 改用dd if=copied/20140923/debian-7.6.0-amd64-DVD-1.iso of ...

  2. 转 SQL 基础--> NEW_VALUE 的使用

    --=============================== -- SQL 基础--> NEW_VALUE 的使用 --=============================== 通常 ...

  3. 用CSS让文字居于div的底部

    css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...

  4. hibernate 使用sql 查询（setResultTransformer）

    使用方法举例如下: public List findByOid(Object oid) {  log.debug("finding all WatershedAnalyse instance ...

  5. android脚步---图片浏览

    简单的图片浏览器,实现图像显示与点击切换下一张 首先在main.xml里面定义一个简单的线性布局容器. <?xml version="1.0" encoding=" ...

  6. Java对数函数及Java对数运算

    Java对数函数及Java对数运算 2010-05-17 10:32 中国IT实验室 佚名   关键字:Java   Java对数函数的计算方法非常有问题,然而在API中却有惊人的误差.但是假如运用了 ...

  7. 安装tomcat过程中出现问题小结

    报错信息如下:Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these ...

  8. (转)mahout中k-means例子的运行

           首先简单说明下,mahout下处理的文件必须是SequenceFile格式的,所以需要把txtfile转换成sequenceFile.SequenceFile是hadoop中的一个类,允 ...

  9. HDU 2121 Ice_cream’s world II 最小树形图 模板

    开始学习最小树形图,模板题. Ice_cream’s world II Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...

  10. 在MAC下配置MySQL 5.7 数据库的编码问题

    1.MySQL 5.7 for MAC 默认没有my.cnf文件 ,首先 新建my.cnf文件: 2.在my.cnf文件追加 [mysqld] character-set-server=utf8mb4 ...