基于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 多级下拉菜单核心代码
May 21 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
JavaScript中的Function函数
Aug 27 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
详解Python中的正则表达式
2018/07/08 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
财务出纳岗位职责
2014/02/03 职场文书
文秘大学生求职信
2014/02/25 职场文书
超市理货员岗位职责
2014/07/04 职场文书
整改报告格式
2014/11/06 职场文书
员工工作心得体会
2019/05/07 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Django基础CBV装饰器和中间件
2022/03/22 Python