标签：des style blog ar io os sp for java
一、图片加载时（为何要写 onload ？？？）
1、先 alert 弹出值然后再出现图片
var img = new Image();
alert(111);
img.src = "images/1.jpg";
document.body.appendChild(img);
2、先出现图片然后再alert 弹出值
var img = new Image();
img.onload = function(){
document.body.appendChild(img);
alert(111);
}
img.src = "images/1.jpg";
3、图片加载完毕后再执行其他的代码
//图片数组
var imgs = [‘images/1.jpg‘,‘images/2.jpg‘,‘images/3.jpg‘,‘images/4.jpg‘];
//imgCache 装加载完毕图片数组
var imgCache = {};
function load(img){
//如果传进来的值是一个数组，就调用_load()函数
if(img instanceof Array){
img.forEach(function(url){
_load(url);
})
}else{
_load(img)
}
}
function _load(url){
var img = new Image();
img.onload = function(){
imgCache[url] = img;
if(isReady()){
alert(‘图片全部加载完成‘);
}
}
imgCache[url] = false;
img.src = url;
}
function isReady(){
var flag = true;
for(var i in imgCache){
if(!imgCache[i]){
flag = false;
}
}
return flag;
}
load(imgs);
二、调用自己写好的函数
var readyCallback = []; //装调用时传入的数组
var img = new Image();
img.src = ‘images/1.jpg‘;
img.onload = function(){
document.body.appendChild(img);
readyCallback.forEach(function(func){ //循环所有调用时传入的函数
func();
})
};
function onReady(func){
readyCallback.push(func); //在图片加载完毕后将要执行的函数push到数组中
}
function borders(){
img.style.border = ‘1px solid #f00‘;
}
function borderRadius(){
img.style.borderRadius = ‘5px‘;
}
function opacity(){
img.style.opacity = .8;
}
onReady(borders);
onReady(borderRadius);
onReady(opacity);
三、用 forEach 遍历HTML中的元素标签
//html源代码：
<ul id="ul1">
<li class="findLi">1111</li>
<li>2222</li>
<li class="findLi">3333</li>
<li>4444</li>
<li class="findLi">5555</li>
</ul>
<ul id="ul2">
<li class="findLi">1111</li>
<li class="findLi">2222</li>
<li class="findLi">3333</li>
<li>4444</li>
<li>5555</li>
</ul>
//js源代码
function findNodes(func){
var nodes = [];
var htmlNodes = document.getElementsByClassName(‘findLi‘); //获取所有class为findLi的标签
nodes = Array.prototype.slice.call(htmlNodes); //将得到的对象转换为数组
nodes.forEach(function(node){ //用forEach 遍历出数组， 这里的node代表数组中的元素
func(node);
});
return nodes;
};
function setBorder(node){
node.style.border = "1px solid #ccc";
};
function hide(node){
node.style.display = ‘none‘;
};
var nodes = findNodes(setBorder)
四、游戏主循环思想
var lastTime = Date.now();
var box1Speed = 100;
var box2Speed = 150;
var box1 = document.getElementById(‘box1‘);
var box2 = document.getElementById(‘box2‘);
function main(){
var now = Date.now();
var dt = (now - lastTime) / 1000;
box1.style.left = parseInt(box1.style.left) + box1Speed * dt + "px";
box2.style.left = parseInt(box2.style.left) - box2Speed * dt + "px";
lastTime = now;
//用 setTimeout 回调 update 函数，让函数不停地执行，实现循环
setTimeout(main,1000/60);
}
main(); //调用 main 函数
五、 碰撞判断
//css 源代码
#div1{
position: absolute;
left: 30px;
top: 150px;
width: 100px;
height: 100px;
background: #f56205;
}
#div2{
position: absolute;
left: 1200px;
top: 150px;
width: 100px;
height: 100px;
background: greenyellow;
}
//html源代码
<div id="div1"></div>
<div id="div2"></div>
//js 源代码
var speed1 = 100;
var speed2 = 200;
var div1 = document.getElementById(‘div1‘);
var div2 = document.getElementById(‘div2‘);
var lastTime = Date.now();
function update(){
//得到毫秒数的算法
var nowTime = Date.now(),dt = (nowTime - lastTime) / 1000;
var rect1 = getAttr(div1);
var rect2 = getAttr(div2);
var flag = collides(rect1,rect2);
if(flag){
return;
}else{
div1.style.left = (parseInt(div1.offsetLeft) + speed1 * dt) + "px";
div2.style.left = (parseInt(div2.offsetLeft) - speed2 * dt) + "px";
}
lastTime = nowTime;
//用 setTimeout 回调 update 函数，让函数不停地执行，实现循环
setTimeout(update,1000 / 60);
}
update();
//得到某元素标签的 left right width height 值
function getAttr(element){
//返回一个对象
return {
x: element.offsetLeft,
y: element.offsetTop,
width: element.offsetWidth,
height:element.offsetHeight
}
}
//判断是否碰撞,如果碰撞到了返回 true，否则返回 false
function collides(div1,div2){
return !((div1.x + div1.width) < div2.x ||
(div2.x + div2.width) < div1.x ||
(div1.y + div1.height) < div2.y ||
(div2.y + div2.height) < div1.y
)
}
六、使在自动执行函数中的函数可以在整个浏览器窗口中被调用
Javascript中的window对象表示浏览器中打开的窗口。
(function(){
var name = "天天";
var arr = [];
function load(){ //在内部调用_load函数，作用是在当外界调用他的时候看不到函数中的内容
_load();
}
function _load(){ //在内部书写不会外泄的代码，增强了代码的可维护性
alert(name)
}
window.loads = { //把函数指向window，使它可以在整个浏览器窗口中被调用
load:load
}
})();
loads.load(); //等价于 window.loads.load(); 相当于window调用
标签：des style blog ar io os sp for java
原文地址：http://www.cnblogs.com/Angelinvestment/p/4169765.html
