javascript - 兩個(gè)script為什么自動(dòng)換背景的不執(zhí)行呢？
問題描述
前段時(shí)間表白網(wǎng)頁(yè)很有趣，就嘗試看看視頻寫了代碼，但是為什么背景自動(dòng)更換這個(gè)script沒有執(zhí)行呢？求教各位了## 兩個(gè)script只有一個(gè)實(shí)現(xiàn)了 ##
<!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;}/*勻速 無(wú)線運(yùn)行*/ .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:'華文行楷';} /*定義一個(gè)關(guān)鍵幀*/ @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>時(shí)光不老 我們不散</marquee> </p> <!--end top--> <!--start box--> <p class='box'> <p class='pic'> <ul> <li><img src='http://m.baoyu77737.com/wenda/image/1.png'height=''width=''alt=''/></li> <li><img src='http://m.baoyu77737.com/wenda/image/2.png'height=''width=''alt=''/></li> <li><img src='http://m.baoyu77737.com/wenda/image/3.png'height=''width=''alt=''/></li> <li><img src='http://m.baoyu77737.com/wenda/image/4.png'height=''width=''alt=''/></li> <li><img src='http://m.baoyu77737.com/wenda/image/5.png'height=''width=''alt=''/></li> <li><img src='http://m.baoyu77737.com/wenda/image/6.png'height=''width=''alt=''/></li> </ul> </p> </p> <!--end box--> <!--star text--> <p id='text'></p> <!--end text--> <embed src='http://m.baoyu77737.com/wenda/music/告白氣球 - 周杰倫.mp3' Volume='30' height='0'></embed> <script src='http://m.baoyu77737.com/wenda/js/jquery.min.js'></script> <script src='http://m.baoyu77737.com/wenda/js/jquery.min.js'></script> <script src='http://m.baoyu77737.com/wenda/js/jquery.snow.min.js'></script> <script> //拿到每一個(gè)li $('.pic ul li').each(function(i){var deg = 360/$('.pic ul li').size();//當(dāng)前l(fā)i對(duì)象 $(this).css({'transform':'rotateY('+deg*i+'deg)translateZ(216px)'}); $.fn.snow({minSize:10,maxSize:15,newOn:500,flakeColo:'#ffffff' }); });var i = 0;var str ='能夠遇見你是我最大的幸運(yùn)，有了你生活變得豐富多彩，有了你，世界變得如此迷人，你是我的世界，我的世界是你，對(duì)我來(lái)說(shuō)，不是在最美好的時(shí)光遇見了你，而是遇見你以后都是最美好的時(shí)光！' 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(){}關(guān)鍵字：DOM0級(jí)事件與DOM2級(jí)事件
回答2：在js中window.onload事件是唯一的,無(wú)論你寫多少個(gè)都只執(zhí)行一個(gè),而且是最后一個(gè),所以你可以考慮用jq中的$(function(){}),它不會(huì)因?yàn)槌霈F(xiàn)的的順序而改變?yōu)g覽器渲染,同時(shí)瀏覽器會(huì)根據(jù)$(function(){})的多少來(lái)進(jìn)行渲染。
回答3：window.onload事件只能執(zhí)行一次，再則你已經(jīng)引用了jquery.min.js，可以嘗試改成$(function(){}),可以多次引用。
相關(guān)文章：
1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題2. javascript - 用JS 七牛上傳圖片出現(xiàn)文件已存在的錯(cuò)誤（file exists）3. css3 - 圖片等比例縮放4. javascript - QWebEngineView 如何爬 angular 的動(dòng)態(tài)數(shù)據(jù)？5. javascript - 使用angular 的ui-sref 中出現(xiàn)了中文參數(shù)，點(diǎn)擊跳轉(zhuǎn)后瀏覽器的地址欄里出現(xiàn)轉(zhuǎn)義后的%AE....%a%46. html5 - 這個(gè)代碼顯示功能如何實(shí)現(xiàn)？7. html - css3中多列高度 統(tǒng)一8. java - 郵箱如何發(fā)送html內(nèi)容9. css3 - animation屬性，safari瀏覽器不支持相關(guān)效果10. java - ConcurrentHashMap中的get()方法為什么可以不加鎖？
網(wǎng)公網(wǎng)安備