基于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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
ECMAScript6--解构
Mar 30 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php读取xml实例代码
2010/01/28 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python序列操作之进阶篇
2016/12/08 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python如何制作英文字典
2019/06/25 Python
Python request操作步骤及代码实例
2020/04/13 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
如何让Java程序执行效率更高
2014/06/25 面试题
设计总监岗位职责
2013/12/07 职场文书
小学生环保倡议书
2014/05/15 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
小学运动会加油稿
2015/07/22 职场文书