利用js实现多彩输入框

最新推荐文章于 2024-07-13 11:46:18 发布

z6_6z

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量701

点赞数

分类专栏：前端文章标签： js css3

本文链接：https://blog.csdn.net/z6_6z/article/details/107592469

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

应用的相关知识：

1、颜色的rgb表达 2、键盘响应事件3、按钮监听4、DOM模型获得节点5、js控制css样式

简单描述：

1、颜色在编程中的描述一般分为三种：

第一种: 字符创名称赋值，如 *.background = "red",

第二种: 颜色的十六进制数表示，如 *.background = "#ffffff"

第三种: 颜色的rgm表达式表示，其用0-255 等来表示一个颜色位，总共是三个颜色位，如 rgb(255.255.255)

2、键盘响应和按钮监听

键盘响应：主要是针对于键盘的按下和松开，js提供了对应的onkeydown和onkeyup两个事件，可以通过设置function来实现不同操作下的不同响应。

按钮监听，也可以说叫做点击事件，其实现主要有两种方式如下：

1、通过对对应节点进行获取，由js内连接书写.onclick事件

2、通过按钮标签中的onclick字段直接响应对应的响应函数

具体示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的两种书写方式</title>
</head>
<body>
	<button onclick="fun1();">点击1</button>
	<button id="btn2" >点击2</button>
</body>
<script type="text/javascript">
	function fun1(){
		alert("点击1");
	}
	document.getElementById("btn2").onclick = function(){
		alert("点击2");
	}
</script>
</html>

3、DOM模型获得节点、js控制css的样式

DOM模型这里只做简述，感性趣的小伙伴可以自己深究，DOM(Document Object Model)中，每个东西都是节点：

~文档本身就是一个文档对象

~所有的HTML元素都是元素节点

~所有的HTML属性都是属性节点

~插入到HTML元素文本是文本节点

~注释是注释节点

其的主要用法是可以通过一下命令获取每个节点或属性

var div1 = doucment.getElementById("id名");，通过id获取该节点域内的信息

div1.getElementsByTagName(''span'');,通过span标签名获取所有的在div1节点中的span便签

var spans = div1.getElementsByClassName("sp1");，通过class获取元素节点

var inputs = document.getElementsByName("username");，通过name获得元素节点只能通过document对象调用

其主要的用法是通过元素节点 "."调用的方法来调用和设置属性和文本节点，多用于前端开发，本次多彩输入框也是用该方法对颜色信息进行修改。

js实现多彩输入框：

代码如下：如果阅读我之前的知识介绍，应该很快就会看懂，并且我还会添加些注释方便理解。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩色输入框</title>
<script type="text/javascript">
	//1.加载事件
	window.onload = function(){
		//2.点击事件
		document.getElementById("btn2").onclick = function(){
			alert("点击2");
		}
		//3.键盘按下与弹起事件
		var inp1 = document.getElementById("inp1");
	    //获取元素节点
		inp1.onkeydown = function(){
		//随机获取0—255,用来实现不同颜色的切换
			var r = parseInt(Math.random()*255);
			var g = parseInt(Math.random()*255);
			var b = parseInt(Math.random()*255);
			console.log(r,g,b);
			//利用元素节点来设置标签的属性
			this.style.backgroundColor="rgb("+r+","+g+","+b+")";
		}
		//同上不过为键盘弹起事件
		inp1.onkeyup = function(){
			var r = parseInt(Math.random()*255);
			var g = parseInt(Math.random()*255);
			var b = parseInt(Math.random()*255);
			this.style.backgroundColor="rgb("+r+","+g+","+b+")";
		}
	}
	
</script>
</head>
<body>
	<button id="btn2" >点击2</button>
	<input type="text" id="inp1" />
</body>
</html>

效果如下：（大家可以自行粘贴运行，因为需要动态展示所以有限制，只在这里放一张截图）

z6_6z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js实现多彩输入框

应用的相关知识： 1、颜色的rgm表达 2、键盘响应事件3、按钮监听4、DOM模型获得节点5、js控制css样式简单描述： 1、颜色在编程中的描述一般分为三种：第一种: 字符创名称赋值，如 *.background = "red", 第二种: 颜色的十六进制数表示，如 *.background = "#ffffff" 第三种: 颜色的rgm表达式表示，其用0-2...
复制链接

扫一扫