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


Posted in Javascript onDecember 10, 2016

废话不多说了额,具体代码如下所示:

<!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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
BootStrap中
Dec 10 #Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 #Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 #Javascript
JS实战篇之收缩菜单表单布局
Dec 10 #Javascript
javascript动画之磁性吸附效果篇
Dec 09 #Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 #Javascript
详解自动生成博客目录案例
Dec 09 #Javascript
You might like
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php截取字符串函数分享
2015/02/02 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JS中的BOM应用
2018/02/02 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
编辑硕士自荐信范文
2013/11/27 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
初一数学教学反思
2016/02/17 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
python通过新建环境安装tfx的问题
2022/05/20 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers