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. 用CSS让文字居于div的底部

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

  2. 我的第一个Android项目之环境搭建

    开发IDE Android Studio2.0 + Genymotion + JDK1.8 网盘地址:http://pan.baidu.com/s/1kUSVqaN Android Studio 我的 ...

  3. 用扩展方法实现DevExpress-GridControl级联效果

    首先,让我们先回顾下.Net中扩展方法的特征: 1.  必须在一个非嵌套.非泛型的静态类中: 2.  至少有一个参数(this 作前缀的参数): 3.  第一个参数必须附加this做前缀: 4.  第 ...

  4. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

  5. .htaccess 保护文件夹

    想要保护admin文件夹,经过以下两个步骤: 步骤一.可以用记事本新建文件.htaccess,输入以下内容: AuthType BasicAuth UserFile D:/AppServ/www/Hi ...

  6. mysql 赋给用户权限 grant all privileges on

    遇到了 SQLException: access denied for  @'localhost' (using password: no) 解决办法   grant all privileges o ...

  7. ural1439 Battle with You-Know-Who

    Battle with You-Know-Who Time limit: 2.0 secondMemory limit: 64 MB Rooms of the Ministry of Magic ar ...

  8. Bootstrap Table的使用

    前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap. <link href="${ctx} ...

  9. hibernate--联合主键--annotation

    有3种方式: 1.@Embeddedable 2.@EmbeddedId 3. @IdClass 2,3 最常用 一, @Embeddedable 1.新建TeacherPK.java, 加入@Emb ...

  10. 转发：iOS之textfield用法大全

    转发至:http://m.blog.csdn.net/article/details?id=8121915 //初始化textfield并设置位置及大小 UITextField *text = [[U ...