J.chong

關注點：
cloneNode(true); 子節點所有節點一起複製；
cloneNode(false);不複製子節點下的內容；
思想：移動ul，動態設置ul寬度li.length oneSize，移動ul的距離-iNow oneSize; 每個li的寬度：元素.offsetWidth+1;循環ul.removeChild(元素),一個個刪除，所以總是刪除第一個；
簡陋佈局

<div id="box">
    <ul id="ul">
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
    </ul>
</div>
<input type="button" value="切換" id="input1"/>

window.onload = function () {
    var inp = document.getElementById('input1')
    var box = document.getElementById('box')
    var ul = document.getElementById('ul')
    var li = ul.getElementsByTagName('li')
    var oneSize = li[0].offsetWidth + 1; //li寬度
    var iNum = 4; //一次走多少個元素
    var onoff = true;//連續點擊錯亂bug
    getWidth()
    function getWidth() { //獲取ul寬度方法
        ul.style.width = li.length * oneSize + 'px'
    }
    inp.onclick = function () {
        //cloneNode(),cloneNode(true) 一起複製子節點，cloneNode(false),不會複製子節點
        if (onoff) {
            onoff = false; //一上來 false
            for (var i = 0; i < iNum; i++) {
                var oli = li[i].cloneNode(true);
                ul.appendChild(oli)
                getWidth()
            }
            startMove(ul, {left: -iNum * oneSize}, function () { //運動結束後再刪除前面的，才能循環
                for (var i = 0; i < iNum; i++) {
                    ul.removeChild(li[0]); //刪除
                    ul.style.left = '0'
                }
                onoff = true  //運動線束後可點擊，onoff = true;
            })
        }
    }
}

運行

關注點：
onchange事件：光標消失時觸發1次
onpropertychange事件：連續觸發，IE下使用
oninput事件：連續觸發，現代下使用
判斷ie簡短方法：

var ie = !-[1,] //IE9已修復

推薦：

if(!window.VBArray){
    alert('Not IE')
}
else{
    alert('IE')
}

閃動背景：開定時器，var iNum = 0; iNum++
單字節變雙字節[計數]
return String(str).replace(/¹/g, 'aa').length;

簡陋佈局：

<div id="box">
    <p>《新浪圍脖社區公約徵求意見》意見徵求</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <a class="dis" href="javascript:;">發布</a>
</div>

window.onload = function () {
    var box = document.getElementById('box');
    var p = box.getElementsByTagName('p')[0];
    var t = box.getElementsByTagName('textarea')[0];
    var a = box.getElementsByTagName('a')[0];
    var onoff = true;//開關焦點進來離開
    var ie = !-[1,];//簡短判斷ie
    var timer = null;//背景閃動定義
    var iNum = 0;//背景閃動定義
    t.onfocus = function () {
        if (onoff) {
            p.innerHTML = '打擊虛假信息，建設文明圍脖，還可輸入<span>140</span>字'
            onoff = false;
        }
    };
    t.onblur = function () {
        if (t.value == '') {
            p.innerHTML = '《新浪圍脖社區公約徵求意見》意見徵求'
            onoff = true;
        }
    }
    if (ie) {
        t.onpropertychange = toChange;
    }
    else {
        t.oninput = toChange;
    }
    function toChange() {
        var num = Math.ceil(getLength(t.value) / 2);//找到字數
        var span = box.getElementsByTagName('span')[0]
        if (num < 140) {
            span.innerHTML = 140 - num;
        }
        else {
            span.innerHTML = num - 140;
            span.style.color = 'red'
        }
        if (t.value == '' || num > 140) {
            a.className = 'dis'
        }
        else {
            a.className = ''
        }
    }
    a.onclick = function () {
        if (this.className == 'dis') {
            //閃動，定時器運動1s
            clearInterval(timer)
            timer = setInterval(function () {
                if (iNum == 4) { //走兩輸即可
                    clearInterval(timer)
                    iNum = 0;
                }
                else {
                    iNum++;
                }
                if (iNum % 2) { //1
                    t.style.background = 'rgb(255, 215, 215)'
                }
                else { //0
                    t.style.background = ''
                }
            }, 100)
        }
        else {
            alert('發布成功')
        }
    }
    function getLength(str) { //判斷單字節，0-255 使用 x = xx 記2字節
        return String(str).replace(/[^\x00-\xff]/g, 'aa').length; //aa轉為2字節
    }
}

body{font-size:12px}#box{width:400px;margin:20px auto}#box textarea{width:400px;height:100px;resize:none;overflow:hidden}#box p{float:right}#box a{width:80px;height:30px;font-size:16px;line-height:30px;text-align:center;float:right;background:#049E04;color:#fff;text-decoration:none;margin-right:-6px;margin-top:10px}#box a.dis{background:#ccc;color:#666}

運行