用JS中split方法实现彩色文字背景效果实例


Posted in Javascript onAugust 24, 2016

先来看看实现效果图

用JS中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 相关文章推荐
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
ES6的解构赋值实例详解
May 06 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 #Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 #Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 #Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 #Javascript
JS简单实现无缝滚动效果实例
Aug 24 #Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
You might like
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
浅析Python中的多重继承
2015/04/28 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
市场营销战略计划书
2014/05/06 职场文书
数学系毕业生求职信
2014/05/29 职场文书
学习张林森心得体会
2014/09/10 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
校园歌手大赛主持词
2015/07/03 职场文书