快捷導(dǎo)航

基于JavaScript實現(xiàn)隨機顏色輸入框

更新時間：2016年12月10日 11:49:59 作者：小琳琳之編程之路

這篇文章主要介紹了基于JavaScript實現(xiàn)隨機顏色輸入框的實例代碼，代碼簡單易懂，非常不錯，需要的朋友參考下吧

廢話不多說了額，具體代碼如下所示：

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{width:500px;height:400px;}
table td{width:100px;height:50px;}
</style>
<script>
window.onload=function(){
var inps=document.getElementsByTagName('input'); 
var btn=document.getElementsByTagName("button")[0];
//點擊獲取table 
btn.onclick=function(){ 
 var table=document.createElement("table");
 var tbody=document.createElement("tbody");
 var n=inps[0].value;
 var m=inps[1].value;
for(var i=1;i<=n;i++){ 
var tr=document.createElement("tr");
//循環(huán)時獲取顏色值
for(var j=1;j<=m;j++){
var td=document.createElement("td");
tr.appendChild(td);
var color="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","
+parseInt(Math.random()*256)+")";
td.style.backgroundColor=color;
}
inps[0].value="";
inps[1].value="";
tbody.appendChild(tr);
table.appendChild(tbody);
document.body.appendChild(table);
}
}

}
</script>
</head>
<body>
行：<input type="text" value=""/>
列：<input type="text" value="" />
<button>獲取隨機顏色</button> 
</body>
</html>

以上所述是小編給大家介紹的基于JavaScript實現(xiàn)隨機顏色輸入框，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-11-11
使用JavaScript實現(xiàn)旋轉(zhuǎn)的彩圈特效
這篇文章主要介紹了使用JavaScript實現(xiàn)旋轉(zhuǎn)的彩圈特效的相關(guān)資料,需要的朋友可以參考下
2015-06-06
webpack?output.library的16?種取值方法示例
這篇文章主要為大家介紹了webpack?output.library的16?種取值方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
基于原生JavaScript實現(xiàn)SPA單頁應(yīng)用
單頁Web應(yīng)用?（single?page?web?application，SPA）?，就是只有一張Web頁面的應(yīng)用，是加載單個HTML?頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。本文將利用原生JS實現(xiàn)SPA單頁應(yīng)用，需要的可以參考一下
2023-03-03
TS中最常見的聲明合并(接口合并)
這篇文章主要介紹了TS中最常見的聲明合并：接口合并,TS中的聲明合并，指的就是編譯器會針對同名的聲明合并為一個聲明,合并后的聲明會同時擁有原先兩個或多個聲明的特性,接口的合并也是一樣，它會將雙方的成員放到一個同名的接口里，更多詳細內(nèi)容請參考下面文章內(nèi)容
2021-12-12
javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)
這篇文章主要介紹了javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)的相關(guān)資料,需要的朋友可以參考下
2018-02-02
js隨機生成一個驗證碼
這篇文章主要為大家詳細介紹了js隨機生成一個驗證碼的具體方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
微信小程序button標簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-01-01
屏蔽F1~F12的快捷鍵的js函數(shù)
keyCod從113-123分別禁用了F2-F12鍵,13禁用了回車鍵(Enter),8禁用了退格鍵(BackSpace)
2010-05-05
JS中for,for...in,for...of和forEach的區(qū)別和用法實例
JS遍歷數(shù)組（循環(huán)數(shù)組）的方式有多種,可以使用傳統(tǒng)的for循環(huán),也可以使用升級版的for in循環(huán),還可以使用Array類型的forEach() 方法,這篇文章主要給大家介紹了關(guān)于JS中for、for...in、for...of和forEach的區(qū)別和用法的相關(guān)資料,需要的朋友可以參考下
2021-11-11