用JS中split方法实现彩色文字背景效果实例
更新时间：2016年08月24日 10:46:50 投稿：daisy
这篇文章介绍的是利用Javascript中的split方法来实现彩色文字背景效果，实现后的效果很好，有需要的可以参考借鉴。
先来看看实现效果图
效果实现步骤：
1、获取要用到的元素；
2、声明一个数组变量（arrColor）存放颜色值；
3、给按钮添加点击事件；
4、获取文本框的value值，并用split方法把文本框的字符串值转换成数组（arr）存放；
5、循环取出存数组（arr）中的值并添加上span标签；
6、设置span标签的背景色：从数组（arrColor）循环取值；
7、把设定好的内容添加到div中；
效果完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>利用JS中split方法实现彩色文字背景效果实例</title>
<style>
div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
span { padding:5px 15px; font-family:微软雅黑; }
</style>
<script>
window.onload = function(){
var oDiv=document.getElementById('div1');
var aInp=document.getElementsByTagName('input');
var arrColor = ['#f00','#ff0','#f0f','#0ff'];
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('');
}
}
</script>
</head>
<body>
<div id="div1">
</div>
<input type="text" />
<input type="button" value="按钮" />
</body>
</html>
总结
用JS中split方法实现彩色文字背景效果实例到这就结束了，感兴趣的朋友们可以自己动手操作看看，希望对大家的学习工作能有所帮助。
相关文章
这篇文章主要给大家介绍了关于JavaScript指定断点操作的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-09-09
这篇文章主要介绍了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件,实例分析了javascript多种弹出层效果的实现技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了Python版实现微信公众号扫码登陆，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了浅谈JavaScript 代码整洁之道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了ES6新数据结构Set与WeakSet用法,结合实例形式简单分析了Set与WeakSet的功能、使用方法及相关注意事项,需要的朋友可以参考下2017-03-03
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
这篇文章主要介绍了在mpvue框架中使用Vant WeappUI组件库的注意事项,本文给大家提到了引入组件库的两种方法，需要的朋友可以参考下2019-06-06
chrome的drag and drop API，它能将本地的图片放到浏览器中进行预览，猜想一下当我们把图片拖拽到浏览器里会发生什么事情，你的浏览器试图打开一个新的页面并加载这个图片。这篇文章给我们介绍drag-and-drop实现图片浏览器预览，需要的朋友可以参考下2015-08-08
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）2010-10-10
这篇文章主要介绍了javascript创建对象的3种方法,对比分析js创建对象三种方式的优缺点，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JavaScript设计模式之策略模式实例,本文分析了Jquery源码并给出了自己的实现,需要的朋友可以参考下2014-10-10
最新评论