JavaScript18天课程：JavaScript01

2018-07-18  本文已影响0人  Courage_CYY

书籍网站推荐

课程目录

职业发展

前端三大基础知识+MVC

动手实验

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div.taobao{
                background-color: #ff9000;
                width: 990px;
                height: 30px;
            }
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            li{
                margin: 0 10px;
                color: #ffffff;
                float: left;
                font-weight: bold;
                font-size: 16px;
                line-height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="taobao">
            <ul>
                <li>天猫</li>
                <li>聚划算</li>
                <li>天猫超市</li>
            </ul>
        </div>
    </body>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style: none;
            }
            li{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 484px;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <ul>
                <li><img src="img/banner1.png" alt="" /></li>
                <li><img src="img/banner2.png" alt="" /></li>
                <li><img src="img/banner3.png" alt="" /></li>
                <li><img src="img/banner4.png" alt="" /></li>
                <li><img src="img/banner5.png" alt="" /></li>
                <li><img src="img/banner6.png" alt="" /></li>
            </ul>
        </div>
        <script type="application/javascript">
            main();
            
            function main(){
                var obj1=document.getElementById('banner');
                var li=obj1.getElementsByTagName('li');
                var j=0;
                var iIndex=1;
                var timer;
                
                for(var i=0;i<li.length;i++){
                    if(i==j){
                        li[i].style.opacity='1';
                        continue;
                    }
                    li[i].style.opacity='0';
                }
                function starRoll(){
                    j++;
                    if(j>=li.length){
                        j=0;
                    }
                    li[j].style.zIndex=iIndex;
                    iIndex++;
                    fadeIn(li[j],1)
                };
                function fadeIn(obj,period){
                    var COUNT=50;
                    clearInterval(obj.timer);
                    obj.timer=setInterval(function(){
                        var opacityValue=Number.parseFloat(obj.style.opacity);
                        opacityValue+=period/COUNT;
                        if(opacityValue<1){
                            obj.style.opacity=opacityValue;
                        }else{
                            obj.style.opacity=1;
                            clearInterval(obj.timer);
                            for(var i=0;i<li.length;i++){
                                if(i==j){
                                    li[i].style.opacity='1';
                                    continue;
                                        }
                    
                                    }
                            }
                    },1000/COUNT);
                    
                    
                }
                timer=setInterval(starRoll,2000);
            }
        </script>
    </body>
</html>

框架

浏览器发展史

浏览器发展史.PNG

内核

解释性语言

语言 优点 缺点
解释语言 速度慢 可以跨平台，针对不同平台不需要重新编译
编译语言 运行速度快 不可以跨平台，针对不同平台需要重新编译
JavaScript是一种解释性语言.PNG

线程：1-8

角色

上一篇 下一篇

猜你喜欢

热点阅读