基于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 tab切换(防止页面刷新)
May 23 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
require.js中的define函数详解
Jul 10 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
Smarty模板配置实例简析
2019/07/20 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python对象及面向对象技术详解
2016/07/19 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python函数不定长参数使用方法解析
2019/12/14 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
详解python程序中的多任务
2020/09/16 Python
python中spy++的使用超详细教程
2021/01/29 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
一个C/C++编程面试题
2013/11/10 面试题
现金会计岗位职责
2013/12/05 职场文书
物业工作计划书
2014/01/10 职场文书
九年级历史教学反思
2014/01/27 职场文书
班组长竞聘书
2014/03/31 职场文书
医院搬迁方案
2014/06/14 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android