web前端学习笔记（2）——调色板简单初始版

本文链接：https://blog.youkuaiyun.com/ddkddkchen/article/details/48752337

这篇博客介绍了在web前端开发中使用JavaScript进行颜色处理的基础知识，包括console.log()的使用来替代document.write()，Number.toString()方法进行数字转换，以及如何通过parseInt获取input元素的整数值。此外，还提到了JS对于颜色表示的大小写兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<html>
	<head>
		<meta charset="utf-8" />
		<title>自制调色板</title>
		<style type="text/css">
			html
			{
				width: 100%; 
				height: 100%;
				margin: 0;
			}
			body
			{
				idth: 100%; 
				height: 100%;
				margin: 0;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div style="position: relative;
			width: 100%;height: 100%;">
			<div style="width: 100%;height: 50%;
				background-color: white;"
				align="center">
				<input type="text" name="" id="color1" value="" />
				<input type="text" name="" id="color2" value="" />
				<input type="text" name="" id="color3" value="" />
				<button type="button" 
				onclick=
				"color(
				document.getElementById('color1'),
				document.getElementById('color2'),
				document.getElementById('color3')
				)">
				转换颜色
				</button>
			</div>
			<div id='show' style="width: 100%;height: 50%;
				background-color: black;">
			</div>
		</div>
		<script type="text/javascript" src="js/color.js"></script>
	</body>
</html>

JavaScript代码

function color(input1 , input2 , input3)
{
	var show=document.getElementById('show');
	var co1=parseInt(input1.value);
	var co2=parseInt(input2.value);
	var co3=parseInt(input3.value);
	var color_1=co1.toString(16);
	var color_2=co2.toString(16);
	var color_3=co3.toString(16);
	var nowcolor='#'+color_1+color_2+color_3;
	console.log(nowcolor);
	show.style.backgroundColor=nowcolor;
}

目标改进：美化

笔记：

console.log() 在firebug下显示消息，终于不用document.write()了！

num1.toString(num2) num1：待转换数 num2：转换目标位数

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString（相关网页）

input.value 为字符串用paresInt 可以转换

http://www.w3school.com.cn/jsref/jsref_parseInt.asp

JS的颜色与大小写兼容