这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章介绍的是利用 Javascript 中的 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 方法实现彩色文字背景效果实例到这就结束了,感兴趣的朋友们可以自己动手操作看看,希望对大家的学习工作能有所帮助。
来源: http://www.phperz.com/article/17/0708/332368.html