教你用js做857

教你如何做好玩的857

我们主要运用的是dom鼠标绑定点击事件。来做一个变色的盒子（可以自行发挥，做自己想实现的内容）

1.怎么随机改变颜色？

  这里我们要了解一下颜色的十六进制。不同颜色对应不同的rgb 
  十六进制颜色代码，在RGB颜色模式中，颜色由三个值表示，表示组件的强度，红色、绿色和蓝色。
  从最小值0到最大值255，当所有颜色都以最小值显示时，颜色为黑色，当所有颜色都以最大值显示时，颜色为白色。然而，RGB颜色模式的一个令人困惑的方面是，所有这些颜色都可能以各种方式表示。

  通过一个以“＃”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

如：

1. 白色的对应值 : #FFFFFF
2. 紫色 : #800080
3. 深粉色 #FF1493

根据这个原理，我们就可以封装一个颜色函数，调用函数，就可以了。

2.封装颜色函数

    这里我们会用到random方法会随机产生对应的颜色十六进制。

在这里插入代码片
 function suiJi(m,n){
      return m+parseInt(Math.random()*(n-m+1))
    }
  
    function yanSe(){
      var result = "#"
      for(var i = 0; i<6; i++){
        result +=suiJi(0,15).toString(16)
      }
    return result;
    
    }

3.绑定鼠标点击事件

   这里我们会根据不同需求，对页面进行不同的设计。这里我只做了一个div。只对div进行绑定

在这里插入代码片
 var btn =document.getElementsByClassName("container")[0]
       console.log(btn)
      btn.οnclick=function(){
          btn.style.background = yanSe()
      }

   这样，鼠标点击div时。就会调用颜色函数，产生不同的颜色值。就实现对div进行变色。

4.鼠标事件

     这里我会提到鼠标的绑定事件。这样我就会用鼠标的不同点击方式来触发事件

1. 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
2. dblclick 双击鼠标左键时发生，如果右键也按下则不会发生
3. mousedown 单击任意一个鼠标按钮时发生
4. mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生
5. mouseover 鼠标指针移出某个元素到另一个元素上时发生
6. mouseup 松开任意一个鼠标按钮时发生
7. mousemove 鼠标在某个元素上时持续发生