基于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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
angular 基于ng-messages的表单验证实例
May 04 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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下几种删除目录的方法总结
2007/08/19 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
详解python中sort排序使用
2019/03/23 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
大学生村官典型材料
2014/01/12 职场文书
英文请假条
2014/04/11 职场文书
国庆节活动总结
2014/08/26 职场文书
食品安全承诺书范文
2014/08/29 职场文书
小学元宵节活动总结
2015/02/06 职场文书
年度考核个人总结
2015/03/06 职场文书
新郎婚礼致辞
2015/07/27 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python实战之疫苗研发情况可视化
2021/05/18 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技