第一个JavaScript程序

我的第一个 js 程序是测试手机屏幕亮点暗点的网页,每点一下屏幕,网页就换个纯色背景。以前直接 copy 过别人的页面,看源码是用到了 jquery。

想着已经学习js一个月,就想自己动手用原生js写一个。

开始写之前是这样想的,以为很简单:

1.设置一个数组array存放各种颜色
2.点击一次屏幕读取一个颜色array[i],最后一个时循环回array[0].
3.每点一次屏幕,将取出的颜色传递给body的背景色。

实际搞起来感觉太难了,一是还没学到 JavaScript 的 DOM 相关知识,不知道怎么通过 JavaScript 设置背景色,对照网上资料边学边弄,加上在前端群里请教网友。 马马虎虎凑合成这堆代码

var color=['black','red','green'];  
var i=-1;  
documen.body.onclick= function() {  
    i++;
    if(i==color.length){i=0;document.body.style.background=color[i];}
    else{document.body.style.background=color[i];}
}

js 代码没问题,但是到html中,点击屏幕没反应,给 body 标签加上 width 和 height 为9999px就好了.(会有滚动条)

更新 直接给 body 设置 width 和 height 为 100% 点屏幕也没反应。给 html 也加上高宽 100% 才有效果。但是这样浏览器窗口会出现横向纵向滚动条,强迫症没法忍。 给 body 设置 width、height 为99%,滚动条没有了,但是有很小很小的区域点击没效果,强迫症还是没法忍。无意中给 body 加margin:0后滚动条消失了,很完美。 原来是默认 body 有个 margin 值造成 html 和 body 双双 100% 时出现滚动条。

<style>  
  html,body{ width: 100%; height: 100%; margin: 0; }
</style>  
<script type="text/javascript">  
  window.onload = function() {
    var color = ["#000", "#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f"];
    var i = 0;
    document.body.ontouchstart = document.body.onclick = function() {
      this.style.background = color[i];
      if (i < color.length - 1) {i++} else {i = 0}
    }
  }
</script>  

参考老司机的指导,对自己的做了修改,感觉逻辑上好多了。

var color=['black','red','green'];  
var i=0;  
var mybody=document.body.style;  
document.body.onclick= function(){  
mybody.background=color[i];  
if(i<color.length-1){i++}  
else{i=0}  
}

到这里还没结束,写这页面是为了测试手持设备屏幕的啊。PC上一切正常,但在iPhone上点击屏幕死活没反应。还不知道啥原因,用英文Google搜索一番,找到个解决方法。将document.body.onclick代码复制一遍改成document.body.ontouchstart 在手机上就可以点了。 成果如下:

iPhone iPad屏幕亮点暗点测试

其实比较奇怪的是下面这个矩形框内用的就是 onclick,但小框框在手机上点击是可以变色的。