J.chong

關注點：
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}

運行

通用html代碼

<div id="box">
    <div id="boxBar">0%</div>
    <div id="boxText">0%</div>
</div>

通用方法

    function progressFn(cent) { //cent傳百分比
        var box = document.getElementById('box')
        var box2 = document.getElementById('box2');
        var boxBar = document.getElementById('boxBar')
        var boxText = document.getElementById('boxText')
        var allWidth = parseInt(getStyle(box, 'width')); //500
        boxBar.innerHTML = cent + '%'
        boxText.innerHTML = cent + '%'
        boxBar.style.clip = 'rect(0px,' + (cent / 100) * allWidth + 'px,40px,0px)';//改變第一層的寬度
    }

通用css

    #box{ width: 500px; height: 40px; border: 1px solid #c8c8c8; background: #fff; position: relative; margin-left: auto; margin-right: auto;}
    #boxBar{ position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: #ffffff; text-align: center; font-size: 20px; font-weight: bold; clip: rect(0px,0,40px,0px); background: #00a1f5;}
    #boxText{ position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: #000000; text-align: center; font-size: 20px; font-weight: bold;}

下面是硬編碼方式例子

<div id="box2" style="display: none;">
    <img src="http://b.zol-img.com.cn/desk/bizhi/image/6/1920x1080/1436965788437.jpg" rel="nofollow"/>
    <img src="http://attach.bbs.miui.com/forum/201405/24/093305l2tuzftkogegn1if.jpg" rel="nofollow"/>
    <img src="http://img.ivsky.com/img/bizhi/pic/201506/26/dal_shabet-005.jpg" rel="nofollow"/>
    <img src="http://i1.shouyou.itc.cn/2014/news/2014/09/11/1920x1080bz0912_06.jpg" rel="nofollow"/>
    <img src="http://i2.download.fd.pchome.net/g1/M00/10/18/ooYBAFWyD6WIMSmsAAeRvXnu1PwAACnFwIjKkkAB5HV807.jpg" rel="nofollow"/>
</div>

    //硬編碼方式
    var box = document.getElementById('box')
    var box2 = document.getElementById('box2');
    var img = box2.getElementsByTagName('img');
    var iNow = 0; //當前百分比
    for (var i = 0; i < img.length; i++) {
        (function (i) {
            var yimg = new Image();//圖片預加載對象  //頁面在window.onload之後執行，若生效則不加window.onload
            yimg.onload = function () {
                iNow++;
                progressFn(parseInt(iNow / img.length * 100));
                if (iNow == img.length) {
                    box2.style.display = 'block'
                    box.style.display = '';
                }
            }
            yimg.src = img[i].src;
        })(i)
    }

運行