前两天看到某个网站上的输入框有个小特效: 文字逐个显示, 并且到字符串最大长度后, 逐个消失, 然后重新循环显示消失, 循环显示字符串数组. 我对这个小特效有点好奇, 于是今天自己尝试用 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 的 Windows.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>
这个方法完全是个人想出来的, 如果有什么不足之处或者有可优化的地方, 欢迎大家和我交流!
来源: https://www.cnblogs.com/yjry-th/p/10129238.html