JavaScript Example learning two-class Sina Weibo input box

This case to achieve the following effect, specific to the Sina Weibo website micro-blog release box

Achieve the following effects
Effect 1: When the cursor moves into the text box, the text above the text box changes to show the remaining number of words that can be entered, and when the cursor moves out of the text box and there is no input in the text box, the original default text is restored

Effect 2: Text input, text box prompts the remaining text number, the remaining text word count with the input words and reduce, two letters count a word, a Chinese character counted a word

Effect 3: When the input box is empty, or the text in the input box is more than 140 words, the Publish button is not available, otherwise, when the Publish button is unavailable, click the Publish button, the text box will appear red background, and flashing two times

The corresponding HTML code:

<! DOCTYPE html>"ZH_CN">"UTF-8"> <title> Weibo Publishing box effects </title> <style>Body{font-size:12px} div{width:400px;margin:20px auto;} Div p{float: Right;} Div Textarea{width: -%; height:150px;} Div a{float: right;padding:10px 20px;font-size:16px;background: #0f0; color: #fff;} Div a.disable{background: #ccc; color:#666;} </style>"Div1"> <p> What are they reading? Enterprise # Private Collection List #, leaders ' thought feast </p> <textarea name=""Id=""></textarea> <a href="#" class="Disable"> Release </a> </div> <script src="Js/weiboinput.js"></script></body>Weibo Publishing box HTML code
The corresponding JavaScript code:
//achieve the following effects//effect 1: When the cursor moves into the text box, the text above the text box changes to show the remaining number of words that can be entered//restores the original default text when the cursor moves out of the text box and there is no input in the text box//Effect 2: Text input, text box prompts the remaining text number, the remaining text word count with the input words and reduce, two letters count a word, a Chinese character counted a word//Effect 3: When the input box is empty, or the text in the input box is more than 140 words, the Publish button is not available, otherwise, when the Publish button is unavailable, click the Publish button, the text box will appear red background, and flashing two timesDocument.addeventlistener ('domcontentloaded', function () {varOdiv = document.getElementById ('Div1'); varOP = Odiv.getelementsbytagname ('P')[0]; varOT = Odiv.getelementsbytagname ('textarea')[0]; varOA = Odiv.getelementsbytagname ('a')[0]; //Achieve effect 1Ot.addeventlistener ('Focus', function () {op.innerhtml="You can also enter a <span>140</span> word"; }, false); Ot.addeventlistener ('Blur', function () {if(! This. Value) {op.innerhtml="What are they reading? Enterprise # Private Collection List #, a leader's thought feast"; }    }, false); //achieve effect 2, continuous input is triggered in the standard input event, the Onproperty event is triggered in IEOt.addeventlistener ('input', function () {varOS = Odiv.getelementsbytagname ('span')[0]; varCurlength = Math.ceil (GetLength (ot.value)/2); if(Curlength <= $) {os.innerhtml= $-curlength; } Else{os.innerhtml= Curlength- $; OS.style.color='Red'; }        if(Curlength <=0|| Curlength > $) {Oa.classname='Disable'; } Else{oa.classname="'; }    }, false); function GetLength (str) {returnStr.replace (/[^\x00-\xff]/g,'AA'). length; }    //Achieve Effect 3Oa.addeventlistener ('Click', function () {vartimer; varnum =0; if(Oa.classname = = ='Disable') {            //the background of the text box turns red and flashes two times//clearinterval (timer); //timer = setinterval (function () {//num++; //if (num = = 4) {//clearinterval (timer); //num = 0; //     }            //if (num% 2) {//oT.style.background = ' Pink '; //} else {//oT.style.background = "; //     }            //}, 150); //attempts to use a timeout call to simulate intermittent callscleartimeout (timer); function Changebgcolor () {num++; if(Num >=5) {cleartimeout (timer); Num=0; return; }                if(num%2) {OT.style.background='Pink'; } Else{OT.style.background="'; } Timer= SetTimeout (Changebgcolor, Max); } Timer= SetTimeout (Changebgcolor, Max); } Else{alert ('Weibo has been released! '); }    }, false);}, false);
Micro-blogging box JavaScript code
Harvest:
1. Background flashing! Contact Animation!
2. Text box continuous input event, ie under Onpropertychange, the standard is input
JavaScript Example learning two-class Sina Weibo input box