JavaScript点击按钮切换背景颜色

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了点击按钮动态设置网页背景颜色效果。

代码非常的简单,比较适合初学者参考之用。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
var arr=["#FFFF00","#D8BFD8","#DDA0DD","#FF0000"];
window.onload=function(){
  var form=document.forms[0];
  var inputs=form.getElementsByTagName("input");
  for(var index=0;index<inputs.length;index++){
    inputs[index]._index=index;
    inputs[index].onclick=function(){
      document.body.style.backgroundColor=arr[this._index];
    }
  }
}
</script>
</head>
<body >
<center>
<form>
  <input type = button value = "Make  Yellow"/>
  <input type = button value = "Make background Thistle"/>
  <input type = button value = "Make background Plum"/>
  <input type = button value = "Make background Red"/>
</form>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var arr=["#FFFF00","#D8BFD8","#DDA0DD","#FF0000"],创建一个数组,里面存储的是颜色值。

(2).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(3).var form=document.forms[0],document.forms能够获取文档中的所有form元素,forms[0]就是第一个form。

(4).var inputs=form.getElementsByTagName("input"),获取form表单下的所有input元素。

(5).for(var index=0;index<inputs.length;index++){},遍历每一个input元素。

(6).inputs[index]._index=index,为当前的input元素添加一个自定义属性_index,属性值为当前元素的索引。

(7).inputs[index].onclick=function(){

  document.body.style.backgroundColor=arr[this._index];

},为input元素注册click事件处理函数,点击按钮讲网页的背景设置为数组中对应索引的颜色。

二.相关阅读:

(1).document.forms参阅document.forms集合一章节。

(2).getElementsByTagName()参阅document.getElementsByTagName()一章节。

JavaScript点击按钮切换背景颜色

回复

我来回复
  • 暂无回复内容