javascript完成:使用split()和join()实现对输入文字设置背景颜色

2023-05-16

hi,这里是X,最近在学习JavaScript,所以最近没有意外的话会带来很多有关JavaScript的任务或者作品,有大有小,欢迎进来学习和评论。😎😎😎
在对输入的文字设置背景颜色,这当然只是一个影子,大家学会了想怎么变都可以,然后直接上代码

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>使用split()和join()实现对输入文字设置背景颜色</title>
<script>
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		var aInp = document.getElementsByTagName('input');
		var arrColor = ['#FFC','#CC3','#6FC','#9C9','#C6F','#CFF'];
		var arrFont = ['SimSun','STKaiti','NSimSun'];//中文字体
		
		aInp[1].onclick = function(){
		   var str = aInp[0].value;
		   var arr = str.split('');//将字符串使用空字符串分隔为字符串数组
		
		   for(var i = 0; i < arr.length; i++){
			 arr[i] = '<span style="background:'+arrColor[i%arrColor.length]+';">'+arr[i]+'</span>';
		   }

		   oDiv.innerHTML = arr.join('');//将数组各个元素使用空字符串连接成字符串
		   aInp[0].value = '';//清空文本框中输入的文本内容
		};
	};
</script>
<body>
<div id="div1" style="width:300px;height:50px;"></div>
  	<input type="text"/>
	<input type="button" value="提交"/> 
</body>
</html>

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript完成:使用split()和join()实现对输入文字设置背景颜色 的相关文章

随机推荐