亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼

 更新時(shí)間:2012年06月06日 00:00:14   作者:  
用戶邊輸入計(jì)算同時(shí)進(jìn)行,告訴用戶還剩余多少可輸入的字?jǐn)?shù),當(dāng)超過規(guī)定的字?jǐn)?shù)后,點(diǎn)擊確定,會讓輸入框閃動
一、功能:
  1.用戶邊輸入計(jì)算同時(shí)進(jìn)行,告訴用戶還剩余多少可輸入的字?jǐn)?shù);
  2.當(dāng)超過規(guī)定的字?jǐn)?shù)后,點(diǎn)擊確定,會讓輸入框閃動
二、功能分析
  1.重點(diǎn)是用什么事件?
  標(biāo)準(zhǔn)瀏覽器用oninput,而IE則使用onpropertychange ,這兩個(gè)事件的發(fā)生條件,是文本框的值發(fā)生改變。
  2.字?jǐn)?shù)的計(jì)算。
    2.1一個(gè)中文算兩個(gè),一個(gè)符號或數(shù)字,英文,算一個(gè)。(如果是規(guī)定140個(gè)字,乘以2,那么就是280個(gè))
    2.2需要用到Math.ceil方法,因?yàn)樽詈筮€是要除以2來還原顯示給用戶的字?jǐn)?shù);
  3.閃動背景色
  這里用到了模運(yùn)算,因?yàn)槭侵貜?fù)的動作,第一次有顏色,第二次沒有顏色,這樣重復(fù)的動作,就有閃動效果.
  因?yàn)槿庋垡吹竭@二次有顏色和無顏色的效果,所以需要用到延時(shí),setTimeout和setInterval. 這里用到的是setInterval,因?yàn)橐貜?fù)動作。

感謝“妙味課堂”的視頻

在線演示:http://demo.jb51.net/js/2012/myinputCount/
打包下載:http://chabaoo.cn/jiaoben/55149.html


復(fù)制代碼 代碼如下:

$(function(){
var $tex = $(".tex");
var $but = $(".but");
var ie = jQuery.support.htmlSerialize;
var str = 0;
var abcnum = 0;
var maxNum = 280;
var texts= 0;
var num = 0;
var sets = null;
$tex.val("");
//頂部的提示文字
$tex.focus(function(){
if($tex.val()==""){
$("p").html("您還可以輸入的字?jǐn)?shù)<span>140</span>");
}
})
$tex.blur(function(){
if($tex.val() == ""){
$("p").html("請?jiān)谙旅孑斎肽奈淖郑?);
}
})
//文本框字?jǐn)?shù)計(jì)算和提示改變
if(ie){
$tex[0].oninput = changeNum;
}else{
$tex[0].onpropertychange = changeNum;
}
function changeNum(){
//漢字的個(gè)數(shù)
str = ($tex.val().replace(/\w/g,"")).length;
//非漢字的個(gè)數(shù)
abcnum = $tex.val().length-str;
total = str*2+abcnum;
if(str*2+abcnum<maxNum || str*2+abcnum == maxNum){
$but.removeClass()
$but.addClass("but");
texts =Math.ceil((maxNum - (str*2+abcnum))/2);
$("p").html("您還可以輸入的字?jǐn)?shù)<span>"+texts+"</span>").children().css({"color":"blue"});
}else if(str*2+abcnum>maxNum){
$but.removeClass("")
$but.addClass("grey");
texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
$("p").html("您輸入的字?jǐn)?shù)超過了<span>"+texts+"</span>").children("span").css({"color":"red"});
}
}
//按鈕點(diǎn)擊
$but.click(function(){
if($(this).is(".grey")){
sets = setInterval(flash,100);
$tex.addClass("textColor")
}
function flash(){
num++;
if(num == 4){
clearInterval(sets);
}
if(num%2 == 1){
$tex.addClass("textColor")
}else{
$tex.removeClass("textColor")
}
}
})
})

相關(guān)文章

最新評論