js设置输入的文本不同颜色效果
分类:实例代码
此效果可能在实际应用中比较少见,但是可以从中学习基本的js知识。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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> <script> window.onload = function () { var oDiv = document.getElementById("antzone"); var aInp = document.getElementsByTagName("input"); var arrColor = ["#FFC", "#CC3", "#6FC", "#9C9"]; aInp[1].onclick = function () { var str = aInp[0].value; var arr = str.split(''); for (var index = 0; index < arr.length; index++) { arr[index] = '<span style="background:' + arrColor[index % arrColor.length] + '">' + arr[index] + '</span>'; } oDiv.innerHTML += arr.join(''); } } </script> </head> <body> <div id="antzone"></div> <input type="text" /> <input type="button" value="查看效果" /> </body> </html>
上面的代码实现了我们的要求,代码比较简单,更多内容可以参阅相关阅读。
相关阅读:
(1).document.getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).split()可以参阅javascript split()一章节。
(3).innerHTML可以参阅innerHTML一章节。
js设置输入的文本不同颜色效果,这样的场景在实际项目中还是用的比较多的,关于js设置输入的文本不同颜色效果就介绍到这了。
js设置输入的文本不同颜色效果属于前端实例代码,有关更多实例代码大家可以查看。