了解了键盘事件onkeydown,onkeyup.getElementsByTagname("em")返回的是集合，集合，使用的时候记得加a[0]下标。
setTimeout(step2,400);是400毫秒后在调用step2函数。
parseInt(sedNum,x)转换成 x 进制的数值，parseString()等 要有封装的思想。 ---------------别人代码---------------------
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="description" content="JavaScript实现新浪微博文字放大显示动画效果" /><meta name="description" content="张鑫旭web前端学习之css,jQuery,JavaScript" /><meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,jQuery,,JavaScript,demo页面,学习" /><meta name="author" content="张鑫旭,zhangxixnu" /><title>JavaScript实现新浪微博文字放大显示动画效果</title><link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" /><link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/css/common/common.css?version=1.1.2.72" /><link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/css/index/index.css?version=1.1.2.72" /><link rel="stylesheet" href="http://simg.sinajs.cn/miniblog/skin/skin_001/skin.css?version=1.1.2.72" /></head>
<div class="bigBg"> <div class="mblog"> <div class="toptray"> <div class="toptrayBg"></div> <div class="toptrayMain"> <div class="tTray_R"> <div class="MnbTit"> <ul> <li><a href="javascript:void(0);">新浪微博</a></li> <li class="banLine"> <img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/> </li> <li><a href="javascript:void(0);">我的首页</a></li> <li class="banLine"> <img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/> </li> <li><a href="javascript:void(0);">我的微博</a></li> <li class="banLine"> <img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/> </li> <li><a href="javascript:void(0);">随便看看</a></li> </ul> </div> </div> <div class="BanCont"> <ul> <li><a href="javascript:void(0);">设置</a></li> <li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li> <li><a href="javascript:void(0);">手机</a></li> <li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li> <li><a href="javascript:void(0);">找朋友</a></li> <li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li> <li><a target="_blank" href="javascript:void(0);">帮助</a></li> <li class="banLine"><img height="11" width="2" src="http://simg.sinajs.cn/miniblog/images/common/toptray/bannerLine.gif"/></li> <li><a href="javascript:void(0);">退出</a></li> </ul> </div> <div class="tTray_L"> <div id="m_search" class="search"> <input type="text" value="搜索话题、朋友..." id="m_keyword" class="fm_txt"/> <div class="searchBtn"><a id="m_submit" href="javascript:void(0);">搜索</a></div> </div> </div> </div> </div> <!-- logo部分 --> <div class="bigName"> <div id="fbq" class="logo"><a href="http://t.sina.com.cn/1263362863"></a></div> <div class="searchFri"><a href="/invite/invite.php">邀请朋友关注我</a></div> </div> </div> <!-- 主体部分 --> <div class="main"> <div class="mainBottomBg"> <!-- 左半部分 --> <div class="mainL"> <div class="fbq"> <div class="box_1"><!--php需要输出的提示文本--></div> <div id="publisher_info" class="fbqCount">你还可以输入<em class="bold">140</em>字</div> <div class="box_2"> <textarea id="publish_editor"></textarea> </div> <div class="box_3"> <span id="publisher_image" class="span_1" style="margin-left:20px;"> <a unselectable="on" href="javascript:void(0);">插入图片</a> </span> <span id="publisher_topic" class="span_2"> <a href="javascript:void(0);">插入话题</a> </span> <a id="publisher_submit" class="btn2" href="javascript:void(0);" style="float:right; margin-right:58px;"></a> <!-- <a id="publisher_submit" class="btn" href="javascript:void(0);"/> --> </div> </div> <div class="feedBox" id="feedBox"> <div id="feedTitle" class="feedBoxNav"> <span style="" id="feed_msg_new" class="spanFloat"> <a href="javascript:void(0);">有新微博，刷新看看</a> </span> <span class="bold" style="color:#444444;">我的首页</span> <span> </span> <div class="mBlog_linedot"></div> </div> <div class="feedList"> <div class="feedCell"> <div class="avatar"> <a href="http://t.sina.com.cn/zhangxinxu"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a> </div> <div class="Contant"> <div class="oriTxt"> <p> <a title="我" href="http://t.sina.com.cn/zhangxinxu">我</a>：<span>刚翻译了一篇技术文章：让网络更快一些——最小化浏览器中的回流(reflow) <a title="http://www.zhangxinxu.com/wordpress/?p=311" target="_blank" href="http://www.zhangxinxu.com/wordpress/?p=311">http://sinaurl.cn/hfGnM</a> <a href="http://t.sina.com.cn/k/web">#web#</a> <a href="http://t.sina.com.cn/k/%25E4%25BC%2598%25E5%258C%2596">#优化#</a> <a href="http://t.sina.com.cn/k/reflow">#reflow#</a></span> </p> </div> <div class="from"> <span class="option"> <cite class="delete"><a href="javascript:void(0);">删除</a></cite> | <cite class="forward">转发</cite> | <cite class="collect"><a href="javascript:void(0);">收藏</a></cite> | <cite class="reply"> <a href="javascript:void(0);">评论</a> </cite> </span> <span class="mycome"><cite><a href="#zhangxinxu">1分钟前</a></cite>来自新浪微博 </span> </div> </div> </div> <div class="mBlog_linedot"></div> </div> </div> </div> <!-- 右半部分 --> <div class="mainR"> <div class="person2"> <div class="person_content"> <div class="person_head"> <p class="userPt person_pt"> <a href="javascript:void(0);"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a> </p> <div class="person_info"> <p class="person_nm"><strong>张鑫旭</strong></p> <p title="浙江 杭州" class="person_level">浙江 杭州</p> </div> <div class="clear"></div> </div> <div class="person_atten"> <div class="person_atten_l"> <p class="num"><strong><a href="javascript:void(0);">792</a></strong></p> <p class="person_atten_link"><a href="javascript:void(0);">关注</a></p> </div> <div class="person_atten_l boxW"> <p class="num"><strong><a href="javascript:void(0);">301</a></strong></p> <p class="person_atten_link"><a href="javascript:void(0);">粉丝</a></p> </div> <div class="person_atten_r" style="position: relative;"> <p class="num"> <strong style="position:absolute; width:46px; height:28px; line-height:28px; left:-4px; top:-3px; text-align:center;"> <a href="javascript:void(0);" id="sendNum">166</a> <a href="#no" id="absNum" style="position:absolute; width:46px; height:28px; left:0; top:0; display:none;"></a> </strong> </p> <p></p> <p class="person_atten_link"><a href="javascript:void(0);">微博</a></p> </div> <div class="clear"></div> </div> <div class="boxRNav"> <ul> <li class="navStyle"><span class="span_home">我的首页</span></li> <li class="navStyle2"><span class="span_mblog"><a href="/favs">我的收藏</a></span></li> <li class="navStyle2"><span class="span_mblog"><a href="/atme">@我的</a></span></li> <li class="navStyle2"><span id="toptray_ring" class="span_com"><a href="/comments">我的评论</a></span></li> <li class="navStyle2"><span id="toptray_ring_message" class="span_com"><a href="/messages">我的私信</a></span></li> </ul> </div> </div> </div> <!--话题列表--> <div class="f_pro"> <div class="title bold">关于我</div> <div class="con">86出生，小小本科，本想做个生物学者，谁知大学误入歧途，进入了互联网行业，已无回头路，正朝着理想奋斗。</div> <div class="more"><a href="javascript:void(0);">修改</a>>></div> </div> </div> </div> </div></div><script type="text/javascript"> var weibo = { insertBtn: document.getElementById("publisher_submit"), insertArea : document.getElementById("publish_editor"), insertRemind: document.getElementById("publisher_info"), insertBody: document.getElementById("feedBox"), insertTitle: document.getElementById("feedTitle"), sendNum: document.getElementById("sendNum"), absNum: document.getElementById("absNum") }; //当文本域获取焦点后，当键盘松开时，判断里面的字符是否为空，从而改变按钮的显示状态和文字的个数 var wordLimit = function(obj,num,chg){ obj.onkeyup = function(){ weibo.insertText = weibo.insertArea.value; if(obj.value.length >= 1){ if(obj.value.length > num){ chg.innerHTML = "已超出<em class=‘bold‘>" + (obj.value.length - num) + "</em>字"; chg.style.color = "#f00"; weibo.insertBtn.className = "btn2"; }else{ chg.innerHTML = "还可以输入<em class=‘bold‘>" + (num - obj.value.length) + "</em>字"; chg.style.color = "#fff"; weibo.insertBtn.className = "btn"; } }else{ weibo.insertBtn.className = "btn2"; } }; if(obj.value.length >= 1 && obj.value.length <=num){ chg.innerHTML = "还可以输入<em class=‘bold‘>" + (num - obj.value.length) + "</em>字"; chg.style.color = "#fff"; weibo.insertBtn.className = "btn"; } }; //由于火狐，chrome浏览器在页面刷新时文本域中保留内容，故在加载时即验证一次 wordLimit(weibo.insertArea,140,weibo.insertRemind); weibo.insertArea.onfocus = function(){ wordLimit(this,140,weibo.insertRemind); }; weibo.insertBtn.onclick = function(){ if(this.className === "btn"){ insert(); number(weibo.absNum,weibo.sendNum,18,26); } return false; }; var insert = function(){ weibo.insertText = weibo.insertArea.value; weibo.insertHTML = ‘<div class="feedList"><div class="feedCell"><div class="avatar"><a href="http://t.sina.com.cn/zhangxinxu"><img title="张鑫旭" src="http://tt8.sinaimg.cn/1263362863/50/1253773643"/></a></div> <div class="Contant"><div class="oriTxt"><p>‘+weibo.insertText+‘</p></div><div class="from"><span class="option"><cite class="delete"><a href="javascript:void(0);">删除</a></cite> | <cite class="forward">转发</cite> | <cite class="collect"><a href="javascript:void(0);">收藏</a></cite> | <cite class="reply"><a href="javascript:void(0);">评论</a></cite></span><span class="mycome"><cite><a href="#zhangxinxu">1分钟前</a></cite>来自新浪微博 </span></div></div></div><div class="mBlog_linedot"></div>‘; var insertDiv = document.createElement("div"); insertDiv.className = "feedList"; insertDiv.innerHTML = weibo.insertHTML; weibo.insertBody.insertBefore(insertDiv,weibo.insertTitle.nextSibling); }; var number = function(node,aim,minnum,maxnum){ var num = parseInt(aim.innerHTML,10); aim.style.zoom = 1; node.style.display = "inline-block"; node.innerHTML = num; var fontSize = minnum; var opacity = 1; var step = function(){ fontSize+=1; opacity-=0.09; node.style.fontSize = fontSize + "px"; node.style.opacity = opacity; aim.style.opacity = opacity; node.style.filter = "Alpha(opacity="+opacity*100+")"; aim.style.filter = "Alpha(opacity="+opacity*100+")"; node.style.zoom = 1; if(fontSize < maxnum){ setTimeout(step,40); }else{ num+=1; node.innerHTML = num; aim.innerHTML = num; setTimeout(step2,40); } }; setTimeout(step,10); var step2 = function(){ fontSize-=1; opacity+=0.09; node.style.fontSize = fontSize + "px"; node.style.opacity = opacity; aim.style.opacity = opacity; node.style.filter = "Alpha(opacity="+opacity*100+")"; aim.style.filter = "Alpha(opacity="+opacity*100+")"; if(fontSize > minnum){ setTimeout(step2,40); }else{ node.style.display = "none"; } }; };</script><!--<script type="text/javascript">var textval=document.getElementById("publish_editor"), fbbtn=document.getElementById("publisher_submit"), numdiv=document.getElementById("publisher_info"), numem=numdiv.getElementsByTagName("em"), numlength=textval.value.length, num=numem[0].innerHTML, absNum=document.getElementById("absNum");
textval.onkeyup=function(){ if(textval.value!=""){ fbbtn.className="btn"; var numlength=textval.value.length, num=numem[0].innerHTML; if(numlength<=num){ numem[0].innerHTML=(num-numlength); }else{ numdiv.innerHTML="您已经超出"+(numlength-num)+"字"; } }else{ fbbtn.className="btn2"; } } if(numlength<=num){ numem[0].innerHTML=(num-numlength); } fbbtn.onclick=function(){ absNum.style.display="inline-block"; var sedNum=document.getElementById("sendNum").innerHTML;
var minSize=18,maxSize=26; var fontSize=minSize; var afNum=parseInt(sedNum)+1;
absNum.innerHTML=afNum; var step=function(){ fontSize+=1; absNum.style.fontSize=fontSize+"px"; if(fontSize<maxSize){ setTimeout(step,400); }else{ document.getElementById("sendNum").innerHTML=afNum; setTimeout(step2,400); } } setTimeout(step,10); var step2=function(){ fontSize-=1; absNum.style.fontSize=fontSize+"px"; if(fontSize>maxSize){ setTimeout(step2,40); }else{ absNum.style.display="none"; } }
}
</script>--></body></html>
时间： 2024-10-20 14:06:56