教你如何做好玩的857
我们主要运用的是dom鼠标绑定点击事件。来做一个变色的盒子(可以自行发挥,做自己想实现的内容)
1.怎么随机改变颜色?
这里我们要了解一下颜色的十六进制。不同颜色对应不同的rgb
十六进制颜色代码,在RGB颜色模式中,颜色由三个值表示,表示组件的强度,红色、绿色和蓝色。
从最小值0到最大值255,当所有颜色都以最小值显示时,颜色为黑色,当所有颜色都以最大值显示时,颜色为白色。然而,RGB颜色模式的一个令人困惑的方面是,所有这些颜色都可能以各种方式表示。
通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组,每组两位,依次表示红、绿、蓝三种颜色的强度。
如:
- 白色的对应值 : #FFFFFF
- 紫色 : #800080
- 深粉色 #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.鼠标事件
这里我会提到鼠标的绑定事件。这样我就会用鼠标的不同点击方式来触发事件
- 单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件
- dblclick 双击鼠标左键时发生,如果右键也按下则不会发生
- mousedown 单击任意一个鼠标按钮时发生
- mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生
- mouseover 鼠标指针移出某个元素到另一个元素上时发生
- mouseup 松开任意一个鼠标按钮时发生
- mousemove 鼠标在某个元素上时持续发生