基于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 相关文章推荐
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue中实现高德定位功能
Dec 03 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 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实现自动登入google play下载app report的方法
2014/09/23 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Selenium定位元素操作示例
2018/08/10 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
路政管理专业推荐信
2013/11/11 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
财务总监岗位职责
2014/03/07 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang