【272天】每日项目总结系列010（2017.11.04）

时间 2019-11-07 标签 272天每日项目总结系列 2017.11.04

叨叨两句

~

刷论坛笔记

跨平台的手机开发框架有前途
结构化编程——>面向对象编程
太复杂的框架不用学，没人爱用，没前途

经常使用前端页面写法总结

轮播图

<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>

定时广告

<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>