昨天在写小米官网练习的时候,发现他导航栏搜索框里面的文字是自动切换的
昨天没写出来,求助了一下(我太菜了)
这是大佬给出的
经过我的猪脑子看了半天,终于理清了思路,又加了个判断条件
下面是完善后的完整代码:
<!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>
以上便是完整代码!