给输入文字加背景色 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</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>
</head>

<body>

<div id="div1">

</div>

<input type="text" />
<input type="button" value="按钮" />

<script>
var oDiv = document.getElementById('div1');
var aInp = document.getElementsByTagName('input');
var arrColor = [ '#FFC', '#CC3', '#6FC', '#9C9' ];  //一共就4种背景色

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>';   //设置数组里每一项的HTML内容
    }
    
    oDiv.innerHTML += arr.join('');  //将数组变成字符串
};</script>


</body>
</html>

在输入框输入文字，每个文字都显示出不同颜色的背景。原理：将字符串文字分割成数组，再将数组变成字符串

posted @ 2017-03-27 12:16  念念念不忘  阅读(384)  评论(0)    收藏  举报