通过数值查看颜色效果的小脚本

最新推荐文章于 2022-04-23 13:22:11 发布

annkie

最新推荐文章于 2022-04-23 13:22:11 发布

阅读量707

点赞数

分类专栏： Web 文章标签： button html 工具嵌入式 input class

本文链接：https://blog.youkuaiyun.com/annkie/article/details/7618532

版权

Web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML实现嵌入式设备颜色效果配置的方法，通过简单的代码示例展示如何快速实现这一功能，对于Web前端开发者而言易于上手。

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

对于一些开发嵌入式设备或者应用系统的工程师来说，需要配置定义的颜色效果，往往是通过画图工具的颜色工具来查看，相对比较麻烦。

以前为此还用VC写过一个应用程序，其实用HTML一句话的事情.

以下是编写的一个html本地文件，方便用来查看颜色效果（对于Web前段开发者这个就是小儿科了，路过勿视 :))

将以下代码保存为一个html文件，如color.html，双击运行即可.

<html>
<!-- 这段style代码是网上抄来的，主要是为了漂亮，对本功能无必要 -->
<style>
button {
	-moz-border-radius: 25px;
	-moz-box-shadow: #6E7849 0px 0px 10px;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-border-radius: 25px;
	-webkit-box-shadow: #6E7849 0 0 10px;
	-webkit-transition: all 0.5s ease;
	background-color: #6E7849;
	background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
	background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
	background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
	background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
	background-image: linear-gradient(90deg, #B9C788, #6E7849);
	border-radius: 25px;
	border: 2px solid #4a5032;
	box-shadow: #6E7849 0px 0px 10px;
	color: #ffffff;
	display: inline-block;
	font-size: 6em;
	margin: auto;
	padding: 25px;
	text-decoration: none;
	text-shadow: #000000 5px 5px 15px;
	transition: all 0.5s ease;
}

button:hover {
	padding: 15px;
}
</style>

<body οnlοad="document.body.style.backgroundColor='#334455';">
	<br>
	<br>
	<br>
	<br>
	<div align="center">
	    
		<input type="text" value="#334465" title="请输入#RRGGBB格式的数值" style="width: 200; height: 40; font-size: 26px" id="colorvalue">
		<br> <br>
		<button οnclick="ClickMe();" class="button" value="click me"
			type="button" id="btn">
			<span id="myspan" width=300 height=200>Click Me</span>
		</button>

		<script type="text/javascript">
			function ClickMe() 
			{
				document.getElementById("btn").style.backgroundColor = document.getElementById("colorvalue").value;
				//document.body.style.backgroundColor = document.getElementById("colorvalue").value;
			}
		</script>
</body>
</html>