js設定輸入的文字不同顏色效果
此效果可能在實際應用中比較少見,但是可以從中學習基本的js知識。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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一章節。
相關文章
- Android開發筆記——TextView文字設定不同顏色Android筆記TextView
- CSS設定選中文字的顏色CSS
- CSS 設定文字框游標顏色CSS
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- Linux 輸出不同檔案預設顏色Linux
- CSS設定滑鼠選中文字的顏色CSS
- 設定文字的選中狀態背景顏色
- JS 文字輸入框放大鏡效果JS
- CSS設定一個文字兩種顏色CSS
- Markdown(入門)——文字設定 ->(字型、字號、顏色和背景色)
- 線上直播系統原始碼,android 中一段文字設定不同顏色原始碼Android
- 設定toast的字型顏色和背景顏色AST
- typora編寫md檔案文字設定顏色
- 設定TextView按下時變換文字顏色TextView
- ProgressBar 顏色的設定
- linux shell輸出帶顏色文字Linux
- iOS UILabel/UIButton文字設定多個顏色iOSUI
- 我的SCRT顏色設定
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- 為每一個table單元格設定不同的背景顏色
- CSS3文字顏色漸變效果CSSS3
- js多個文字框輸入內容同步效果JS
- nodejs colors模組 設定控制檯log顏色NodeJS
- JavaScript WebGL 設定顏色JavaScriptWeb
- AUTOCAD——設定顏色
- css 設定背景顏色CSS
- 設定Toast字型顏色AST
- system命令設定顏色
- 自定義chrome的輸入框背景顏色Chrome
- qt 設定QTextEdit文字框中指定內容塊的背景顏色QT
- CSS設定元素的背景顏色CSS
- 設定placeholder的字型顏色
- 點選單元格清除預設值並且能夠設定輸入字型顏色
- 【HarmonyOS NEXT】氣泡預設顏色和API 10不同,設定popupColor屬性無法修改氣泡顏色API
- CAD如何設定顏色
- 【emWin】例程六:設定顏色
- Linux vi 顏色設定Linux
- js設定頁面TR 的屬性 背景顏色 樣式JS