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
提交
取消