JavaScript实现input值自动变化

拂晓等明月

已于 2022-06-23 17:09:47 修改

阅读量868

点赞数 1

分类专栏： javascript练习文章标签： javascript 前端 html

于 2022-06-23 17:07:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_61320547/article/details/125430601

版权

javascript练习专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现网页中搜索框的文字自动切换效果。通过设置定时器和索引判断，使得输入框内的文字在预设的数组内依次显示，当达到数组末尾时，索引归零，形成循环切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天在写小米官网练习的时候，发现他导航栏搜索框里面的文字是自动切换的

昨天没写出来，求助了一下（我太菜了）

这是大佬给出的

经过我的猪脑子看了半天，终于理清了思路，又加了个判断条件

下面是完善后的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" class="sonsuokuan" value="电脑">
    <script>
        var sonsuokuan = document.querySelector('.sonsuokuan');
        var arr = new Array();
        arr[0] = '电脑';
        arr[1] = '手机';
        arr[2] = '电视';
        arr[3] = '笔记本';
        arr[4] = '数码';
        arr[5] = '服务';
        arr[6] = '电商';
        arr[7] = '家电';
        // document.addEventListener('click', function() {
        var index = 0;
        // 定时器
        setInterval(function() {
            // 添加判断条件
            // 如果arr里面的索引号不超过最大，则执行
            if (index < arr.length) {
                sonsuokuan.value = arr[index]
                index++;
            } else {
                // 超过最大时，索引号归零
                // 这里归零的时候不是三秒，时间延长了，不知道为啥
                index = 0;
            }
        }, 3000);
        // })
    </script>
</body>

</html>

以上便是完整代码！