基于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 ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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 高级课程笔记 面向对象
2009/06/21 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
微信小程序实现消息框弹出动画
2020/04/18 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python递归计算N!的方法
2015/05/05 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python for循环及基础用法详解
2019/11/08 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
python matplotlib库的基本使用
2020/09/23 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
企业管理标语
2014/06/10 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
工作保证书怎么写
2015/02/28 职场文书