用JS给字体加上彩色背景，一起来玩下吧！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用JS给字体加上彩色背景</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="按钮"/>
</body>
<script>
var oDiv=document.getElementById("div1");
var oInp=document.getElementsByTagName("input")
var arrColor=["red","blue","green","yellow"];
oInp[0].focus()
oInp[1].onclick=function(){
var arr=[];
arr=oInp[0].value
oInp[0].value=""
oInp[0].focus();
console.log(arr.length)
for(var i=0;i<arr.length;i++){
oDiv.innerHTML+='<span style="background-color:'+ arrColor[i%arrColor.length]+'">'+arr[i]+'</span>'
}
}
/* var aInput =document.getElementsByTagName("input");
var oDiv=document.getElementById("div1");
var arrColor=["red","blue","green","yellow"];
aInput[1].onclick=function(){
var val=aInput[0].value;//字符串
var arr=val.split("");
var str1="";
for(var i=0;i<arr.length;i++){
str1+="<span style='background:"+arrColor[i%arrColor.length]+"'>"+arr[i]+"</span>";
/!*str1+=arr[i]*!/
}
console.log(str1);
oDiv.innerHTML+=str1;
}*/
</script>
</html> 
网友评论文明上网理性发言 已有0人参与
发表评论: