用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 相关文章推荐
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JSONP原理及简单实现
Jun 08 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 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
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python读取word文档的方法
2015/05/09 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
公务员培训心得体会
2013/12/28 职场文书
初一科学教学反思
2014/01/27 职场文书
启动仪式策划方案
2014/06/14 职场文书
招标承诺书
2014/08/30 职场文书
英语感谢信范文
2015/01/20 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Python实现老照片修复之上色小技巧
2021/10/16 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS