jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:54:54

jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析

jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析:本文實例講述了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法。分享給大家供大家參考，具體如下：點擊button時，提示信息顯示，8秒后，信息隱藏。 <input id=place_order name=place_order type=submit /> <div c

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析:本文實例講述了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法。分享給大家供大家參考，具體如下：點擊button時，提示信息顯示，8秒后，信息隱藏。 <input id=place_order name=place_order type=submit /> <div c

本文實例講述了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法。分享給大家供大家參考，具體如下：

點擊button時，提示信息顯示，8秒后，信息隱藏。

<input id="place_order" name="place_order" type="submit" />
<div class="after_submit_remind" style="display: none;">
 請耐心等待，這段文本顯示8秒后會消失，安拓網(wǎng)絡。
</div>

jQuery(document).ready(function(){
 jQuery(document).on('click', 'input#place_order', function(){
 jQuery(".after_submit_remind").show().delay(8000).hide(0);
 });
});

擴展：令時間每秒自動減1；

將text中的“8”改為“9”；

jQuery(document).on('click', 'input#place_order', function(){
 jQuery(".after_submit_remind").show().delay(8000).hide(0);
 jQuery(function (){
 reduceTime();
 });
 function reduceTime() {
 var auto_reduce = jQuery("#auto-time").html();
 if(auto_reduce == 0){
 jQuery("#auto-time").html("9");
 }else{
 jQuery("#auto-time").html(--auto_reduce);
 setTimeout(reduceTime,1000);
 }
 };
});/*顯示 8s 的content*/

感興趣的朋友可以使用如下工具測試上述代碼運行效果：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.jb51.net/code/WebCodeRun

更多關于jQuery相關內容可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com