먼저 구현 다이어그램을 살펴 보겠습니다
효과 구현 단계 :
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에서 분할 메소드를 사용하여 컬러 텍스트 배경 효과를 달성하기위한 예제 </title> <tyle> div {width : 300px; 높이 : 200px; 국경 : 1px 고체 #333; 배경 : #fff; 패딩 : 20px; 라인 높이 : 40px; } span {패딩 : 5px 15px; Font-Family : Microsoft Yahei; . 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 = "value ="button "/> </body> </html>요약
컬러 텍스트 배경 효과를 달성하기 위해 JS에서 분할 방법을 사용하는 예는 끝났습니다. 관심있는 친구들은 모든 사람의 공부와 일에 도움이되기를 바라고 스스로 할 수 있습니다.