用JS中split方法實現(xiàn)彩色文字背景效果實例
更新時間：2016年08月24日 10:46:50 投稿：daisy
這篇文章介紹的是利用Javascript中的split方法來實現(xiàn)彩色文字背景效果，實現(xiàn)后的效果很好，有需要的可以參考借鑒。
先來看看實現(xiàn)效果圖
效果實現(xiàn)步驟：
1、獲取要用到的元素；
2、聲明一個數(shù)組變量（arrColor）存放顏色值；
3、給按鈕添加點擊事件；
4、獲取文本框的value值，并用split方法把文本框的字符串值轉換成數(shù)組（arr）存放；
5、循環(huán)取出存數(shù)組（arr）中的值并添加上span標簽；
6、設置span標簽的背景色：從數(shù)組（arrColor）循環(huán)取值；
7、把設定好的內容添加到div中；
效果完整代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>利用JS中split方法實現(xiàn)彩色文字背景效果實例</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方法實現(xiàn)彩色文字背景效果實例到這就結束了，感興趣的朋友們可以自己動手操作看看，希望對大家的學習工作能有所幫助。
您可能感興趣的文章:
相關文章
本文主要介紹了uni-app組件的基本使用,包括組件的引入、使用和常見問題解決方法,通過本文的學習,讀者可以掌握uni-app組件的基本操作,為開發(fā)uni-app應用提供幫助,需要的朋友可以參考下2023-03-03
javascript 處理table表格的代碼，學習js的朋友可以參考下。2010-12-12
本篇文章是對js中正則表達式的使用進行了詳細的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要介紹了JS仿Windows開機啟動Loading進度條的方法,實例分析了javascript操作html元素及對應樣式實現(xiàn)特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
總結分享10個JavaScript代碼優(yōu)化小tips
這篇文章主要介紹了總結分享10個JavaScript代碼優(yōu)化小tips，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
JavaScript圓形虛幻效果，跟PS里面的羽化效果有點像，需要的朋友可以參考下。2011-12-12
下面小編就為大家?guī)硪黄獪\談函數(shù)調用的不同方式,以及this的指向。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JavaScript使用Blob文件流下載txt、pdf、圖片等文件，自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時自定義下載文件名,2023-08-08
這篇文章主要介紹了微信小程序緩存支持二次開發(fā)封裝實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了javascript中eval和with用法,結合實例形式總結分析了JavaScript中eval和with的功能、用法與相關注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11