基于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 设计模式之组合模式解析
Apr 09 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
django 环境变量配置过程详解
2019/08/06 Python
Django中的session用法详解
2020/03/09 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
八项规定整改方案
2014/02/21 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
《画风》教学反思
2014/04/16 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
超市员工管理制度
2015/08/06 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL