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

* {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用的很多，源生基本忘得都差不多了。反正公司也没事儿了，就写一个这个效果，以前也写过，但没现在写的这么顺。

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