使用jquery實現文字框輸入特效：文字逐個顯示逐個消失反覆迴圈
阿新 • • 發佈：2018-12-17
前兩天看到某個網站上的輸入框有個小特效：文字逐個顯示，並且到字串最大長度後，逐個消失，然後重新迴圈顯示消失，迴圈顯示字串陣列。我對這個小特效有點好奇，於是今天自己嘗試用jquery寫一個簡單的小demo，終於把效果整出來了。首先看一下實現後的效果：
接下來上程式碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字逐個顯示逐個消失</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--引入jquery外掛 --> <style type="text/css" rel="stylesheet"> #inputArea{ /*簡單設定input框的一些屬性 */ margin: 30px; width: 300px; height: 50px; font-size: 20px; border: 1px solid #cccccc; } </style> </head> <body> <input id="inputArea" type="text"/> <script type="text/javascript"> let arr = ["yjry.com", "yjry.cn", "yjry.org", "yjry.xyz", "yjry.top"];//定義要顯示的字串陣列 let index = 0;//顯示的字串索引，預設從陣列中第一個字串開始顯示 let str = "";//存放要顯示的字串$input = $("#inputArea");//獲取input框的jquery物件 let timer1 = null;//定義兩個定時器 let timer2 = null; let endIndex1 = 1;//定義字串擷取的索引位置，兩個索引分別用於顯示和消失 let endIndex2 = 0; let flag = false;//判斷當前字串是否顯示完畢 $(function () {//dom樹載入完成後執行操作，類似但不同於js的window.onload timer1 = setInterval(add, 300);//設定兩個定時器 timer2 = setInterval(remove, 300); }); function remove() { if(flag === true){ clearInterval(timer1);//清除顯示的定時器 str = arr[index];//獲取當前顯示的字串，利用另一個索引實現迴圈消失 endIndex1 = endIndex2; $input.val(str.substring(0, endIndex2--)); if(endIndex1 === 0){//若當前字串全部消失，則index加一，並設定flag為false，重新設定顯示定時器 index += 1; if(index === 5){//若當前索引最後一個字串消失完畢，則將索引重置為0 index = 0; } flag = false; timer1 = setInterval(add, 300); } } } function add() { if(flag === false){ str = arr[index]; endIndex2 = endIndex1; $input.val(str.substring(0, endIndex1++)); if($input.val().length === arr[index].length){//若當前字串全部顯示完畢，則設定flag為true flag = true; } } } </script> </body> </html>
這個方法完全是個人想出來的，如果有什麼不足之處或者有可優化的地方，歡迎大家和我交流！