基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼
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
$(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")
}
}
})
})
- 基于HTML+CSS,jQuery編寫的簡易計(jì)算器后續(xù)(添加了鍵盤監(jiān)聽)
- 一個(gè)簡單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
- jquery精度計(jì)算代碼 jquery指定精確小數(shù)位
- jQuery實(shí)現(xiàn)根據(jù)生日計(jì)算年齡 星座 生肖
- jQuery實(shí)現(xiàn)購物車計(jì)算價(jià)格功能的方法
- jQuery實(shí)現(xiàn)購物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
- Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
- js數(shù)值計(jì)算時(shí)使用parseInt進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換(jquery)
- jQuery實(shí)現(xiàn)的簡單在線計(jì)算器功能
相關(guān)文章
jQuery中offsetParent()方法用法實(shí)例
這篇文章主要介紹了jQuery中offsetParent()方法用法,實(shí)例分析了offsetParent()方法的功能、定義及返回匹配元素所有祖先元素中第一個(gè)采用定位的祖先元素時(shí)的使用技巧,需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實(shí)例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下2016-12-12jQuery經(jīng)過一段時(shí)間自動隱藏指定元素的方法
這篇文章主要介紹了jQuery經(jīng)過一段時(shí)間自動隱藏指定元素的方法,實(shí)例分析了兩種比較常用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05jQuery 開發(fā)者應(yīng)該注意的9個(gè)錯(cuò)誤
jQuery 開發(fā)者應(yīng)該注意的9個(gè)錯(cuò)誤,使用jquery的朋友可以參考下2012-05-05jQuery+.net實(shí)現(xiàn)瀏覽更多內(nèi)容(改編php版本)
改編自php版本這里記錄.net 下的實(shí)現(xiàn);首先創(chuàng)建數(shù)據(jù)庫表test,并插入一些測試數(shù)據(jù)接下來建立一個(gè)html文件,感興趣的朋友可以參考下哈,希望您可以幫助到你2013-03-03