清風流光
2017-04-21 05:12:50
function?tuPian(x){
var?href,imgs,txt;
if(!document.getElementById('imgs')){return?false}
href=x.getAttribute('href');
imgs=document.getElementById('imgs');
imgs.setAttribute('src',href);
if(document.getElementsByTagName('p')){
txt=x.getAttribute('title');
p=document.getElementsByTagName('p')[0];
p.firstChild.nodeValue=txt;
}
return?true;
}
function?neiZhi(){
if(!document.getElementById||!document.getElementsByTagName)return?false;
if(!document.getElementById('aJ'))return?false;
var?aJ=document.getElementById('aJ');
var?aas=aJ.getElementsByTagName('a');
for(var?i=0;i<aas.length;i++){
aas[i].onclick=function(){
return?!tuPian(this);
}
}
}
function?addOnloadEvent(x){
var?oldOnLoad=window.onload;
if(typeof?oldOnLoad!='function'){
window.onload=x;
}else{
window.onload=function(){
oldOnLoad();
x();
}
}
}
addOnloadEvent(neiZhi);
function?afterNode(x,y){
var?w=y.parentNode;
if(y==w.lastChild){
w.appendChild(x);
}else{
w.insertBefore(x,y.nextSibling);
}
}
function?p(){
var?img=document.createElement('img');
img.id='imgs';
img.src='img/cool?(3).jpg';
var?p=document.createElement('p');
p.innerHTML='這是圖片的描述';
var?aJ=document.getElementById('aJ');
afterNode(p,aJ);
afterNode(img,aJ);
}
addOnloadEvent(p);<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>js的藝術</title>
<link?rel="stylesheet"?type="text/css"?href="css/css.css"/>
<script?src="js/js.js"?type="text/javascript"?charset="utf-8"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul?id='aJ'?>
<li><a?href="img/cool?(1).png"?title="摩登時代"><img?src="img/cool?(1).png"?/></a></li>
<li><a?href="img/cool?(2).gif"?title="城市風光"><img?src="img/cool?(2).gif"?/></a></li>
<li><a?href="img/cool?(2).png"?title="青色元素"><img?src="img/cool?(2).png"?/></a></li>
<li><a?href="img/cool?(4).jpg"?title="唯美紅綠"><img?src="img/cool?(4).jpg"?/></a></li>
</ul>
</body>
</html>html,body,ul{
margin:?0;
padding:?0;
font-size:?18px;
}
h1{
margin-left:?20px;
transition:?all?1s;?
}
ul{
list-style:?none;
}
li,img{
display:?inline-block;
margin:?10px;
}
a{
text-decoration:?none;
color:?black;
font-family:?arial;
}
p{
margin-left:?80px;
}
#imgs{
width:?290px;
height:?290px;
border:?5px?solid?gainsboro;
box-shadow:?5px?5px?rgba(0,?0,?0,?.6);
}
li>a>img{
width:?50px;
height:?50px;
}上面是全部代碼 ?里面有一個function addOnloadEvent(x){}函數 是用進行window.onload同時執行的;?addOnloadEvent(neiZhi);這個調用是觸發圖片切換函數;addOnloadEvent(p);這個是創建一個img 和p標簽的;顯然window.onload的執行順序不是從上到下, 他們的邏輯順序什么?
1 回答
已采納

我愛吃牛排
TA貢獻47條經驗 獲得超127個贊
addOnloadEvent(neiZhi); ?執行了?window.onload=neiZhi;
addOnloadEvent(p); 執行了
window.onload=function(){
? ? ? ? ? ? ? ? oldOnLoad();
? ? ? ? ? ? ? ? p();
? ? ? ? ? ? }
因為
function addOnloadEvent(x){
? ? ? ? var oldOnLoad=window.onload; ?//把已有的事件函數賦給變量oldOnLoad
? ? ? ? if(typeof oldOnLoad!='function'){?//判斷是否已經有onload事件對應的函數
? ? ? ? ? ? window.onload=x;?//如果沒有,則把函數直接調用,不用(),這里不適合要傳遞參數的函數。
? ? ? ? }else{
? ? ? ? ? ? window.onload=function(){?//如果已經有了onload事件對應的函數,則在后面追加要執行的新函數。此處的函數要有()
? ? ? ? ? ? ? ? oldOnLoad();
? ? ? ? ? ? ? ? x();
? ? ? ? ? ? }
? ? ? ? }
? ? }
點擊展開后面2條
添加回答
舉報
0/150
提交
取消