目标：
简单热个身，根据用户输入的十六进制颜色编码，更改网页的背景色。
效果预览：
这是一个很简单的demo，成品效果如下：
1.png
2.png
受众要求：
学习过基本的HTML、CSS、JavaScript，如未接触过相关知识，建议先行移步w3cschool、慕课网或者菜鸟教程等网站，学习相关的基础知识点。
工欲善其事，必先利其器，愿我们在编程道路上，共同成长，一起进步。
开发环境推荐：
1、浏览器：
谷歌浏览器(chrome)、火狐浏览器
2、编辑器：
①重量级IDE
webStorm、IntelliJ IDEA
②轻量级编辑器
vsCode、sublime text3、HBuilderX
知识点概览
document.bgColor，可以用来设置网页页面的背景颜色。
addEventListener()方法用于向指定元素添加事件监听， Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。
该方法接收3个参数。
第一个参数为必填参数，指定事件的名称。
但是注意，不要使用“on”前缀，例如，我们应该使用“click”，而不是“onclick”。
第二个参数为必填参数，指定事件触发时，要执行的函数。
第三个参数为可选参数，它是一个布尔值，默认为false。它用于指定事件是在捕获还是冒泡阶段执行。
默认为false，在冒泡阶段执行，当它的值为true时，事件将在捕获阶段执行。
源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>根据用户输入，更换网页背景颜色</title>
</head>
<body>
<label>请您输入颜色编码：</label>
<input type="text" id="input" />
<button id="btn">修改</button>
<script>
var btn = document.getElementById("btn");
var input = document.getElementById("input");
btn.addEventListener('click',function () {
document.bgColor = "#" + input.value;
},false)
</script>
</body>
</html>
网友评论