基于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 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 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网站提速三大“软”招
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
PHP中读写文件实现代码
2011/10/20 PHP
Use Word to Search for Files
2007/06/15 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python 中Pickle库的使用详解
2018/02/24 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
毕业生就业自荐书
2013/12/15 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
网页美工求职信
2014/02/15 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
计算机求职信
2014/07/02 职场文书
介绍信怎么写
2015/01/30 职场文书
淮海战役观后感
2015/06/11 职场文书
法人代表资格证明书
2015/06/18 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python