JavaScript：使用＜input type=“color“＞实现背景颜色自选的小效果

本文链接：https://blog.youkuaiyun.com/weixin_44848852/article/details/109427143

JavaScript：使用<input type=“color”>实现背景颜色自选的小效果

效果如下：
在这里插入图片描述
（浏览器为Chrome）

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>选择你想要的背景颜色</p>
<input type="color" name="" id="colorHex">
<button onclick="myFunction()">点击改变背景颜色</button>
<!--用于输出颜色的十六进制-->
<p id="demo"> </p>
<script type="text/javascript">
	function myFunction() {	
	 //获取已经选择的颜色的值	
		var x = document.getElementById('colorHex').value;
		//在id=“demo”的这一段输出颜色的值
		document.getElementById('demo').innerHTML = x;
		//改变背景颜色
		document.body.style.backgroundColor = x;
	}
</script>
</body>
</html>

浏览器测试：chrome和QQ浏览器实现效果，无乱码；Microsoft Edge和IE浏览器出现乱码，前者还可以实现效果，后者的输入标签的类型已经变成text了，而且无相应的反应效果。
第二天更新了Microsoft Edge，在此打开无乱码