【272天】每日項目總結系列010(2017.11.04)

叨叨兩句

  1. ~

刷論壇筆記

  1. 跨平臺的手機開發框架有前途
  2. 結構化編程——>面向對象編程
  3. 太複雜的框架不用學,沒人愛用,沒前途

經常使用前端頁面寫法總結

  1. 輪播圖
<script>

var i = 0;

window.onload = setInterval("lunbotu()",1000);

function lunbotu(){
  var img = document.getElementById("imgId");
  img.src = "../img/" + (i%3+1) + ".jpg"
  i++;
}

</script>
  1. 定時廣告
<script>
            /*
             需求: 用戶打開頁面, 過了3秒鐘彈出廣告, 廣告顯示5秒鐘,以後隱藏廣告
            
            1.肯定事件: onload
            2.事件觸發函數: 匿名函數
            3.函數裏面要乾點事情:
                開啓定時器 :setTimeout(顯示廣告函數,3000)
                
            顯示廣告函數
                找到廣告圖片,顯示出來
                再開啓一個定時器: setTimeout(關閉廣告,3000)
                
            關閉廣告函數
                找到廣告圖片,隱藏
             
            */
            
            function hideAd(){
                //找到元素
                var divad = document.getElementById("ad");
                //操做元素
                divad.style.display="none";
            }
            
            function showAd(){
                    //找到元素
                    var divad = document.getElementById("ad");
                    //操做元素
                    divad.style.display="block";
                    
                    //再開啓一個定時器: setTimeout(關閉廣告,3000)
                    setTimeout("hideAd()",3000);
            }
            
            window.onload=function(){
                
                //開啓定時器
                setTimeout("showAd()",3000);
                
            }
        </script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>彈出廣告</title>
        <script src="../jquery-1.11.0.js"></script>
        <script>
            $(function(){
                setTimeout("showAd()",1000);
            });
            
            //show advertisement
            function showAd(){
                $("#advertisement").show(2000,function(){
                    setTimeout("hideAd()",2000);
                });
            }
            
            //hide advertisement
            function hideAd(){
                $("#advertisement").hide(2000);
            }
            
        </script>
    </head>
    <body>
        <div id="advertisement" style="display:none">
            <img src="../img/test.jpg" alt="" />
        </div>
    </body>
</html>
相關文章
相關標籤/搜索