JS比较常用的隔行换色和获取焦点以及失去焦点效果

苏百玖

已于 2023-03-01 14:52:55 修改

阅读量689

点赞数

文章标签： javascript

于 2022-11-12 15:26:31 首次发布

本文链接：https://blog.csdn.net/SuBaijiu/article/details/127819889

版权

JS作为一门比较简单的编程
当然一些JS效果的使用是不可避免的
就比如说标签的隔行换色、还有搜索框的失去和获取焦点
我就来带大家写一下这两种常用的效果
先来说一下标签的隔行换色吧

一、元素标签的隔行换色

先看一下最终的效果：

在这里插入图片描述
看完效果之后我在来说说代码应该怎么来完成这个效果吧

1. 写好html的文本基础构架

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>

看一下效果：

在这里插入图片描述
这就是刚构架好的框架

2. 我们如何用JS将其实现隔行换色呢？

(1)、要先获取到所有的li标签

获取元素标签的方法

var list=document.getElementsByTagName("li")//通过元素名获取元素，可以将获取到的一个元素名的元素放在一个数组内
//查看一下是否获取到元素
console.log(list)//[li, li, li, li, li, li, li, li]

(2)、要将获取到的li标签进行隔行换色

因为我们已经将标签方到了一个数组内
所以我们可以来对其遍历循环并进行单独元素的CSS样式处理
代码如下：

//for循环遍历数组内的每一个li元素
for(var i=0;i<list.length;i++){
	//因为我们要进行隔行换色所以要让奇数和偶数行的元素背景色进行调整
	if(i%2 == 0){
	//但是每一个整数与数字一相除都没有余数，所以这里对偶数进行判断是否除于二还有余数，如果没有就说明是偶数行
	//对偶数行的li元素惊醒一个背景色的改变。
		list[i].style.backgroundColor = "#E0E0E0";
	}else{
	//如果不是偶数行就说明只有奇数行的li元素了
	//所以直接一个else对其他的元素标签进行背景色变色即可
		list[i].style.backgroundColor = "#EBF1FB";
	}
}

(3)、最后再来展示一下隔行换色效果的所有代码

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
	
	<script>
		var list = document.getElementsByTagName("li");
		console.log(list)
		for(var i=0;i<list.length;i++){
			if(i%2 == 0){
				list[i].style.backgroundColor = "#E0E0E0";
			}else{
				list[i].style.backgroundColor = "#EBF1FB";
			}
		}
	</script>
</body>

二、模拟搜索框的失去焦点和获取焦点

1.同样写一个input搜索框

<body>
	<!-->写一个id名方便后续获取<-->
	<input type="text" value="请输入内容" id="search" />
</body>

2.如何用JS将其实现获取焦点和失去焦点呢？

(1)、要先获取这个input框元素标签

//通过设置好的ID名获取元素
var search=document.getElementById('search');
//这里我们要提前将当前获取焦点前input框默认的的value值进行存放
//否则我们失去焦点input的value值为空
var text=txtobj.value;

(2)、使用获取焦点方法

其实获取焦点是一个方法：对象.onfocus(函数体)
具体使用方法如下


txtobj.onfocus = function(){
	//这里判断一下的获取焦点时的value值是否为获取焦点前的value值
	//如果相等，获取input的焦点时将其内容置空
	if(this.value==text){
		this.value = "";
	}
}

(3)、使用失去焦点方法

失去焦点同样也是一个方法：对象.onblur(函数体)
具体使用方法如下

txtobj.onblur = function(){
//判断input框失去焦点是input框的内容是否为空
//如果为空则让input框的value为获取焦点前存好的text
	if(this.value == ""){
		this.value =  text;
	}
}

总体的效果和代码如下

<body>
<input type="text" value="请输入内容" id="search" />
<script>
	var txtobj = document.getElementById("search");
	//这里我们要提前将当前获取焦点前input框的value值进行存放
	//否则我们失去焦点input的value值为空
	var text=txtobj.value;
	//1.获取焦点事件 --- onfocus
	txtobj.onfocus = function(){
		if(this.value == text){
			this.value = "";
		}
	}
	
	//2.失去焦点事件 --- onblur
	txtobj.onblur = function(){
		if(this.value == ""){
			this.value =  text;
		}
	}
</script>
<body>