脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 颜色输入框

基于JavaScript实现随机颜色输入框

 更新时间：2016年12月10日 11:49:59   作者：小琳琳之编程之路  
这篇文章主要介绍了基于JavaScript实现随机颜色输入框的实例代码，代码简单易懂，非常不错，需要的朋友参考下吧

废话不多说了额，具体代码如下所示：

 <!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");
//循环时获取颜色值
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实现随机颜色输入框，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

相关文章

  • JavaScript面试之如何实现数组拍平（扁平化）方法

    JavaScript面试之如何实现数组拍平（扁平化）方法

    数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平（扁平化）方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • 使用JavaScript实现旋转的彩圈特效

    使用JavaScript实现旋转的彩圈特效

    这篇文章主要介绍了使用JavaScript实现旋转的彩圈特效的相关资料,需要的朋友可以参考下
    2015-06-06
  • webpack output.library的16 种取值方法示例

    webpack output.library的16 种取值方法示例

    这篇文章主要为大家介绍了webpack output.library的16 种取值方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 基于原生JavaScript实现SPA单页应用

    基于原生JavaScript实现SPA单页应用

    单页Web应用 （single page web application，SPA） ，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。本文将利用原生JS实现SPA单页应用，需要的可以参考一下
    2023-03-03
  • TS中最常见的声明合并(接口合并)

    TS中最常见的声明合并(接口合并)

    这篇文章主要介绍了TS中最常见的声明合并：接口合并,TS中的声明合并，指的就是编译器会针对同名的声明合并为一个声明,合并后的声明会同时拥有原先两个或多个声明的特性,接口的合并也是一样，它会将双方的成员放到一个同名的接口里，更多详细内容请参考下面文章内容

    2021-12-12
  • javascript实现获取一个日期段内每天不同的价格(计算入住总价格)

    javascript实现获取一个日期段内每天不同的价格(计算入住总价格)

    这篇文章主要介绍了javascript实现获取一个日期段内每天不同的价格(计算入住总价格)的相关资料,需要的朋友可以参考下
    2018-02-02
  • js随机生成一个验证码

    js随机生成一个验证码

    这篇文章主要为大家详细介绍了js随机生成一个验证码的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 微信小程序button标签open-type属性原理解析

    微信小程序button标签open-type属性原理解析

    这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05
  • JS中for,for...in,for...of和forEach的区别和用法实例

    JS中for,for...in,for...of和forEach的区别和用法实例

    JS遍历数组（循环数组）的方式有多种,可以使用传统的for循环,也可以使用升级版的for in循环,还可以使用Array类型的forEach() 方法,这篇文章主要给大家介绍了关于JS中for、for...in、for...of和forEach的区别和用法的相关资料,需要的朋友可以参考下
    2021-11-11

最新评论