今日完成:
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
ex:
<body onload="checkCookies()">
<script>
function checkCookies(){
... ...
}
</script>
总结:标签<script>内的代码(js内的代码)含义可以不知道,例子中是个判断,判断含义不清楚,
但是,onload的含义是,一点进这个页面,就直接运行与它绑定的函数,函数的输出是alert(显示提示框)
//---------------------------------------------------------------------------------------------------------------
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
ex:
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
显示:
总结:前者类似hover效果,后者感觉没有必要,直接在需要的地方直接写就可以了,因为没有移动上去运行,跟默认没有区别,(错误的想法)
ps:突然发现,onmouseout的应用场景好像只能跟onmouseover配套使用,前者移动上去,运行代码,后者拿开运行,恢复原状,
加一起才是,hover效果加html默认输入(onmouseout绑定执行代码运行后,不会因为鼠标移开而恢复原状)
----------------------------------------------------------------------------------------------------------------------------------------------------------------
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,
当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
<script>
function lighton(){
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
显示:
总结:根据显示状态,onmousedown、onmouseup按住鼠标和松开鼠标会分别触发事件(可以组合使用)
但是类似onmouseover 和 onmouseout 事件onmouseup="lightoff()"
使用场景只能和前者配套,单独使用,不如一开始就直接在html和css中直接设置
ps:
1.上述两个方法是把点击鼠标的动作分解成两步,触发两个时间
2.点击事件onclick 事件是把点击鼠标完成看做一个整体,然后触发点击事件
3.单独的 onmouseover事件可以代替onclick事件
因为生效都是释放按钮后,引起冲突onmouseup与onclick是onclick生效(不看位置前后)
------------------------------------------------------------------------------------------------------------------------------------
小课堂
(2)知识剖析:
1.随机
Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】
最主要的,随机都是在这个方法输出的值上叠加其他方法
得到:包含0不包含1,任意个数的随机小数
一般会用到取整
Math.ceil(); //向上取整。
Math.floor(); //向下取整。
Math.round(); //四舍五入。//随机一个数组,注意数组长度减一,之后会讲到
组合:
Math.ceil(Math.random()*10); // 获取从1到10的随机整数 ,取0的概率就是Math.random()一开始随机到就是0,否则不可能为0,也就是概率极小
Math.floor(Math.random()*10); //可均衡获取0到9的随机整数。
Math.round(Math.random()); //可均衡获取0到1的随机整数。
Math.round(Math.random()*10); //获取0到10的随机整数,其中获取最小值0和最大值10的几率少一半。
因为结果在0~0.4 为0,0.5到1.4为1...8.5到9.4为9,9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。
(这里就跟随机颜色性能差异产生联系)
2.颜色几种表现形式
1.rgb
2.16进制颜色
3.常见问题
1.随机多个颜色,且不重复
2.不从0开始选择随机整数,怎么选
4.解决方案
1.设置判断语句,在输出颜色相等时,重新循环
if (color0 === color1 || color0 === color2 || color1 === color2){...}
2.加上输出移动的位数,如4~6,6-4=2是输出的范围Math.random()*2,0~4是移动4位,取整后加4
整体:Math.floor(Math.random()*3)+4得到的就是4~6的随机数,用Math.floor下舍入,是因为概率是均衡的
5.编码实战
1.rgb
2.16进制
//输出随机的16进制颜色,添加给绑定的九宫格
function col() {
var ne = []
for (var a = 0; a < 6; a++) {//循环6次
var num = Math.floor(Math.random() * 16).toString(16);//toString(16)把随机整数转化成16进制//即大于9的数字转化成adcdef
ne += num;
}
var coo = "#" + ne;//加上#,达到一个16进制字符串
return coo;
}
6.扩展思考
绑定九宫格
洗牌算法变种原理
遇到问题:
所谓随机性能不是很理解,可能是跟随机舍入整数的概率有关系吧
收获:
1.onload 和 onunload 事件
2.onmouseover 和 onmouseout 事件
3.onmousedown、onmouseup 以及 onclick 事件的差别及替代的可能性
4.复习和扩展了一些关于随机的知识
明日计划:继续js2-4
评论