基于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 相关文章推荐
JQuery中serialize()用法实例分析
Feb 06 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
解决React Native端口号修改的方法
Jul 28 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
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中的常用魔术方法汇总
2016/02/14 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python星号*与**用法分析
2018/02/02 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python基于http下载视频或音频
2018/06/20 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python读取实时数据流示例
2019/12/02 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
请解释virtual关键字的含义
2015/06/17 面试题
村委会贫困证明
2014/01/14 职场文书
《我的信念》教学反思
2014/02/15 职场文书
教师自查自纠材料
2014/10/14 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书