javascript - 两个script为什么自动换背景的不执行呢？
本文介绍了javascript - 两个script为什么自动换背景的不执行呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
前段时间表白网页很有趣，就尝试看看视频写了代码，但是为什么背景自动更换这个script没有执行呢？求教各位了## 两个script只有一个实现了 ##
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>你是我的最爱--000</title>
<style type="text/css">
*{margin:0;padding:0;}
#bg_body{
background:url(image/1.jpg) no-repeat center #eee;
background-size:cover;
/* background-attachment:fixed;
height:1000px; */
}
/*start top*/
.top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#fff;}
/*end top*/
/*start box*/
.box{width:310px;height:310px;margin:auto;perspective:800px;}
.box .pic{position:relative;transform-style:preserve-3d;animation:play 10s linear infinite;}/*匀速 无线运行*/
.box ul li{list-style:none;position:absolute;top:0;left:0;}
/*end box*/
#text{width:980px;height:130px;color:#0099ff;margin:auto;font-size:30px;font-family:"华文行楷";}
/*定义一个关键帧*/
@keyframes play{
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}
</style>
<script type="text/javascript">
window.onload=function typing (){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(image/'+(parseInt(Math.random() * 6) + 1)+'.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>
</head>
<body id="bg_body">
<!--start top-->
<div class="top">
<marquee behavior=alternate>时光不老 我们不散</marquee>
</div>
<!--end top-->
<!--start box-->
<div class="box">
<div class="pic">
<ul>
<li><img src="image/1.png"height=""width=""alt=""/></li>
<li><img src="image/2.png"height=""width=""alt=""/></li>
<li><img src="image/3.png"height=""width=""alt=""/></li>
<li><img src="image/4.png"height=""width=""alt=""/></li>
<li><img src="image/5.png"height=""width=""alt=""/></li>
<li><img src="image/6.png"height=""width=""alt=""/></li>
</ul>
</div>
</div>
<!--end box-->
<!--star text-->
<div id="text"></div>
<!--end text-->
<embed src="music/告白气球 - 周杰伦.mp3" Volume="30" width="0" height="0"></embed>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.snow.min.js"></script>
<script>
//拿到每一个li
$(".pic ul li").each(function(i){
var deg = 360/$(".pic ul li").size();
//当前li对象
$(this).css({"transform":"rotateY("+deg*i+"deg)translateZ(216px)"});
$.fn.snow({
minSize:10,maxSize:15,newOn:500,flakeColo:"#ffffff"
});
});
var i = 0;
var str ="能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人，你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你以后都是最美好的时光！"
window.onload = function typing(){
//js 获取div
var mydiv = document.getElementById("text");
mydiv.innerHTML += str.charAt(i);
i++;
var id = setTimeout(typing,100);
if(i==str.length){
clearTimeout(id);
}
}
</script>
</body>
</html>
解决方案
是因为在javascript中window.onload事件是唯一的,无论你写多少个都只执行一个,而且是最后一个,
再说你页面不是引了jquery的吗？你完全可以把第一个script改成jq的写法呀。因为$(function(){})可以出现多次，并且都会运行。
window.onload=function typing (){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(image/'+(parseInt(Math.random() * 6) + 1)+'.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};改写：
<script type="text/javascript">
$(document).ready(function(){
typing();
});
//当然 你也可以把下面这个函数 都改成 jquery的写法
function typing (){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(image/'+(parseInt(Math.random() * 6) + 1)+'.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>这篇关于javascript - 两个script为什么自动换背景的不执行呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
