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--> <p class='top'> <marquee behavior=alternate>时光不老 我们不散</marquee> </p> <!--end top--> <!--start box--> <p class='box'> <p class='pic'> <ul> <li><img src='https://www.haobala.com/wenda/image/1.png'height=''width=''alt=''/></li> <li><img src='https://www.haobala.com/wenda/image/2.png'height=''width=''alt=''/></li> <li><img src='https://www.haobala.com/wenda/image/3.png'height=''width=''alt=''/></li> <li><img src='https://www.haobala.com/wenda/image/4.png'height=''width=''alt=''/></li> <li><img src='https://www.haobala.com/wenda/image/5.png'height=''width=''alt=''/></li> <li><img src='https://www.haobala.com/wenda/image/6.png'height=''width=''alt=''/></li> </ul> </p> </p> <!--end box--> <!--star text--> <p id='text'></p> <!--end text--> <embed src='https://www.haobala.com/wenda/music/告白气球 - 周杰伦.mp3' Volume='30' height='0'></embed> <script src='https://www.haobala.com/wenda/js/jquery.min.js'></script> <script src='https://www.haobala.com/wenda/js/jquery.min.js'></script> <script src='https://www.haobala.com/wenda/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 获取p var myp = document.getElementById('text'); myp.innerHTML += str.charAt(i); i++; var id = setTimeout(typing,100); if(i==str.length){clearTimeout(id); } } </script> </body></html>
问题解答
回答1：使用 window.addEventListener(’load’,function(){})替换 window.onload = function(){}关键字：DOM0级事件与DOM2级事件
回答2：在js中window.onload事件是唯一的,无论你写多少个都只执行一个,而且是最后一个,所以你可以考虑用jq中的$(function(){}),它不会因为出现的的顺序而改变浏览器渲染,同时浏览器会根据$(function(){})的多少来进行渲染。
回答3：window.onload事件只能执行一次，再则你已经引用了jquery.min.js，可以尝试改成$(function(){}),可以多次引用。
相关文章：
1. 为什么我ping不通我的docker容器呢？？？2. mysql - JAVA怎么实现一个DAO同时实现查询两个实体类的结果集3. javascript - vue中父组件向子组件传递Object时，如何避免TypeError？4. golang - 用IDE看docker源码时的小问题5. mac连接阿里云docker集群，已经卡了2天了，求问？6. mysql - sql 语句更改表结构，添加多个列，怎么写？7. docker绑定了nginx端口 外部访问不到8. docker gitlab 如何git clone？9. javascript - 怎么设计项目的返回码，让不同的返回码代表不同的含义？10. html - IOS二维码识别问题
网公网安备