用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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
jQuery操作css样式
May 15 jQuery
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
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
第三节--定义一个类
2006/11/16 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
一个实用的php验证码类
2017/07/06 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python中的super用法详解
2015/05/28 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
营业经理岗位职责
2013/11/10 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
经典广告词大全
2014/03/14 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
求职信名称怎么写
2014/05/26 职场文书
护士2014年终工作总结
2014/11/11 职场文书
法律意见书范文
2015/05/20 职场文书
2015年暑假生活总结
2015/07/13 职场文书
公司周年庆寄语
2019/06/21 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS