「闲来无事」写了个类似于微博的效果

* {margin: 0;padding: 0;font-size: 20px;font-family: ‘microsoft yahei‘;}
.clear {overflow: hidden;height: 0;clear: both;}
textarea {width: 500px;height: 150px;border:1px #cecece solid;resize: none;float: left;}
#btn {float: left;background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);border: none;width: 98px;height: 30px;line-height: 30px;}
p {float: left;}
.box1 {width: 600px;border: 1px red solid;}
ul li {background-color: #fff;}
.layer {width: 300px;height: 100px;border: 1px red solid;border-radius: 10%;}

window.onload = function(){
    var num = document.getElementById(‘num‘);
    var btn = document.getElementById(‘btn‘);
    var text = document.getElementById(‘text‘);
    var texts;
    var time;
    // 算输入框有多少字
    font = function(){
        texts = text.value;
        num.innerHTML = texts.length;
        if (num.innerHTML > 140) {
            num.style.color = ‘red‘;
        }else {
            num.style.color = ‘black‘;
        }
    }
    // 每半秒钟刷新一次字数；
    time = setInterval("font()",100);
    min = function(){
        // 判断输入文字长度
        texts = text.value;
        if (texts.length == 0) {
            alert(‘请输入文字‘);
            return false;
        } else if(texts.length <= 2){
            alert(‘内容太短，请重新输入‘);
            return false;
        } else if(texts.length > 140){
            num.style.color = ‘red‘;
            alert(‘内容在140个字之内，请重新输入‘);
            return false;
        } else {//正确输入文字内容，添加节点；
            var lists = document.getElementById(‘list‘);
            var lists_li = lists.getElementsByTagName(‘li‘);
            // 创建节点
            var new_li = document.createElement("li");
            // 插入节点
            new_li.innerHTML = texts;
            lists.appendChild(new_li);
            // 所有li节点长度；
            var li_length = lists_li.length;

            // 奇偶背景色
            if (lists_li.length > 1){
                for (var i = 0; i < li_length; i++) {
                    if (i%2 == 1) {
                        lists_li[i].style.backgroundColor = #fff‘;
                    } else {
                        lists_li[i].style.backgroundColor = #cecece‘;
                    };
                };
            }
            // 大于10条，删除第一条。
            if (lists_li.length > 10) {
                lists.removeChild(lists_li[0]);
            }
        };
    };
    btn.onclick = function(){
        min();
    }
}

<div class="box1">
        <textarea name="" id=‘text‘ onKeyUp=‘font();‘></textarea>
    <input type="button" name="" value="发布" id=‘btn‘>
    <p><span id=‘num‘>0</span>&nbsp;/&nbsp;140</p>
    <div class="clear">&nbsp;</div>
</div>
<div class="box2">
    <ul id=‘list‘>
    </ul>
</div>
<div class="layer">
    <div class="layers">
        <p>请输入文字！</p>
        <input type="button" name="" value="确定">
    </div>
</div>

在工作中JQ用的很多，源生基本忘得都差不多了。反正公司也没事儿了，就写一个这个效果，以前也写过，但没现在写的这么顺。

对比我还新的人能提供一下帮助吧，希望高手大神也能对我提出一些指导和建议。