search

Home  >  Q&A  >  body text

javascript - Why doesn't the one that automatically changes the background of the two scripts execute?

Some time ago, I confessed that the webpage was very interesting, so I tried to watch the video and wrote the code, but why was the script for automatically changing the background not executed? Please give me some advice## Only one of the two scripts has been implemented

##
<!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="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>
   </p>
  </p>
  <!--end box-->

  <!--star text-->
  <p id="text"></p>
  <!--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 获取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>
天蓬老师天蓬老师2759 days ago877

reply all(3)I'll reply

  • typecho

    typecho2017-06-08 11:04:49

    Use window.addEventListener('load',function(){}) to replace window.onload = function(){}
    Keywords: DOM0 level events and DOM2 level events

    reply
    0
  • 怪我咯

    怪我咯2017-06-08 11:04:49

    The window.onload event is unique in js. No matter how many you write, only one will be executed, and it is the last one, so you can consider using $(function(){}) in jq. It will not appear due to The order of the browser will change the rendering, and the browser will render according to the amount of $(function(){}).

    reply
    0
  • 学习ing

    学习ing2017-06-08 11:04:49

    The window.onload event can only be executed once. If you have already referenced jquery.min.js, you can try changing it to $(function(){}), which can be referenced multiple times.

    reply
    0
  • Cancelreply