基于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一点特殊用法
May 28 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
angular实现商品筛选功能
Feb 01 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
php生成略缩图代码
2012/07/16 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
js获取Get值的方法
2016/09/29 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
React实现轮播效果
2020/08/25 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python程序 创建多线程过程详解
2019/09/23 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
学习心得体会
2014/01/01 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
技术总监管理职责范本
2014/03/06 职场文书
法人授权委托书
2014/04/03 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
音乐教师个人总结
2015/02/06 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
创业计划书之面包店
2019/09/12 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js