二维码防伪系统

新闻中心

各种活动实时推动

JavaScript实现input值自动变化

发布时间:2024-11-24 点击次数:219

我们公司 在建站的时候,会用到搜索功能,有些客户提出搜索框的内容要自动变化,方便客户搜索不同的关键词,也是推荐用户搜索的关键词,这个时候就需要JavaScript实现input值自动变化,下面是完整代码,供大家参考学习。具体展现形式如图所示:

完整代码展示:

<!DOCTYPE html>
<html>
 
<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" 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>

以上内容就是JavaScript实现input值自动变化的方法,可以直接复制修改使用哦。

copy © 2025 星澜网络 All Rights Reserved

备案号:鲁ICP备2023015769号