基于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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JS制作简单的三级联动
Mar 18 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
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/03/20 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
python进阶教程之异常处理
2014/08/30 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python实现图像全景拼接
2020/03/27 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
J2EE模式面试题
2016/10/11 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
企业职业病防治方案
2014/05/29 职场文书
见习期个人总结
2015/03/05 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python