基于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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
php实现简易计算器
2020/08/28 PHP
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
小程序实现密码输入框
2020/11/16 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
python中PIL安装简单教程
2016/04/21 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python 实现链表实例代码
2017/04/07 Python
详解python基础之while循环及if判断
2017/08/24 Python
python发送邮件脚本
2018/05/22 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
JAVA API 实用类 String详解
2021/10/05 Java/Android
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers