怎样设计一个自由改变背景颜色的HTML网页？

汤杨 · 发表于 2024-1-12 22:13

一个自动换背景颜色的网页

https://www.tangyang.cn/html/huanse/index.html

输入颜色代码，点击“改变颜色”即可

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>自动变换网页颜色</title>
<script>
      // 当用户点击按钮时触发颜色改变
      function changeColor() {
         // 获取用户输入的颜色代码
         var colorCode = document.getElementById('color-input').value;

         // 将颜色代码应用到网页的背景颜色
         document.body.style.backgroundColor = colorCode;
      }
</script>
</head>
<body>
<h1>自动变换网页颜色，这是一个很高的网页，更改颜色后滚动鼠标滚轮或下拉网页就可以实现整个网页变成纯色</h1>
<h2>百度搜索：HTML颜色代码就可以找到您想要的颜色，比如红色的颜色代码就是#FF0000注意井号也要复制进去</h2>
  <p> </p>
<p>请输入颜色代码：<input type="text" id="color-input" /></p>
<button onclick="changeColor()">改变颜色</button>
   <p> </p>
   <h3>
  常用颜色：黑色#000000

白色#FFFFFF

红色#FF0000

绿色#00FF00

蓝色#0000FF

灰色#808080

橙色#FFA500

黄色#FFFF00

紫色#800080

粉红色#FFC0CB

深蓝色#00008B

浅蓝色#ADD8E6

深绿色#006400

浅绿色#90EE90

深红色#8B0000

浅红色#FFB6C1

黄绿色#9ACD32

深紫色#4B0082

浅紫色#E6E6FA

深灰色#A9A9A9

浅灰色#D3D3D3

深橙色#FF8C00

浅橙色#FFDAB9

深黄色#B8860B

浅黄色#FFFACD
  </h3>

		自动登录	找回密码
密码			立即注册