用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 click([data],fn)使用方法实例介绍
Jul 08 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
js制作简易年历完整实例
Jan 28 Javascript
javaScript基础语法介绍
Feb 28 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
详解express使用vue-router的history踩坑
Jun 05 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP XML数据解析代码
2010/05/26 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python3+PyQt5实现拖放功能
2018/04/24 Python
python区块及区块链的开发详解
2019/07/03 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
房地产项目建议书
2014/03/12 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
学生病假条范文
2015/08/17 职场文书
2016春节放假通知范文
2015/08/18 职场文书
升职自荐书
2019/05/09 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers