一個初學者的辛酸路程-前端js

時間 2019-11-12

原文原文鏈接

內容回顧：

一、CSS的基本概念：css

層疊樣式表。html

二、CSS的三種書寫方式ide

① 行內樣式函數

<div style="color: red;">sdfdsf</div>

② 內部樣式佈局

head標籤以內：url

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>sdfsdsd</div>
</body>

這裏又有CSS幾種常見的選擇器：spa

標籤選擇器：3d

<style>
        div{
            color: red;
        }
</style>

ID選擇器:日誌

<style>
        #id{
            font-size:12px;
        }
    </style>

類別選擇器：code

.class{
      color: red;      
}

包含選擇器：

<div>
        <span></span>
</div>

div  span{
    color: red;
}

分組選擇器：

div,span{
    color: red;
}

通用選擇器：

*{
    color: red;
}

僞類選擇器：

鼠標放上去顏色發生改變

a: hover{
    color:red;
}


a:active{
    color: red;
}

a:visited{
    color: red;
}

a:link{
    color:red;
}

③ 外部樣式

<link href="a.css" />

三、CSS文字段落基本屬性

設置div的高度： height

　　設置寬度： width

　　讓123居中 <div>123</div>

　　　　line-height: 設置行高與height一致

　　text-align： left right center 讓文字往左右居中

　　爲div設置一個框： border：1px solid red;

四、CSS的背景

　　background:

　　　　　　　一、　background-color: red;

　　　　　　　　　　background-img: url("1.jpg");

　　　　　　　　　　在X軸上進行重複： background-repeat-x:

　　　　　　　　　　在Y軸上進行重複： background-repeat-y:

　　　　　　　二、　background-position-x:

　　　　　　　三、　background-position-y:

五、CSS的佈局

　　讓div往左或者往右浮動

　　float: left; right

　　配合清除浮動： <div style="clear:both"></div>

六、CSS的盒子模型

　　主要是2個屬性，1個叫作margin,1個叫作padding

margin: 設置外邊距（1個值，上下左右都是10PX，2個值，上下，左右，3個值，第一個是上，第二個是左右，第三個下，提供四個，上-右-下-左） margin是對外元素的距離，用來控制元素自己的浮動位置。

　 padding: 設置內邊距（相同），是對內元素，用來控制元素內部元素的位置

七、position:

　　一、fixed

　　　　固定，相似狗皮膏藥的感受，離上下左右的高度：

　　　　　　　　top right left bottom 都爲0就是展開整個頁面

　　二、relative

　　三、absolute

　　　　定位方式：若是父級有定位方式，則以父級定位，若是沒有則以body定位

八、z-index:

z-index：若是有浮層，想讓哪一個div往上浮動，就設置大點就完事。

九、IE6的bug

　　出現的一些bug

十、透明度

　　opcatiy：值越大就越深，越小就透明。

主要內容

一、頁面佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .pg-menu{
            width:10%;
            background-color: #333744;
            /*height:1000px;*/
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .pg-body .pg-content{
            width: 90%;
            background-color: gainsboro;
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    </div>
    <div class="pg-body">
        <div class="pg-menu">

        </div>
        <div class="pg-content">

        </div>
    </div>
</body>
</html>

二、後臺佈局+下拉菜單

後臺管理佈局的下拉菜單須要注意：

對a標籤進行hover，而後讓a下面的c1進行一個反應。

我要實現下面一個功能，就是我鼠標放在上面就會彈出下面的框

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .pg-menu{
            width:10%;
            background-color: #333744;
            /*height:1000px;*/
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .pg-body .pg-content{
            width: 90%;
            background-color: gainsboro;
            position: absolute;
            top: 48px;
            right:0;
            bottom:0;
            overflow: auto;
            z-index: 9;
        }
        .pg-header .logo{
            color: white;
            text-align: center;
            width: 10%;
            line-height:48px;
            background-color: #7abd54;
        }
        .pg-header .userinfo img{
            border-radius: 50%;
        }
        .pg-header .userinfo{
            border: 1px solid red;
            margin-top: 4px;
            width:140px;
        }
        .pg-header .userinfo .infolist{
            display: none;
            position: absolute;
            top:43px;
            right: 36px;
            background-color: lavender;
            z-index: 10;
        }
        .pg-header .userinfo:hover .infolist{
            display: block;
            color: red;
        }

        .pg-header .userinfo .infolist a{
            display: block;
            color: white;
            width:140px;
        }

    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">
            <span>歡迎光臨</span>
        </div>
        <div class="userinfo right" style="position: relative;">
            <img src="11.png" alt="" width="40" height="40">
            <div class="infolist">
                <a>個人信息</a>
                <a>登陸</a>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="pg-menu">

        </div>
        <div class="pg-content">

        </div>
    </div>
</body>
</html>

View Code

三、JS 之DOM操做

寫一個表格

快速寫表格的方法

<body>
    table>(thead>tr>th{&nbsp;}*3)+(tbody>tr*3>td{&nbsp;}*3)
</body>

而後按TAB鍵便可。
效果以下：

點擊按鈕，觸發函數，須要用到

<input type="button" value="全選" onclick="selectAll();">

而後呢，在查看點擊按鈕是否能運行函數

<script>
    function selectAll(){
        console.log('dsdfdsf');
    }
</script>

而後點擊按鈕查看日誌

最後實現下面的效果：

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全選" onclick = "selectAll();"/>
<input type="button" value="取消" onclick = "cancelAll();"/>
<input type="button" value="反選" onclick = "reverseAll();"/>

<table border="1">
    <thead>
    <tr>
        <th>操做</th>
        <th>IP</th>
        <th>端口</th>
    </tr>
    </thead>
    <tbody id="info">
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </tbody>
</table>
</body>
    <script>
        function selectAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            一、獲得Tbody
            console.log(myTrs);
            // 二、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = true;
            }
        }

        function cancelAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            一、獲得Tbody
            console.log(myTrs);
            // 二、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = false;
            }
        }

        function reverseAll(){
//            console.log('dsdfdsf');
            var myTbody = document.getElementById("info");
//            一、獲得Tbody
            console.log(myTrs);
            // 二、找下面的孩子
            var myTrs = myTbody.children;
//                console.log(myTrs);
            for(var i=0; i<myTrs.length;i++){
//                console.log(myTrs[i].children[0].children[0]);
                var myInput = myTrs[i].children[0].children[0];
                if(myInput.checked){
                    myInput.checked = false;
                }else{
                    myInput.checked = true;
                }
            }
        }
    </script>
</html>

View Code

四、模態框

實現效果以下：

點擊按鈕之後彈出模塊框，記住這裏是有3層疊加

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            position: fixed;
            top: 0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity:0.6;
        }
        .info{
            position: fixed;
            width:400px;
            height:300px;
            top: 50px;
            left:400px;
            right:400px;
            background-color: white ;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="點擊" onclick="showModel();" />
    </div>
    <!--遮罩層-->
    <div class="one hide"></div>

    <!--彈出框-->
    <div class="info hide">
        <p>
            <input type="text"><p></p>
            <input type="text"><p></p>
            <input type="button" value="取消" onclick="hideModel();">
            <input type="button" value="肯定">
        </p>
    </div>
</body>
<script>
    function showModel(){
//        拿到彈框
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];
//        console.log(myone);
        myone.classList.remove('hide');
        info.classList.remove('hide');
    }

    function hideModel(){
//        拿到彈框
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];
//        console.log(myone);
        myone.classList.add('hide');
        info.classList.add('hide');
    }
</script>
</html>

View Code

五、跑馬燈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wel">
        不要攔我，此次我要拿次A
    </div>
</body>
<script>
    function test(){
        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;

        mywel.innerText = new_content;
    }

    setInterval("test()",1000);
</script>

</html>

View Code

附上一個最簡單的跑馬燈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<marquee behavior="" direction="">誰都不要攔我，此次我要拿次A</marquee>
</body>
</html>

六、時間模塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="clock"></div>
</body>
    <script>
        function clock(){
            var mydate = new Date();
            var myyear = mydate.getFullYear();
            var mymonth = mydate.getMonth();
            var myday = mydate.getDay();
            var myhour = mydate.getHours();
            var myminuts = mydate.getMinutes();
            var mysec = mydate.getSeconds();

            var res = myyear + "-" + mymonth+"-"+myday+" "+ myhour +":"+myminuts+":"+mysec
            var mycolck = document.getElementById("clock");
            mycolck.innerText = res;
        }
        setInterval("clock();",1000);
    </script>
</html>